Skip to content

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

Closed

Description

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions