#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: | [email protected]… | |
Blocked By: | Blocking: |
Description
The toggle buttons icons that indicate state are not visible in Windows high contrast mode. To reproduce:
- enter high contrast mode
- open dijit/tests/form/test_Button.html
- toggle button icons not visible
Attachments (3)
Change History (21)
comment:1 Changed 13 years ago by
Milestone: | → 1.0 |
---|
comment:2 Changed 13 years ago by
Owner: | changed from Becky Gibson to ptbrunet |
---|
comment:3 Changed 13 years ago by
comment:5 Changed 13 years ago by
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 13 years ago by
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 13 years ago by
Bill, I didn't look at expando, but I think I've got it as skinny as possible.
Becky,
- 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.
- I couldn't find a problem with IE7 but noticed many times during development that I had to clear my cache.
- And I simplified the code (at the expense of more css).
comment:8 Changed 13 years ago by
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 13 years ago by
agreed that we don't need 2 separate characters in high contrast mode
comment:10 Changed 13 years ago by
Cc: | [email protected]… added |
---|
Changed 13 years ago by
Attachment: | 4737_bg.patch added |
---|
show how to accomplish using only css and template changes - needs addn work
Changed 13 years ago by
Attachment: | 4737c.patch added |
---|
comment:11 Changed 13 years ago by
Becky, Your patch looks good. I tested on IE6/7 and FF2/3. I tweaked it as follows:
- button.html
- slight reformat so can see correct structure
- changed * to checkmark ✓ which caused no problems for the screen readers
- 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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:13 Changed 13 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
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 13 years ago by
Priority: | normal → highest |
---|
comment:15 Changed 13 years ago by
Owner: | changed from ptbrunet to Becky Gibson |
---|---|
Status: | reopened → new |
comment:17 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
fixed in [11311] (i get all the cool rev. numbers)
Attached file for simonjb to review.