Skip to content
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

Focus styling and hiding for mat-button-toggle #3014

Closed
dansanderson opened this issue Feb 9, 2017 · 1 comment · Fixed by #3119
Closed

Focus styling and hiding for mat-button-toggle #3014

dansanderson opened this issue Feb 9, 2017 · 1 comment · Fixed by #3119
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

Comments

@dansanderson
Copy link

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. :) )

@kara kara added 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 labels Feb 10, 2017
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants