mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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 {queryAssignedElements} from 'lit/decorators.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
|
|
||||||
import {Chip} from './chip.js';
|
import {Chip} from './chip.js';
|
||||||
@ -19,7 +19,7 @@ import {Chip} from './chip.js';
|
|||||||
*/
|
*/
|
||||||
export class ChipSet extends LitElement {
|
export class ChipSet extends LitElement {
|
||||||
static {
|
static {
|
||||||
setupHostAria(ChipSet, {focusable: false});
|
polyfillARIAMixin(ChipSet);
|
||||||
}
|
}
|
||||||
|
|
||||||
get chips() {
|
get chips() {
|
||||||
|
@ -315,59 +315,6 @@ export function polyfillARIAMixin(ctor: typeof ReactiveElement) {
|
|||||||
ctor.createProperty('role', {reflect: true});
|
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`
|
* Polyfills an element and its `ElementInternals` to support `ARIAMixin`
|
||||||
* properties on internals. This is needed for Firefox.
|
* 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 {queryAssignedElements} from 'lit/decorators.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
|
|
||||||
import {ListController, NavigableKeys} from './list-controller.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
|
// tslint:disable-next-line:enforce-comments-on-exported-symbols
|
||||||
export class List extends LitElement {
|
export class List extends LitElement {
|
||||||
static {
|
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 {styleMap} from 'lit/directives/style-map.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
import {createAnimationSignal, EASING} from '../../internal/motion/animation.js';
|
import {createAnimationSignal, EASING} from '../../internal/motion/animation.js';
|
||||||
import {
|
import {
|
||||||
@ -91,8 +91,7 @@ function getFocusedElement(
|
|||||||
*/
|
*/
|
||||||
export abstract class Menu extends LitElement {
|
export abstract class Menu extends LitElement {
|
||||||
static {
|
static {
|
||||||
// We want to manage tabindex ourselves.
|
polyfillARIAMixin(Menu);
|
||||||
setupHostAria(Menu, {focusable: false});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@query('.menu') private readonly surfaceEl!: HTMLElement | null;
|
@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 {classMap} from 'lit/directives/class-map.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
import {isActivationClick} from '../../internal/controller/events.js';
|
import {isActivationClick} from '../../internal/controller/events.js';
|
||||||
|
import {mixinFocusable} from '../../labs/behaviors/focusable.js';
|
||||||
|
|
||||||
import {SingleSelectionController} from './single-selection-controller.js';
|
import {SingleSelectionController} from './single-selection-controller.js';
|
||||||
|
|
||||||
const CHECKED = Symbol('checked');
|
const CHECKED = Symbol('checked');
|
||||||
let maskId = 0;
|
let maskId = 0;
|
||||||
|
|
||||||
|
// Separate variable needed for closure.
|
||||||
|
const radioBaseClass = mixinFocusable(LitElement);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A radio component.
|
* A radio component.
|
||||||
*
|
*
|
||||||
@ -30,9 +34,9 @@ let maskId = 0;
|
|||||||
* @fires change Dispatched when the value changes from user interaction.
|
* @fires change Dispatched when the value changes from user interaction.
|
||||||
* --bubbles --composed
|
* --bubbles --composed
|
||||||
*/
|
*/
|
||||||
export class Radio extends LitElement {
|
export class Radio extends radioBaseClass {
|
||||||
static {
|
static {
|
||||||
setupHostAria(Radio);
|
polyfillARIAMixin(Radio);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @nocollapse */
|
/** @nocollapse */
|
||||||
@ -116,7 +120,7 @@ export class Radio extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected override render() {
|
protected override render() {
|
||||||
const classes = {checked: this.checked};
|
const classes = {'checked': this.checked};
|
||||||
return html`
|
return html`
|
||||||
<div class="container ${classMap(classes)}" aria-hidden="true">
|
<div class="container ${classMap(classes)}" aria-hidden="true">
|
||||||
<md-ripple
|
<md-ripple
|
||||||
|
@ -19,10 +19,11 @@ import {
|
|||||||
import {classMap} from 'lit/directives/class-map.js';
|
import {classMap} from 'lit/directives/class-map.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
import {EASING} from '../../internal/motion/animation.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
|
* 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');
|
export const ANIMATE_INDICATOR = Symbol('animateIndicator');
|
||||||
|
|
||||||
|
// Separate variable needed for closure.
|
||||||
|
const tabBaseClass = mixinFocusable(LitElement);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tab component.
|
* Tab component.
|
||||||
*/
|
*/
|
||||||
export class Tab extends LitElement {
|
export class Tab extends tabBaseClass {
|
||||||
static {
|
static {
|
||||||
setupHostAria(Tab);
|
polyfillARIAMixin(Tab);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -10,8 +10,8 @@ import {html, isServer, LitElement} from 'lit';
|
|||||||
import {property, query, queryAssignedElements} from 'lit/decorators.js';
|
import {property, query, queryAssignedElements} from 'lit/decorators.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
polyfillARIAMixin,
|
||||||
polyfillElementInternalsAria,
|
polyfillElementInternalsAria,
|
||||||
setupHostAria,
|
|
||||||
} from '../../internal/aria/aria.js';
|
} from '../../internal/aria/aria.js';
|
||||||
|
|
||||||
import {ANIMATE_INDICATOR, Tab} from './tab.js';
|
import {ANIMATE_INDICATOR, Tab} from './tab.js';
|
||||||
@ -42,7 +42,7 @@ import {ANIMATE_INDICATOR, Tab} from './tab.js';
|
|||||||
*/
|
*/
|
||||||
export class Tabs extends LitElement {
|
export class Tabs extends LitElement {
|
||||||
static {
|
static {
|
||||||
setupHostAria(Tabs, {focusable: false});
|
polyfillARIAMixin(Tabs);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user