Enhancement: Make Settings dialog accessibility friendly (support keyboard / screenreader)

[RealRaven2000]

Currently it is hard for screen readers to navigate the SmartTemplates settings pages:

• the menu items on the left are not accessible
• some tooltips are not even visible to the user (tooltiptext attribute is deprecated). in checkbox inputs, title attributes are not ideal as they only show up when hovering a checkbox.
• button based tooltips are not readable for screen readers (discovered while working on Composer crashes when forwarding with JAWS screen reader installed #359)
• the variables page cannot be easily navigated with keyboard

All elements on the global / advanced / templates / license pages should be keyboard accessible and read out by screen readers.

[RealRaven2000]

After working on this all day, we're looking a lot better for accessibility:

• added tooltip buttons with keyboard support that are screenreader friendly (objective is to get rid of as many title and tooltiptext attributes as possible)
• converted variables page (help.xhtml) to html (variables.html)
• added keyboard handling to navigate variables page with screen reader
• added keyboard navigation to settings pages menu

smartTemplate-fx-4.11pre125.zip

---

To try out this version, download the zip file and then drag it into Thunderbird Add-ons Manager (without extracting)
for users of screenreader you can also install this via the tools button after the "Find more addons" search text. activate the button with Enter then chose the 3rd menu entry "install addon from file...". Then select the zip file to install.

[Rodrigo-Berlin]

These are important improvements for more accessibility!

[RealRaven2000]

Ok, I made a couple of changes in the navigation, bear with me as I am new to this accessibility stuff:

I added "aria" labels (for accessibility) to the main navigation menu, when tabbing to it, screenreader will say "Settings Pages - use arrow keys to navigate.". The active page will be read out with the addition "Page selected.". The idea is that you can select a page using [ENTER]. Use Tab to go to the page from the menu. use arrows up and down to go to the different page titles. I am not sure whether this is intuitive to the average screen reader user, I wanted to avoid the amount of items you have to tab through to get to the page content. I also dealt with a few bugs from yesterdays changes, see new version below.

Note that currently I have only added English and German translations for these additions, any other languages will default to the english versions.

smartTemplate-fx-4.11pre154.zip

---

To try out this version, download the zip file and then drag it into Thunderbird Add-ons Manager (without extracting)
for users of screenreader you can also install this via the tools button after the "Find more addons" search text. activate the button with Enter then chose the 3rd menu entry "install addon from file...". Then select the zip file to install.

[RealRaven2000]

I made a substantial number of changes in the settings pages hopefully for the better:

• auto-focus on the navigation element (main menu) when settings are opened
• improved behavior (and positions) of tooltip buttons. these are positioning correctly when clicked and support [Enter]. they are also read out by screenreaders (had to set role="alert" for this temporarily)
• moved first tooltip button after the account dropdown to avoid it being read out early
• made sure to use h2 within sections
• linked up labels and input boxes so the labels are read out properly using the "for" attribute
• set autcomplete="off" where it didn't make sense.

smartTemplate-fx-4.11pre218.zip

To do:

• translate the new string aria.settings.nav, aria.settings.nav.selected, aria.accordion.header.expand, aria.configSettings once they are accepted by the test users

---

To try out this version, download the zip file and then drag it into Thunderbird Add-ons Manager (without extracting)
for users of screenreader you can also install this via the tools button after the "Find more addons" search text. activate the button with Enter then chose the 3rd menu entry "install addon from file...". Then select the zip file to install.

[RealRaven2000]

• Made more improvements in navigation, especially for config buttons. the license page is still work in progress as it has some areas that are currently not recognized by screenreaders.
• Also added localization labels template.category.docs and aria.moreInfo

smartTemplate-fx-4.11pre231.zip

---

To try out this version, download the zip file and then drag it into Thunderbird Add-ons Manager (without extracting)
for users of screenreader you can also install this via the tools button after the "Find more addons" search text. activate the button with Enter then chose the 3rd menu entry "install addon from file...". Then select the zip file to install.