Button focus border issues

[ggarcia-ibm]

IE11 only
Buttons don't display the focus state. The custom focus border used for buttons doesn't work because IE11 doesn't support "outline-offset". Our application must meet accessibility requirements so we are going to be adding a dotted line around the buttons to indicate the focus state, in lieu of the inset custom border. Are you planing to fix the focus border in IE11?

All other browsers
The focus border isn't consistent for all button types. For example, tertiary buttons don't display the focus border unless you mouse over the button, which doesn't meet accessibility requirements. Also, the focus border on danger buttons changes from blue to red when you mouse over the button, while other types of buttons always have a blue focus border (i.e., primary and secondary buttons). Are these known issues being addressed in the near future?

We have an accessibility requirement to be able to place the focus on disabled buttons, which means that we need to show a focus border. Would you suggest using the same blue focus border used on active buttons or a dark grey border?

[asudoh]

@carbon-design-system/design Any thoughts on the latter part? Do you see any discrepancies from the design spec? Thanks!

[aagonzales]

I don't have IE 11 so its hard for me to check/see what you are talking about. @garcia323 could you post some images or gifs of what you're seeing?

The focus border isn't consistent for all button types. For example, tertiary buttons don't display the focus border unless you mouse over the button, which doesn't meet accessibility requirements.

They should be functioning the same across buttons. This may be a bug with tertiary then?

Also, the focus border on danger buttons changes from blue to red when you mouse over the button, while other types of buttons always have a blue focus border (i.e., primary and secondary buttons). Are these known issues being addressed in the near future?

This is intentional, to my understanding the focus doesn't always have to be exactly the same on all components.

We have an accessibility requirement to be able to place the focus on disabled buttons, which means that we need to show a focus border. Would you suggest using the same blue focus border used on active buttons or a dark grey border?

Yes, you would use the color token $focus for all the disabled buttons.

[ggarcia-ibm]

Yes, I believe that tertiary buttons have a bug. As for IE11, here's an example.

The first button has focus and mouse-over and you can see that the focus border uses a slightly different shade of blue than the rest of the button, but the white outline that delineates the focus border isn't shown because outline-offset isn't supported in IE11. This is really needed since the two shades of blue don't have enough contrast. It's worse when the button has focus but you don't mouse over it because the whole button is the same shade of blue.