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

Remove the tabindex attribute from MatOption. MatOption will no longer
set a tabindex. Tabindex is not needed since focus is managed on the
parent by setting `aria-activedescendant`.

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.

Author: zarend

src/material/core/option/option.ts

@@ -205,7 +205,7 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
   }
 
   /** Returns the correct tabindex for the option depending on disabled state. */
-  _getTabIndex(): string {
+  _getTabIndex(): string | null {
     return this.disabled ? '-1' : '0';
   }
 
@@ -286,6 +286,10 @@ export class MatOption<T = any> extends _MatOptionBase<T> {
   ) {
     super(element, changeDetectorRef, parent, group);
   }
+
+  override _getTabIndex(): string | null {
+    return null;
+  }
 }
 
 /**

src/material/select/select.spec.ts

@@ -824,17 +824,25 @@ describe('MDC-based MatSelect', () => {
               'mat-option',
             ) as NodeListOf<HTMLElement>;
 
-            options[3].focus();
+            select.focus();
+            multiFixture.detectChanges();
+
             expect(document.activeElement)
-              .withContext('Expected fourth option to be focused.')
-              .toBe(options[3]);
+              .withContext('Expected select to have DOM focus')
+              .toBe(select);
+            expect(select.getAttribute('aria-activedescendant'))
+              .withContext('Expected the first option to be activated.')
+              .toBe(options[0].id);
 
             multiFixture.componentInstance.control.setValue(['steak-0', 'sushi-7']);
             multiFixture.detectChanges();
 
             expect(document.activeElement)
-              .withContext('Expected fourth option to remain focused.')
-              .toBe(options[3]);
+              .withContext('Expected select to have DOM focus')
+              .toBe(select);
+            expect(select.getAttribute('aria-activedescendant'))
+              .withContext('Expected first option to remain activated.')
+              .toBe(options[0].id);
           }),
         );
 
@@ -1260,10 +1268,10 @@ describe('MDC-based MatSelect', () => {
             .toBe(true);
         }));
 
-        it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
-          expect(options[0].getAttribute('tabindex')).toEqual('0');
-          expect(options[1].getAttribute('tabindex')).toEqual('0');
-          expect(options[2].getAttribute('tabindex')).toEqual('-1');
+        it('should omit the tabindex attribute on each option', fakeAsync(() => {
+          expect(options[0].hasAttribute('tabindex')).toBeFalse();
+          expect(options[1].hasAttribute('tabindex')).toBeFalse();
+          expect(options[2].hasAttribute('tabindex')).toBeFalse();
         }));
 
         it('should set aria-disabled for disabled options', fakeAsync(() => {

tools/public_api_guard/material/core.md

@@ -281,7 +281,6 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     _getHostElement(): HTMLElement;
     getLabel(): string;
-    _getTabIndex(): string;
     // (undocumented)
     readonly group: _MatOptgroupBase;
     _handleKeydown(event: KeyboardEvent): void;