MatSelect accessibility rework

[jelbourn]

This issue tracks rework of the MatSelect component to resolve multiple accessibility issues. Based on this prototype (just the a11y behavior and API, not the visuals)

Summary:

• New template-based syntax for options driven by data instead of ngFor (the existing syntax will remain for backwards compatibility for at least two major versions)
• Option text will always be in the DOM, but not the option templates
• Interaction changes from listbox to combobox

This should capture issues reported in #5220, #10292, #6382, #3587, #1670

[jasonzhang2022]

mat-paginator uses mat-select for the number of items of per page. So mat-paginator can't be used by VoiceOver, too.

[cec]

@jelbourn I hope I'm not wrong, but mat-select is used by mat-autocomplete as well right?

If so, will this rework would add the possibility for paginated autocomplete suggestions as discussed in #5046 ?

Thank you!

[jelbourn]

They're separate components but do share some code; that feature looks to be orthogonal to this.

[cec]

Hi @jelbourn , please pardon my ignorance, by orthogonal do you mean unrelated to this rework?

[jelbourn]

Yeah, I mean this rework doesn't affect that feature one way or another.

[JamieMcI]

Are there any known workarounds to this issue while waiting on the rework? I'm thinking of trying to style an HTML Select to look similar with a floating label, etc.

[jelbourn]

Using a native select will certainly give better a11y.

[benelliott]

@jelbourn Do you think there would be any value in moving the core and accessibility logic of MatSelect into a new CdkSelect component, so that MatSelect only provides the Material-specific styling on top of this? Creating a component that is functionally equivalent to native select is not at all trivial so it could be a very useful resource for people who want to make custom comboboxes without using Material Design.

[jelbourn]

@benelliott It's something I'd like to do; we're still figuring out what we want the final API to look like. Once that's settled, we can figure out which parts make sense to be in the cdk.

[jrood]

@jelbourn If these discussions about the API need to remain internal, that's cool. Otherwise I'd be happy to contribute if you can point me to a particular thread.

[kammokiran]

Hi, I have an application where the mat-select has been used. It works fine with keyboard and the screen reader (jaws 17 and 18). I am able to select an option inside the select box. However once I come out of the select box, Jaws doesn't announce the selected value. Please could you suggest a solution for this issue.

[kammokiran]

https://material.angular.io/components/select/overview

[412andrewmortimer]

For what it's worth:

I arrived here after our A11y scanner library threw this error in e2e.

Fail:  aXe - Certain ARIA roles must contain particular children

<mat-select OMITTED...>

    https://dequeuniversity.com/rules/axe/3.4/aria-required-children?application=webdriverjs

And let's just say hopping around these issues has been confusing. But simply putting role="listbox" on my <mat-select> and role="option" on my <mat-option> fixed my error.

<!-- Like this -->
<mat-select role="listbox">
  <mat-option role="option"></mat-option>
</mat-select>

Am I not understanding something about the bigger picture or how A11y works in general?

[Splaktar]

@412andrewmortimer that might trick the scanner, but to verify if that helped or hurt (possible), you would need to test your app with screen readers like JAWS/NVDA (Windows), ChromeVox (ChromeOS), Talkback (Android), and VoiceOver (macOS/iOS).

[Splaktar]

Some updates for my previous mdc-select mentions

• In 4.0.0, material-components-web removed support for native select. The previously named "Enhanced" select is now the only option.
• That same update broke a number of form-related use cases because it also removed the hidden input element. There is a PR ([MDCSelect] Add hidden input element to support HTML forms material-components/material-components-web#5428) to bring this back, but when it will be merged is unclear.
• This 4.0.0 update is supposed to have improved the a11y and functionality of mdc-select, but I have not yet tested this in a screen reader.

There has been some thinking about the MDC-related mat-select in our material-experiemental package, but there is no implementation ready to try yet and no ETA is available. You can watch our material-experimental/mdc-select directory or the section after "Contributing" in the README for updated plans each quarter.

[Splaktar]

Hi is there any chance this bug will get fixed soon? :) Please and thank you.

Based on #11083 (comment), it's unlikely.

Is there a workaround?

Not at this time. The new MDC-based version of MatSelect should help with this, but it hasn't been implemented yet.

[angular-automatic-lock-bot]

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.}