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

[jasonzhang2022]

Any update on this one?

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

[tinayuangao]

We decided to keep the current API while improve the accessibility. I will send out a PR soon

[jrood]

Thanks @tinayuangao ! Do you know if the a11y changes are such that https://github.com/angular/material2/pull/7835 should be kept on hold, or if keeping the current API means that https://github.com/angular/material2/pull/7835 can be merged?

[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

[divyaadurai]

I am still facing the issue on reading mat-option text while doing up-arrow/down-arrow with JAWS 2018.1807.8

• Browsers which doesn't support are chrome 68, Edge 42, Firefox 61.0.1.
• Supported browser IE 11.1 (reading properly the text in mat-option)
  Windows Version 1803

Is there any fix for this issue available ?
@kammokiran: Is the option text is reading properly. Any suggestions on updating browser versions or anything else ?

[kammokiran]

@divyaadurai, try using alt key + the down arrow key first, then press the down and up arrow keys to browse through the options inside the drop down. I do not encounter issues while browsing the options, I just press either the space or enter key to get into the drop down and use the arrow keys there on.

[Splaktar]

Adding my findings to this as well. The mat-select Examples page scores a 66 out of 100 on the Lighthouse audit.

This is due to the problem mentioned above where the role="option" elements are not in the DOM until the dropdown panel is opened. This isn't valid according to Axe and the WAI-ARIA 1.0 Listbox Spec.

This issue means that the code generated by the addressForm and table Schematics will fail a11y audits by default. https://github.com/angular/material2/issues/10726 directly references how this is a problem for the Table.

[papavlic]

Any update on a resolution for these issues? Are there any known workarounds for the time being until this is resolved?

[jrood]

@papavlic I'm not sure if this resolves your need, but in version 7 you can use a native select.

[papavlic]

Unfortunately we are somewhat heavily invested in mat-select and some features that come with it. Switching to native select would force us to do some major refactoring so we were just wondering when (if) this issue would get resolved as it would be great to have these accessibility features built in.

[jelbourn]

@crisbeto has been looking into it. The initial attempt at fixing this broke a huge number of unit tests inside Google, so we're trying another approach that will be more opt-in.

[papavlic]

@crisbeto do you have a general ETA for when this would land? Just wondering if its something that could be solved in a few months or is it a 6 months+ timeframe?

[kammokiran]

Hi, I have used Aria label for The select element to include the existing label plus the currently selected option. For example if the label off the select box is ‘State‘, and if I have selected the option as ‘Karnataka‘, the aria label should be updated as ‘State Karnataka‘.

Sent from my iPhone

On 16-Aug-2018, at 12:33 PM, divyaadurai [e-mail] wrote:

I am still facing the issue on reading mat-option text while doing up-arrow/down-arrow with JAWS 2018.1807.8

Browsers which doesn't support are chrome 68, Edge 42, Firefox 61.0.1.
Supported browser IE 11.1 (reading properly the text in mat-option)
Windows Version 1803
Is there any fix for this issue available ?
@kammokiran: Is the option text is reading properly. Any suggestions on updating browser versions or anything else ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[boriskozak]

@crisbeto @jelbourn do you happen to have an update?

[Splaktar]

@boriskozak the only update is that this got looked at again in December and January via a new PR (https://github.com/angular/components/pull/14430) with a different approach. It doesn't look like it will make it into version 8.0.0. Beyond that I'm not sure, but I wouldn't expect it before July at this point and it could be later than that.

[zuhairmahd]

Sorry to hear this won't make it into 8. I'm hoping we would see a resolution sometime soon.

[numsu]

Just dropping a comment that we're also waiting for this. It's soon legally required to comply with WCAG standard a11y in our projects and we're also invested in using mat-select, would feel bad to fallback to native. It's the only component still failing.

[jelbourn]

We're now planning to address the issues as part of integrating the MDC Web components into Angular Material. The earlier attempts at fixing this were all just too much of a breaking change, such that it was impossible to roll out to applications in Google already using MatSelect.

[igoro1975]

Until the bug is fixed what are the other options to replace the control? Native is not approved by the business: "looks bad".
Thank you.

[Splaktar]

@igoro1975 you could possibly look at using directly or wrapping mdc-select. There are some accessibility tips in the MDC Select Docs.

[Splaktar]

Note that using the "Enhanced" (with Material Design popup panel) mdc-select version as a workaround for a11y issues, might not work. It uses the WAI-ARIA 1.1 Collapsible Dropdown Listbox Example which has some issues with VoiceOver and NVDA. They are working on addressing this for WAI-ARIA 1.2, but it could be years before screen readers have solid support for 1.2.

Another option is the mdc-select__native-control (with a native popup panel), but you can already get similar functionality from a mat-form-field that contains a native select. Our docs have many examples of this. This still gets you a Material Design form element, but the popup will be native (i.e. better a11y and better UX on iOS/Android).

Hopefully MDC Select gets some a11y improvements over the next few months, before material-experimental has an mdc-select implementation.

[zunaid2998]

Is there any fix yet on this issue ?

[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?

[leomendoza123]

Is there any plan to solve this issue soon?

[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 (https://github.com/material-components/material-components-web/issues/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.

[dorival]

I have an a11y issue related to JAWS 2019.1 and MatInput.

Behaviour: Multiple MatInputs in the form causes JAWS to speak the previous MatInput value as it jumps to the next MatInput field.

@Splaktar should I create a different issue, or do you prefer tracking it in here? I need a north so I can contribute towards the fix of this issue in particular.

[Splaktar]

@dorival please open a new issue for MatInput. Thank you.

[mkslalom]

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

Is there a workaround?

[Splaktar]

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

Based on https://github.com/angular/components/issues/11083#issuecomment-506541838, 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.

[Josee9988]

When we will be able to use it without that accessibility issue?

[angular-automatic-lock-bot[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._}