fix(material/chips): remove tab-index attribute from mat-chip host (#29436)

* fix(material/chips): added role presentation to mat-chip host

added role presentation to mat-chip host so that mobile SR users do not have to
double swipe to traverse chip

fixes b/286286473

* fix(material/chips): add aria-hidden

add aria-hidden to host mat-chip so Talkback ignores element

fixes b/286286473

* fix(material/chips): remove tabindex

remove tabindex

fixes b/286286473

* fix(material/chips): update api signature

update api signature

fixes b/286286473

* fix(material/chips): fix lint issue

fix lint issue

fixes b/286286473

* fix(material/chips): remove aria hidden

remove aria hidden

fixes b/286286473

(cherry picked from commit 5403b2b)

Author: DBowen33

src/material/chips/chip-option.html

@@ -3,7 +3,6 @@
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
   <button
     matChipAction
-    [tabIndex]="tabIndex"
     [_allowFocusWhenDisabled]="true"
     [attr.aria-selected]="ariaSelected"
     [attr.aria-label]="ariaLabel"

src/material/chips/chip-row.html

@@ -4,7 +4,6 @@
 
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
-    [tabIndex]="tabIndex"
     [disabled]="disabled"
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId">

src/material/chips/chip-row.ts

@@ -125,7 +125,6 @@ export class MatChipRow extends MatChip implements AfterViewInit {
       _document,
       animationMode,
       globalRippleOptions,
-      tabIndex,
     );
 
     this.role = 'row';

src/material/chips/chip.ts

@@ -13,7 +13,6 @@ import {
   ANIMATION_MODULE_TYPE,
   AfterContentInit,
   AfterViewInit,
-  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -36,7 +35,6 @@ import {
   afterNextRender,
   booleanAttribute,
   inject,
-  numberAttribute,
 } from '@angular/core';
 import {
   MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -85,7 +83,6 @@ export interface MatChipEvent {
     '[class._mat-animation-noopable]': '_animationsDisabled',
     '[id]': 'id',
     '[attr.role]': 'role',
-    '[attr.tabindex]': '_getTabIndex()',
     '[attr.aria-label]': 'ariaLabel',
     '(keydown)': '_handleKeydown($event)',
   },
@@ -201,12 +198,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   @Input({transform: booleanAttribute})
   disabled: boolean = false;
 
-  /** Tab index of the chip. */
-  @Input({
-    transform: (value: unknown) => (value == null ? undefined : numberAttribute(value)),
-  })
-  tabIndex: number = -1;
-
   /** Emitted when a chip is to be removed. */
   @Output() readonly removed: EventEmitter<MatChipEvent> = new EventEmitter<MatChipEvent>();
 
@@ -258,13 +249,9 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     @Optional()
     @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
     private _globalRippleOptions?: RippleGlobalOptions,
-    @Attribute('tabindex') tabIndex?: string,
   ) {
     this._document = _document;
     this._animationsDisabled = animationMode === 'NoopAnimations';
-    if (tabIndex != null) {
-      this.tabIndex = parseInt(tabIndex) ?? -1;
-    }
     this._monitorFocus();
 
     this._rippleLoader?.configureRipple(this._elementRef.nativeElement, {
@@ -396,14 +383,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     // Empty here, but is overwritten in child classes.
   }
 
-  /** Gets the tabindex of the chip. */
-  _getTabIndex() {
-    if (!this.role) {
-      return null;
-    }
-    return this.disabled ? -1 : this.tabIndex;
-  }
-
   /** Starts the focus monitoring process on the chip. */
   private _monitorFocus() {
     this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {

tools/public_api_guard/material/chips.md

@@ -55,7 +55,7 @@ export const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;
 
 // @public
 export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
-    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined);
     protected _allLeadingIcons: QueryList<MatChipAvatar>;
     protected _allRemoveIcons: QueryList<MatChipRemove>;
     protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
@@ -77,7 +77,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     focus(): void;
     _getActions(): MatChipAction[];
     _getSourceAction(target: Node): MatChipAction | undefined;
-    _getTabIndex(): number | null;
     _handleKeydown(event: KeyboardEvent): void;
     _handlePrimaryActionInteraction(): void;
     // (undocumented)
@@ -99,8 +98,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     // (undocumented)
     static ngAcceptInputType_removable: unknown;
     // (undocumented)
-    static ngAcceptInputType_tabIndex: unknown;
-    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngAfterViewInit(): void;
@@ -124,16 +121,15 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     set ripple(v: MatRipple);
     _rippleLoader: MatRippleLoader;
     role: string | null;
-    tabIndex: number;
     trailingIcon: MatChipTrailingIcon;
     get value(): any;
     set value(value: any);
     // (undocumented)
     protected _value: any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
 }
 
 // @public