mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
chore: update components to use mixinFocusable
PiperOrigin-RevId: 576982507
This commit is contained in:
parent
f94de5d302
commit
f5daadc307
@ -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() {
|
||||
|
@ -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.
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user