chore(chips): remove unnecessary tabindex logic

PiperOrigin-RevId: 540977179

Author: asyncliz

chips/lib/input-chip.ts

@@ -106,6 +106,7 @@ export class InputChip extends MultiActionChip {
     return renderRemoveButton({
       ariaLabel: this.ariaLabelRemove,
       disabled: this.disabled,
+      tabbable: this.removeOnly,
     });
   }
 }

chips/lib/multi-action-chip.ts

@@ -45,8 +45,6 @@ export abstract class MultiActionChip extends Chip {
   constructor() {
     super();
     if (!isServer) {
-      this.addEventListener('focusin', this.updateTabIndices.bind(this));
-      this.addEventListener('focusout', this.updateTabIndices.bind(this));
       this.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
   }
@@ -60,10 +58,6 @@ export abstract class MultiActionChip extends Chip {
     super.focus(options);
   }
 
-  protected override firstUpdated() {
-    this.updateTabIndices();
-  }
-
   protected override renderActions() {
     return html`
       ${super.renderActions()}
@@ -103,25 +97,5 @@ export abstract class MultiActionChip extends Chip {
     event.stopPropagation();
     const actionToFocus = forwards ? this.trailingAction : this.primaryAction;
     actionToFocus.focus();
-    this.updateTabIndices();
-  }
-
-  private updateTabIndices() {
-    const {primaryAction, trailingAction} = this;
-    if (!primaryAction || !trailingAction) {
-      // Does not have multiple actions.
-      primaryAction?.removeAttribute('tabindex');
-      trailingAction?.removeAttribute('tabindex');
-      return;
-    }
-
-    if (trailingAction.matches(':focus-within')) {
-      trailingAction.removeAttribute('tabindex');
-      primaryAction.tabIndex = -1;
-      return;
-    }
-
-    primaryAction.removeAttribute('tabindex');
-    trailingAction.tabIndex = -1;
   }
 }

chips/lib/trailing-icons.ts

@@ -7,22 +7,24 @@
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
-import {html} from 'lit';
+import {html, nothing} from 'lit';
 
 import {Chip} from './chip.js';
 
 interface RemoveButtonProperties {
   ariaLabel: string;
   disabled: boolean;
+  tabbable?: boolean;
 }
 
 /** @protected */
 export function renderRemoveButton(
-    {ariaLabel, disabled}: RemoveButtonProperties) {
+    {ariaLabel, disabled, tabbable = false}: RemoveButtonProperties) {
   return html`
     <button class="trailing action"
       aria-label=${ariaLabel}
       ?disabled=${disabled}
+      tabindex=${!tabbable ? -1 : nothing}
       @click=${handleRemoveClick}
     >
       <md-focus-ring></md-focus-ring>