fix(material/core): remove tabindex from mat-option

[zarend]

Remove the tabindex attribute added to MatOption components. MatOption does not need tabindex because the parent component manages focus by setting aria-activedescendant attribute. Previously, MatOption set tabindex but was also a referenced by aria-activedescendant. This was not the correct ARIA semantics. Align closer to ARIA spec by using only aria-activedescendant rather than both.

Tabindex="-1" seems to be causing a problem in #26861 where VoiceOver with Firefox moves DOM focus from the combobox to the option when opening the listbox popup.

Unblocks #26861.

[github-actions]

Deployed dev-app for a398e06 to: https://ng-dev-previews-comp--pr-angular-components-26917-te8fy1tr.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

[zarend]

Since this was last reviewed, I moved _getTabIndex back to MatOptionBase. That's where the method originally was. Moving that method caused the typescript types to break for some situations. That's because some members expect a MatOption and adding a _getTabIndex method to LegacyMatOption makes it no longer type compatible with MatOption.

[nspire909]

How was this not considered a breaking change? By removing the tabindex from the MatOption component, you make it not focusable. So $event.relatedTarget in the focusout event will always be null, no mater where on the screen you click. With the tabindex attribute on the MatOption, $event.relatedTarget will be set to one of the MatOption elements if you click inside the dropdown and null if you click outside. I am not sure how you are supposed to tell if you clicked inside or outside of the dropdown without this. Either way I can fix it by manually adding the tabindex, but I feel this should have been considered a breaking change and not pushed out in a patch release.

[zarend]

Hello @nspire909 ,

MatOption is intended to be used with the aria-activedescendant pattern. The parent element always has browser focus and it references the active option with aria-activedescendant.

It's a bit fuzzy sometimes, but generally the attributes that that components render are not considered part of the public API, so changing them is generally not considered a breaking change. I hope this change was not a significant inconvenience.

I am not sure how you are supposed to tell if you clicked inside or outside of the dropdown without this

I was wondering if you could help us understand what you needs are. What are you trying to accomplish by detecting if clicks are inside or outside the dropdown?

-Zach

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