Opened 8 years ago

Closed 8 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: zhongsq@…, Becky Gibson
Blocked By: Blocking:

Description (last modified by bill)

Open dijit/tests/form/test_Button.html in high contrast mode, t's hard to see the keyboard focus indicator:

dijit.form.Button in hight contrast mode

Attachments (3)

1111.png (42.3 KB) - added by Siqi 8 years ago.
dijit.form.Button in hight contrast mode
13544.patch (455 bytes) - added by Katie Vance 8 years ago.
Chaging padding to 1
13544.2.patch (570 bytes) - added by Katie Vance 8 years ago.
Add margin to inner element instead

Download all attachments as: .zip

Change History (15)

Changed 8 years ago by Siqi

Attachment: 1111.png added

dijit.form.Button in hight contrast mode

comment:1 Changed 8 years ago by bill

Description: modified (diff)
Summary: dijit.form.Button - It's hard to see the keyboard focus indicator in high contrast modeButton: It's hard to see the keyboard focus indicator in high contrast mode

comment:2 Changed 8 years ago by Douglas Hays

Cc: Becky Gibson added

See also #13545

comment:3 Changed 8 years ago by bill

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 8 years ago by Douglas Hays

Milestone: tbd1.7
Owner: changed from Douglas Hays to Katie Vance

comment:5 Changed 8 years ago by Katie Vance

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 8 years ago by bill

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.

Changed 8 years ago by Katie Vance

Attachment: 13544.patch added

Chaging padding to 1

comment:7 Changed 8 years ago by Katie Vance

Yes, changing the padding to 1 seems to to do the trick.

comment:8 Changed 8 years ago by bill

Resolution: fixed
Status: newclosed

In [26096]:

Make display of Button's focus border more obvious in high contrast mode, fixes #13544, thanks Katie.

comment:9 Changed 8 years ago by Becky Gibson

Yes, looks much better - thanks!

comment:10 Changed 8 years ago by Douglas Hays

Resolution: fixed
Status: closedreopened

breaks dijit/tests/quirks.html?file=form/TextBox_sizes.html&a11y=1&dir=ltr

Changed 8 years ago by Katie Vance

Attachment: 13544.2.patch added

Add margin to inner element instead

comment:11 Changed 8 years ago by Katie Vance

The tests seem to work if I add a margin to the inner element rather than changing the padding.

comment:12 Changed 8 years ago by bill

Resolution: fixed
Status: reopenedclosed

In [26200]:

use margin instead of padding so that TextBox_sizes.a11y.quirks test doesn't fail, fixes #13544.

Note: See TracTickets for help on using tickets.