chore: update components to use mixinFocusable

PiperOrigin-RevId: 576982507
material-components · Oct 26, 2023 · f5daadc · f5daadc
1 parent f94de5d
commit f5daadc
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 69 deletions.
diff --git a/chips/internal/chip-set.ts b/chips/internal/chip-set.ts
@@ -8,8 +8,8 @@ import {html, isServer, LitElement} from 'lit';
 import {queryAssignedElements} from 'lit/decorators.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 
 import {Chip} from './chip.js';
@@ -19,7 +19,7 @@ import {Chip} from './chip.js';
  */
 export class ChipSet extends LitElement {
   static {
-    setupHostAria(ChipSet, {focusable: false});
+    polyfillARIAMixin(ChipSet);
   }
 
   get chips() {

diff --git a/internal/aria/aria.ts b/internal/aria/aria.ts
@@ -315,59 +315,6 @@ export function polyfillARIAMixin(ctor: typeof ReactiveElement) {
   ctor.createProperty('role', {reflect: true});
 }
 
-/**
- * Enables a host custom element to be the target for aria roles and attributes.
- * Components should set the `elementInternals.role` property.
- *
- * By default, aria components are tab focusable. Provide a `focusable: false`
- * option for components that should not be tab focusable, such as
- * `role="listbox"`.
- *
- * This function will also polyfill aria `ElementInternals` properties for
- * Firefox.
- *
- * @param ctor The `ReactiveElement` constructor to set up.
- * @param options Options to configure the element's host aria.
- * @deprecated use `mixinFocusable()` and `polyfillARIAMixin()`
- * TODO(b/307785469): remove after updating components to use mixinFocusable
- */
-export function setupHostAria(
-  ctor: typeof ReactiveElement,
-  {focusable}: SetupHostAriaOptions = {},
-) {
-  if (focusable !== false) {
-    ctor.addInitializer((host) => {
-      host.addController({
-        hostConnected() {
-          if (host.hasAttribute('tabindex')) {
-            return;
-          }
-
-          host.tabIndex = 0;
-        },
-      });
-    });
-  }
-
-  polyfillARIAMixin(ctor);
-}
-
-/**
- * Options for setting up a host element as an aria target.
- * @deprecated use `mixinFocusable()` and `polyfillARIAMixin()`
- * TODO(b/307785469): remove after updating components to use mixinFocusable
- */
-export interface SetupHostAriaOptions {
-  /**
-   * Whether or not the element can be focused with the tab key. Defaults to
-   * true.
-   *
-   * Set this to false for aria roles that should not be tab focusable, such as
-   * `role="listbox"`.
-   */
-  focusable?: boolean;
-}
-
 /**
  * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
  * properties on internals. This is needed for Firefox.

diff --git a/list/internal/list.ts b/list/internal/list.ts
@@ -8,8 +8,8 @@ import {html, isServer, LitElement} from 'lit';
 import {queryAssignedElements} from 'lit/decorators.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 
 import {ListController, NavigableKeys} from './list-controller.js';
@@ -24,7 +24,7 @@ interface ListItem extends SharedListItem {
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class List extends LitElement {
   static {
-    setupHostAria(List, {focusable: false});
+    polyfillARIAMixin(List);
   }
 
   /**

diff --git a/menu/internal/menu.ts b/menu/internal/menu.ts
@@ -13,8 +13,8 @@ import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 import {createAnimationSignal, EASING} from '../../internal/motion/animation.js';
 import {
@@ -91,8 +91,7 @@ function getFocusedElement(
  */
 export abstract class Menu extends LitElement {
   static {
-    // We want to manage tabindex ourselves.
-    setupHostAria(Menu, {focusable: false});
+    polyfillARIAMixin(Menu);
   }
 
   @query('.menu') private readonly surfaceEl!: HTMLElement | null;

diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
@@ -12,16 +12,20 @@ import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 import {isActivationClick} from '../../internal/controller/events.js';
+import {mixinFocusable} from '../../labs/behaviors/focusable.js';
 
 import {SingleSelectionController} from './single-selection-controller.js';
 
 const CHECKED = Symbol('checked');
 let maskId = 0;
 
+// Separate variable needed for closure.
+const radioBaseClass = mixinFocusable(LitElement);
+
 /**
  * A radio component.
  *
@@ -30,9 +34,9 @@ let maskId = 0;
  * @fires change Dispatched when the value changes from user interaction.
  * --bubbles --composed
  */
-export class Radio extends LitElement {
+export class Radio extends radioBaseClass {
   static {
-    setupHostAria(Radio);
+    polyfillARIAMixin(Radio);
   }
 
   /** @nocollapse */
@@ -116,7 +120,7 @@ export class Radio extends LitElement {
   }
 
   protected override render() {
-    const classes = {checked: this.checked};
+    const classes = {'checked': this.checked};
     return html`
       <div class="container ${classMap(classes)}" aria-hidden="true">
         <md-ripple

diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
@@ -19,10 +19,11 @@ import {
 import {classMap} from 'lit/directives/class-map.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 import {EASING} from '../../internal/motion/animation.js';
+import {mixinFocusable} from '../../labs/behaviors/focusable.js';
 
 /**
  * Symbol for tabs to use to animate their indicators based off another tab's
@@ -36,12 +37,15 @@ const INDICATOR = Symbol('indicator');
  */
 export const ANIMATE_INDICATOR = Symbol('animateIndicator');
 
+// Separate variable needed for closure.
+const tabBaseClass = mixinFocusable(LitElement);
+
 /**
  * Tab component.
  */
-export class Tab extends LitElement {
+export class Tab extends tabBaseClass {
   static {
-    setupHostAria(Tab);
+    polyfillARIAMixin(Tab);
   }
 
   /**

diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
@@ -10,8 +10,8 @@ import {html, isServer, LitElement} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
 import {
+  polyfillARIAMixin,
   polyfillElementInternalsAria,
-  setupHostAria,
 } from '../../internal/aria/aria.js';
 
 import {ANIMATE_INDICATOR, Tab} from './tab.js';
@@ -42,7 +42,7 @@ import {ANIMATE_INDICATOR, Tab} from './tab.js';
  */
 export class Tabs extends LitElement {
   static {
-    setupHostAria(Tabs, {focusable: false});
+    polyfillARIAMixin(Tabs);
   }
 
   /**