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

feat(MatSelect): Active state should take into account keyboard versus mouse interaction #23953

Open
elenachiosa opened this issue Nov 11, 2021 · 4 comments
Labels
area: material/select feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions

Comments

@elenachiosa
Copy link

elenachiosa commented Nov 11, 2021

Feature Description

Hello,
We would like to fully implement accessibility in terms of good color contrast and visible focus states (WCAG Focus Visible).
What we use right now to achieve this is the ":focus-visible" selector. We also use FocusMonitor from the A11yModule of CDK to create accessible keyboard interaction. FocusMonitor has a neat feature - it adds classes specific to the interaction type that the user uses (e.g. on keyboard interaction, the currently focused item has the ".cdk-keyboard-focus" class).

What I'd suggest as an improvement to the Select component is to have this difference illustrated in the component, out of the box. At the moment we are styling the ".mat-active" class in order to have a visible focus state for keyboard users but this looks very odd for mouse users.

Use Case

Currently, the Select component looks exactly the same for both mouse and keyboard interaction.
Stackblitz link with current behavior: https://stackblitz.com/edit/angular-7779kz?file=src%2Fapp%2Fselect-overview-example.html

What we would like to see in the future is the following:
Keyboard interaction with visible outline:
image
Mouse interaction:
image

@elenachiosa elenachiosa added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Nov 11, 2021
@crisbeto
Copy link
Member

It works like this because focus isn't actually on the mat-option, it's on the select's trigger. We use aria-activedescendant to manage focus.

@crisbeto crisbeto added area: material/select P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels Nov 17, 2021
@angular-robot
Copy link
Contributor

angular-robot bot commented Mar 14, 2022

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

@angular-robot
Copy link
Contributor

angular-robot bot commented Apr 3, 2022

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

@iKrishnaSahu
Copy link

iKrishnaSahu commented Nov 1, 2022

Any update on this feature?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/select feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

4 participants