fix(material/button-toggle): fix ChromeVox focus issue on button toggle (#21046)

* fix(material/button-toggle): fix ChromeVox focus issue on button toggle

* fix(cdk/a11y): change focus trap to find focusable child element if cdkFocusInitial element isn't focusable

Author: annieyw

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -130,7 +130,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then either focuses the first element that the
    * user specified, or the first tabbable element.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusInitialElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -142,7 +142,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then focuses
    * the first tabbable element within the focus trap region.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusFirstTabbableElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -154,7 +154,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then focuses
    * the last tabbable element within the focus trap region.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusLastTabbableElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -195,7 +195,7 @@ export class FocusTrap {
 
   /**
    * Focuses the element that should be focused when the focus trap is initialized.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusInitialElement(): boolean {
     // Contains the deprecated version of selector, for temporary backwards comparability.
@@ -217,6 +217,12 @@ export class FocusTrap {
         console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);
       }
 
+      if (!this._checker.isFocusable(redirectToElement)) {
+        const focusableChild = this._getFirstTabbableElement(redirectToElement) as HTMLElement;
+        focusableChild?.focus();
+        return !!focusableChild;
+      }
+
       redirectToElement.focus();
       return true;
     }
@@ -226,7 +232,7 @@ export class FocusTrap {
 
   /**
    * Focuses the first tabbable element within the focus trap region.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusFirstTabbableElement(): boolean {
     const redirectToElement = this._getRegionBoundary('start');
@@ -240,7 +246,7 @@ export class FocusTrap {
 
   /**
    * Focuses the last tabbable element within the focus trap region.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusLastTabbableElement(): boolean {
     const redirectToElement = this._getRegionBoundary('end');
@@ -253,7 +259,7 @@ export class FocusTrap {
   }
 
   /**
-   * Checks whether the focus trap has successfuly been attached.
+   * Checks whether the focus trap has successfully been attached.
    */
   hasAttached(): boolean {
     return this._hasAttached;
@@ -396,7 +402,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
   set enabled(value: boolean) { this.focusTrap.enabled = coerceBooleanProperty(value); }
 
   /**
-   * Whether the directive should automatially move focus into the trapped region upon
+   * Whether the directive should automatically move focus into the trapped region upon
    * initialization and return focus to the previous activeElement upon destruction.
    */
   @Input('cdkTrapFocusAutoCapture')

src/material/button-toggle/button-toggle.spec.ts

@@ -800,13 +800,13 @@ describe('MatButtonToggle without forms', () => {
       expect(button.getAttribute('tabindex')).toBe('3');
     });
 
-    it('should clear the tabindex from the host element', () => {
+    it('should have role "presentation"', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
       fixture.detectChanges();
 
       const host = fixture.nativeElement.querySelector('.mat-button-toggle');
 
-      expect(host.getAttribute('tabindex')).toBe('-1');
+      expect(host.getAttribute('role')).toBe('presentation');
     });
 
     it('should forward focus to the underlying button when the host is focused', () => {

src/material/button-toggle/button-toggle.ts

@@ -399,14 +399,12 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
     '[class.mat-button-toggle-disabled]': 'disabled',
     '[class.mat-button-toggle-appearance-standard]': 'appearance === "standard"',
     'class': 'mat-button-toggle',
-    // Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`,
-    // but can still receive focus from things like cdkFocusInitial.
-    '[attr.tabindex]': '-1',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.id]': 'id',
     '[attr.name]': 'null',
     '(focus)': 'focus()',
+    'role': 'presentation',
   }
 })
 export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit, AfterViewInit,