fix(option): Remove aria-selected='false' in single-selection mode

[vanessanschmitt]

Add an Input to optionally remove the aria-selected attribute from unselected options.
The default behavior is unchanged. Motivation: the screen reader NVDA announces 'not selected'
on any element that has aria-selected='false', which is disruptive when a user is navigating
through a long list of options. The W3 aria best practices example only uses aria-selected='true',
false is implicit:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

[stevenyxu]

Worth adding that aria-selected=false has some precedent for being used in multiple select cases https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/listbox/listbox.html. If Angular Material team agrees, I'd suggest omitting aria-selected=false on single select and include it on multiple. This only affects MatSelect; the same change would need to be done in other components that use MatOption directly.

[crisbeto]

Agreed with @stevenyxu that we should omit the aria-selected in single-selection mode, rather than introduce another option. Note that mat-autocomplete also uses mat-option, but the same change should apply there.

Also cc @jelbourn

[jelbourn]

I also agree that we should just do this by default based on the single selection vs. multi-selection distinction. That would avoid adding the new API surface to the component.

[stevenyxu]

Making sure MatSelect and MatAutocomplete work as expected as part of this change seems sensible, and I think everyone has agreed on the single vs. multiple differentiation. As for opening a new input on MatOption, it's not clear to me there's a way around this. MatOption maintains its own selected state and for it to bind its own aria-selected attribute is more coherent than e.g., exposing an API to set the attribute to MatSelect/MatAutcomplete.

Is there an alternative that allows MatOption to omit aria-selected=false in single MatSelect case and have it in multiple MatSelect without adding to the API?

The only potential suggestion I had, though I don't feel strongly, is to make it a positive or enum API rather than a negative one like "disableAriaSelectedExplicitFalse", so more like

@Input() ariaSelectedMode: 'never'|'expanded'|'always' = 'always';

I considered suggesting an internal API, but there is a preference to make it public since our use case involves MatOption on its own, without MatSelect.

[crisbeto]

The MatOption has a _parent property that has some info like whether the parent component is in multi-selection mode. That should be enough information to determine whether or not to add the attribute.

[vanessanschmitt]

Thanks for the suggestions, everyone! I'll investigate if having our component implement MatOptionParentComponent will allow us to just rely on the single vs. multiple distinction in the option without exposing an Input.

[vanessanschmitt]

Using the single vs. multiple info provided in the _parent should work for our use case! I updated the commit accordingly.

[jelbourn]

Looks good, just a few small comments

[vanessanschmitt]

Just commenting to note that I made the requested changes.

[jelbourn]

LGTM

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