fix(list): labels not being set for mat-selection-list

[crisbeto]

Currently when the user's focus lands on a mat-selection-list, screen readers will read out only "List", unless the consumer set an aria-label explicitly. These changes automatically set an aria-labelledby to the list's header, unless the consumer set a custom aria-label or aria-labelledby.

[crisbeto]

We've had that header in there since we introduced the component, these changes set up the automatic labelling so it gets picked up correctly. I couldn't see anything about labels not being allowed inside listboxes in the docs. They also have a similar example with a listbox that has aria-labelledby, although their label is on the outside.

[jelbourn]

Even if the spec doesn't prohibit it, JAWS is usually super picky about composite role structure. I wouldn't want to make automated labeling based on something that might break in some readers.

[crisbeto]

I'm not sure this makes much of a difference for the DOM structure though. Currently in master it looks like this:

<mat-selection-list role="listbox" tabindex="0">
  <h3 mat-subheader>Header</h3>
  <mat-list-option role="option" tabindex="-1"></mat-list-option>
</mat-selection-list>

And now it'll change to this:

<mat-selection-list role="listbox" tabindex="0" arial-labelledby="header-0">
  <h3 mat-subheader id="header-0">Header</h3>
  <mat-list-option role="option" tabindex="-1"></mat-list-option>
</mat-selection-list>

Either way the header will be in there and focus will stop on the listbox, except now at least the header will be read out. We could also try it out and see if it's an issue in JAWS. I've tried it with NVDA and it worked.

[jelbourn]

I suspect the right thing to do is to remove all examples / documentation / tests that put a header inside of a listbox and expand the "Accessibility" section of the docs to explain the expected structure.

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[mmalerba]

Closing since this fix is for the legacy mat-list which has been superseded by the MDC based one.

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