Focus styling and hiding for mat-button-toggle #3014
Labels
Accessibility
This issue is related to accessibility (a11y)
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Bug, feature request, or proposal:
Implement focus indication for md-button-toggle, similar to md-button.
What is the expected behavior?
Several form elements such as md-button have a md-button-focus class bound to a function that detects whether the element has focus and it's appropriate to show the focus indicator. (This doesn't just style the :focus pseudoselector because an element can have focus even when the focus indicator should not be shown.) md-button-toggle should implement this similarly.
What is the current behavior?
md-button-toggle does not implement md-button-focus, nor does it have focus styling. I believe the current behavior is to not indicate focus for toggle buttons or button groups at all. Focus itself is handled correctly: exclusive button groups take focus, as do individual toggles alone and in multi-select groups.
What are the steps to reproduce?
Simple demo of the different toggle buttons, where you can test keyboard focus behavior alongside other widgets:
http://plnkr.co/edit/uLky5EnpTukImH7yMZOO?p=preview
What is the use-case or motivation for changing an existing behavior?
I'm not sure if focus behaviors are specified by Material for toggle buttons. Without guidance to the contrary, I would assume that focus indication for toggles is appropriate and would be similar to md-buttons. A lack of focus indication is a poor experience.
Which versions of Angular, Material, OS, browsers are affected?
All browsers.
Is there anything else we should know?
Unlike action buttons, toggle buttons may need to indicate 1) toggle state, 2) focus, 3) active state, and 4) hover state, all with background color changes. My project has decided to represent toggle and focus using shading levels, where toggle+focus gets a double shade, just toggle and just focus are identical (for better and for worse), and active and hover override toggle/focus and use a different color. I don't know what'd be appropriate for the Material library default. I can't implement a custom focus style correctly without md-button-focus support. (The library could implement md-button-focus without taking a position on styling. :) )
The text was updated successfully, but these errors were encountered: