chore: update components to use mixinFocusable

PiperOrigin-RevId: 576982507
This commit is contained in:
Elizabeth Mitchell 2023-10-26 14:08:23 -07:00 committed by Copybara-Service
parent f94de5d302
commit f5daadc307
7 changed files with 23 additions and 69 deletions

View File

@ -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() {

View File

@ -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.

View File

@ -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);
}
/**

View File

@ -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;

View File

@ -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

View File

@ -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);
}
/**

View File

@ -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);
}
/**