Toggle button icons not visible in high contrast

[simonjb]

The toggle buttons icons that indicate state are not visible in Windows high contrast mode. To reproduce:

1. enter high contrast mode
2. open dijit/tests/form/test_Button.html
3. toggle button icons not visible

[ptbrunet]

Attached file for simonjb to review.

[ptbrunet]

Updated patch; forgot to remove two unneeded lines.

[bill]

This seems like too much code; should just be a few lines of JS and CSS code. See how we do the tree expando node.

[Becky Gibson]

4737a.patch breaks high contast mode for buttons with an icon only - in high contrast mode these should display the text alternative. I suspect you need to add an addtional class - by adding dijitToolbar there is now now class for just the buttons when not in a toolbar.

Also the toggle fix doesn't work in IE7 in high contrast mode. t also looks a bit more complicated than I thought it would need to bewhy not always just change the character for high contrast mode and not bother to check - I think that might be simpler.

[ptbrunet]

Bill, I didn't look at expando, but I think I've got it as skinny as possible.

Becky,

1. Thanks for catching the breakage of textless buttons. The only reason I modified that was to get the text laid out horizontally and I think that is better for textless buttons too (more like the non high contrast view) so I just changed that line from display:block to display:inline.
2. I couldn't find a problem with IE7 but noticed many times during development that I had to clear my cache.
3. And I simplified the code (at the expense of more css).

[bill]

This really doesn't require any changes to the JS code. Should just have a character in the template that's either shown or hidden depending on whether dijitToggleButtonChecked is set or not. (Or perhaps toggle display between two characters that indicate "on" and "off".)

Don't need to worry about the difference between a check mark icon and radio button icon, as those are just two examples in the test file of icons that a user could use.

[Becky Gibson]

agreed that we don't need 2 separate characters in high contrast mode

[Becky Gibson]

show how to accomplish using only css and template changes - needs addn work

[ptbrunet]

Becky, Your patch looks good. I tested on IE6/7 and FF2/3. I tweaked it as follows:

1. button.html
   • slight reformat so can see correct structure
   • changed * to checkmark &#10003 which caused no problems for the screen readers
2. dijit.css: added the change from block to inline for

   .dijit_a11y .dijitButtonContents .dijitButtonText
   

   so button content flows horizontally like the non high contrast case

[Becky Gibson]

(In [11179]) fixes #4737. Added checkmark character to toggle button for high contrast mode (commit for ptbrunet IBM CLA)

[Becky Gibson]

this fix does not work for toggle buttons in a toolbar and it breaks toolbar buttons in soria. the soria problem can be seen in toolbar of demos/mail.html and on compose message page in that demo. The high contrast problem can be seen in test_editor.html in high contrast mode.

[Becky Gibson]

updated to fix toolbar problem

[dante]

(In [11311]) refs #4737 - this works i think.

[dante]

fixed in [11311] (i get all the cool rev. numbers)

[dante]

(In [11316]) removes leftover .tundra stuff from today's a11y fix refs #4737