fix(button-toggle): not forwarding focus to underlying control (#14001)

Fixes the button toggle host element not being able to receive focus which means that it can't be used with the focus trap directives. Also fixes that when it does receive focus, it won't forward it to the underlying `button` element.

Author: crisbeto

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

@@ -723,7 +723,21 @@ describe('MatButtonToggle without forms', () => {
 
       const host = fixture.nativeElement.querySelector('.mat-button-toggle');
 
-      expect(host.hasAttribute('tabindex')).toBe(false);
+      expect(host.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('should forward focus to the underlying button when the host is focused', () => {
+      const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
+      fixture.detectChanges();
+
+      const host = fixture.nativeElement.querySelector('.mat-button-toggle');
+      const button = host.querySelector('button');
+
+      expect(document.activeElement).not.toBe(button);
+
+      host.focus();
+
+      expect(document.activeElement).toBe(button);
     });
   });
 

src/lib/button-toggle/button-toggle.ts

@@ -365,9 +365,11 @@ export const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonT
     '[class.mat-button-toggle-disabled]': 'disabled',
     '[class.mat-button-toggle-appearance-standard]': 'appearance === "standard"',
     'class': 'mat-button-toggle',
-    // Clear out the native tabindex here since we forward it to the underlying button
-    '[attr.tabindex]': 'null',
+    // 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.id]': 'id',
+    '(focus)': 'focus()',
   }
 })
 export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit,