Button: It's hard to see the keyboard focus indicator in high contrast mode

[Siqi]

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

[Siqi]

dijit.form.Button in hight contrast mode

[Douglas Hays]

See also #13545

[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.

[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?

[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.

[Katie Vance]

Chaging padding to 1

[Katie Vance]

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

[bill]

In [26096]:

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

[Becky Gibson]

Yes, looks much better - thanks!

[Douglas Hays]

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

[Katie Vance]

Add margin to inner element instead

[Katie Vance]

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

[bill]

In [26200]:

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