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

Author: annieyw

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,