fix(button-toggle): able to focus disabled button via click

Along the same lines as #15499. Fixes users being able to focus a disabled button toggle by clicking on it. The issue comes from us preserving the -1 tabindex, even if the button is disabled.

Author: crisbeto

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

@@ -746,7 +746,7 @@ describe('MatButtonToggle without forms', () => {
       expect(button.getAttribute('tabindex')).toBe('3');
     });
 
-    it('should clear the tabindex from the host element', () => {
+    it('should set the tabindex on the host element to -1', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
       fixture.detectChanges();
 
@@ -755,6 +755,20 @@ describe('MatButtonToggle without forms', () => {
       expect(host.getAttribute('tabindex')).toBe('-1');
     });
 
+    it('should clear the tabindex from the host node when disabled', () => {
+      const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
+      fixture.detectChanges();
+
+      const host = fixture.nativeElement.querySelector('.mat-button-toggle');
+
+      expect(host.getAttribute('tabindex')).toBeTruthy();
+
+      fixture.componentInstance.disabled = true;
+      fixture.detectChanges();
+
+      expect(host.hasAttribute('tabindex')).toBe(false);
+    });
+
     it('should forward focus to the underlying button when the host is focused', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
       fixture.detectChanges();
@@ -947,7 +961,9 @@ class RepeatedButtonTogglesWithPreselectedValue {
 
 
 @Component({
-  template: `<mat-button-toggle tabindex="3"></mat-button-toggle>`
+  template: `<mat-button-toggle tabindex="3" [disabled]="disabled"></mat-button-toggle>`
 })
-class ButtonToggleWithTabindex {}
+class ButtonToggleWithTabindex {
+  disabled = false;
+}
 

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

@@ -370,7 +370,7 @@ export const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonT
     '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.tabindex]': 'disabled ? null : -1',
     '[attr.id]': 'id',
     '(focus)': 'focus()',
   }