Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#4737 closed defect (fixed)

Toggle button icons not visible in high contrast

Reported by: simonjb Owned by: Becky Gibson
Priority: blocker Milestone: 1.0
Component: Accessibility Version: 0.9
Keywords: Cc: brunet@…
Blocked By: Blocking:

Description

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

Attachments (3)

4737_bg.patch (1.8 KB) - added by Becky Gibson 12 years ago.
show how to accomplish using only css and template changes - needs addn work
4737c.patch (2.3 KB) - added by ptbrunet 12 years ago.
4737_1101.patch (1.6 KB) - added by Becky Gibson 12 years ago.
updated to fix toolbar problem

Download all attachments as: .zip

Change History (21)

comment:1 Changed 12 years ago by Becky Gibson

Milestone: 1.0

comment:2 Changed 12 years ago by Becky Gibson

Owner: changed from Becky Gibson to ptbrunet

comment:3 Changed 12 years ago by ptbrunet

Attached file for simonjb to review.

comment:4 Changed 12 years ago by ptbrunet

Updated patch; forgot to remove two unneeded lines.

comment:5 Changed 12 years ago by 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.

comment:6 Changed 12 years ago by 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.

comment:7 Changed 12 years ago by 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).

comment:8 Changed 12 years ago by 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.

comment:9 Changed 12 years ago by Becky Gibson

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

comment:10 Changed 12 years ago by ptbrunet

Cc: brunet@… added

Changed 12 years ago by Becky Gibson

Attachment: 4737_bg.patch added

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

Changed 12 years ago by ptbrunet

Attachment: 4737c.patch added

comment:11 Changed 12 years ago by 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

comment:12 Changed 12 years ago by Becky Gibson

Resolution: fixed
Status: newclosed

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

comment:13 Changed 12 years ago by Becky Gibson

Resolution: fixed
Status: closedreopened

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.

comment:14 Changed 12 years ago by Becky Gibson

Priority: normalhighest

comment:15 Changed 12 years ago by Becky Gibson

Owner: changed from ptbrunet to Becky Gibson
Status: reopenednew

Changed 12 years ago by Becky Gibson

Attachment: 4737_1101.patch added

updated to fix toolbar problem

comment:16 Changed 12 years ago by dante

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

comment:17 Changed 12 years ago by dante

Resolution: fixed
Status: newclosed

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

comment:18 Changed 12 years ago by dante

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

Note: See TracTickets for help on using tickets.