-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Button focus border issues #3560
Comments
@carbon-design-system/design Any thoughts on the latter part? Do you see any discrepancies from the design spec? Thanks! |
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?
They should be functioning the same across buttons. This may be a bug with tertiary then?
This is intentional, to my understanding the focus doesn't always have to be exactly the same on all components.
Yes, you would use the color token |
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. |
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?
The text was updated successfully, but these errors were encountered: