Opened 10 years ago
Closed 10 years ago
#13544 closed defect (fixed)
Button: It's hard to see the keyboard focus indicator in high contrast mode
Reported by: | Siqi | Owned by: | Katie Vance |
---|---|---|---|
Priority: | high | Milestone: | 1.7 |
Component: | Dijit - Form | Version: | 1.6.1 |
Keywords: | a11y | Cc: | [email protected]…, Becky Gibson |
Blocked By: | Blocking: |
Description (last modified by )
Attachments (3)
Change History (15)
Changed 10 years ago by
comment:1 Changed 10 years ago by
Description: | modified (diff) |
---|---|
Summary: | dijit.form.Button - It's hard to see the keyboard focus indicator in high contrast mode → Button: It's hard to see the keyboard focus indicator in high contrast mode |
comment:3 Changed 10 years ago by
From firebug and from looking at the non-high contrast version, it looks like the button's border and the focus outline are on different DOMNodes. Seems like they just need a margin or padding between them.
comment:4 Changed 10 years ago by
Milestone: | tbd → 1.7 |
---|---|
Owner: | changed from Douglas Hays to Katie Vance |
comment:5 Changed 10 years ago by
I tried to add padding like you suggested, but it looks like that was removed for a specific reason. Here is the code in dijit.css:
.dijit_a11y .dijitButtonNode {
border: black outset medium !important;
/* In claro, hovering a toolbar button reduces padding and adds a border.
Not needed in a11y mode since Toolbar buttons always have a border.
*/
padding: 0 !important;
}
I tried removing the padding and indeed I could see the focused button again. However, if I modify that then I will regress #11187. Any ideas?
comment:6 Changed 10 years ago by
The fix to #11187 is that hovering a button (in high contrast mode) shouldn't change the padding. Not necessarily that padding == 0. So, sounds like you can just change the 0 to a positive number.
comment:10 Changed 10 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
breaks dijit/tests/quirks.html?file=form/TextBox_sizes.html&a11y=1&dir=ltr
comment:11 Changed 10 years ago by
The tests seem to work if I add a margin to the inner element rather than changing the padding.
dijit.form.Button in hight contrast mode