Skip to content

fix(material/select): NVDA reading out table when opening select on Chrome #21492

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

fix(material/select): NVDA reading out table when opening select on Chrome #21492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/material-experimental/mdc-select/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<!--
Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
Note 1: that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
While aria-owns is not required for the ARIA 1.2 `role="combobox"` interaction pattern,
it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents
VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
Using `aria-owns` re-parents the select overlay so that it works again.
See https://github.com/angular/components/issues/20694

Note 2: we set `role="presentation"`, because the trigger has some CSS that sets it to
`display: inline-table` which causes it to be read out as a table by NVDA on Chrome (see #21480).
-->
<div cdk-overlay-origin
[attr.aria-owns]="panelOpen ? id + '-panel' : null"
role="presentation"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crisbeto It seems axe is not happy that this has both role=presentation and aria-owns

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have the option of excluding it? I don't get the error when running the axe extension locally so it's either an old version or an option that people have to opt into. The alternative would be to remove the display: inline-table from the CSS, but I suspect that'll cause a bunch of screenshot diff failures instead.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the rule that's triggered: https://dequeuniversity.com/rules/axe/4.1/presentation-role-conflict. It's listed as a minor thing, so I'm guessing maybe the app has stricter rules enabled than we do

class="mat-mdc-select-trigger"
(click)="toggle()"
#fallbackOverlayOrigin="cdkOverlayOrigin"
Expand Down
5 changes: 5 additions & 0 deletions src/material-experimental/mdc-select/select.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@ describe('MDC-based MatSelect', () => {
expect(ariaOwns).toBe(document.querySelector('.mat-mdc-select-panel')!.id);
}));

it('should set the trigger as `role="presentation"`', fakeAsync(() => {
const trigger = select.querySelector('.mat-mdc-select-trigger')!;
expect(trigger.getAttribute('role')).toBe('presentation');
}));

it('should set aria-expanded based on the select open state', fakeAsync(() => {
expect(select.getAttribute('aria-expanded')).toBe('false');

Expand Down
6 changes: 5 additions & 1 deletion src/material/select/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<!--
Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
Note 1: that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
While aria-owns is not required for the ARIA 1.2 `role="combobox"` interaction pattern,
it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents
VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
Using `aria-owns` re-parents the select overlay so that it works again.
See https://github.com/angular/components/issues/20694

Note 2: we set `role="presentation"`, because the trigger has some CSS that sets it to
`display: inline-table` which causes it to be read out as a table by NVDA on Chrome (see #21480).
-->
<div cdk-overlay-origin
[attr.aria-owns]="panelOpen ? id + '-panel' : null"
role="presentation"
class="mat-select-trigger"
(click)="toggle()"
#origin="cdkOverlayOrigin"
Expand Down
5 changes: 5 additions & 0 deletions src/material/select/select.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,11 @@ describe('MatSelect', () => {
expect(ariaOwns).toBe(document.querySelector('.mat-select-panel')!.id);
}));

it('should set the trigger as `role="presentation"`', fakeAsync(() => {
const trigger = select.querySelector('.mat-select-trigger')!;
expect(trigger.getAttribute('role')).toBe('presentation');
}));

it('should set aria-expanded based on the select open state', fakeAsync(() => {
expect(select.getAttribute('aria-expanded')).toBe('false');

Expand Down