mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 21:57:41 +03:00
chore(tabs): minor code/visibility refactors
Changes: - Use ElementInternals for aria roles outside of Firefox - Don't export Tabs interface used by tab - Get parent tabs element with closest() rather than - Remove md-tabs delegate focus (not used) - Remove selectedAttribute property (always 'selected') - Made focusedItem private PiperOrigin-RevId: 561287221
This commit is contained in:
parent
9389e26b68
commit
80de947d08
@ -17,10 +17,7 @@ import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
|
|||||||
import {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';
|
import {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';
|
||||||
import {EASING} from '../../internal/motion/animation.js';
|
import {EASING} from '../../internal/motion/animation.js';
|
||||||
|
|
||||||
/**
|
interface Tabs extends HTMLElement {
|
||||||
* An element that can select items.
|
|
||||||
*/
|
|
||||||
export interface Tabs extends HTMLElement {
|
|
||||||
selected?: number;
|
selected?: number;
|
||||||
selectedItem?: Tab;
|
selectedItem?: Tab;
|
||||||
previousSelectedItem?: Tab;
|
previousSelectedItem?: Tab;
|
||||||
@ -132,10 +129,6 @@ export class Tab extends LitElement {
|
|||||||
dispatchActivationClick(this.button);
|
dispatchActivationClick(this.button);
|
||||||
};
|
};
|
||||||
|
|
||||||
private get tabs() {
|
|
||||||
return this.parentElement as Tabs;
|
|
||||||
}
|
|
||||||
|
|
||||||
private animateSelected() {
|
private animateSelected() {
|
||||||
this.indicator.getAnimations().forEach(a => {
|
this.indicator.getAnimations().forEach(a => {
|
||||||
a.cancel();
|
a.cancel();
|
||||||
@ -152,9 +145,12 @@ export class Tab extends LitElement {
|
|||||||
if (!this.selected) {
|
if (!this.selected) {
|
||||||
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO(b/298105040): avoid hardcoding selector
|
||||||
|
const tabs = this.closest<Tabs>('md-tabs');
|
||||||
const from: Keyframe = {};
|
const from: Keyframe = {};
|
||||||
const fromRect =
|
const fromRect =
|
||||||
(this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
|
(tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
|
||||||
({} as DOMRect));
|
({} as DOMRect));
|
||||||
const fromPos = fromRect.left;
|
const fromPos = fromRect.left;
|
||||||
const fromExtent = fromRect.width;
|
const fromExtent = fromRect.width;
|
||||||
|
@ -41,12 +41,6 @@ const NAVIGATION_KEYS = new Map([
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export class Tabs extends LitElement {
|
export class Tabs extends LitElement {
|
||||||
/** @nocollapse */
|
|
||||||
static override readonly shadowRootOptions = {
|
|
||||||
...LitElement.shadowRootOptions,
|
|
||||||
delegatesFocus: true
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Index of the selected item.
|
* Index of the selected item.
|
||||||
*/
|
*/
|
||||||
@ -71,8 +65,6 @@ export class Tabs extends LitElement {
|
|||||||
// be kept in sync
|
// be kept in sync
|
||||||
@state() private itemsDirty = false;
|
@state() private itemsDirty = false;
|
||||||
|
|
||||||
private readonly selectedAttribute = `selected`;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The item currently selected.
|
* The item currently selected.
|
||||||
*/
|
*/
|
||||||
@ -90,10 +82,13 @@ export class Tabs extends LitElement {
|
|||||||
/**
|
/**
|
||||||
* The item currently focused.
|
* The item currently focused.
|
||||||
*/
|
*/
|
||||||
protected get focusedItem() {
|
private get focusedItem() {
|
||||||
return this.items.find((el: HTMLElement) => el.matches(':focus-within'));
|
return this.items.find((el: HTMLElement) => el.matches(':focus-within'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private readonly internals =
|
||||||
|
(this as HTMLElement /* needed for closure */).attachInternals();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
if (!isServer) {
|
if (!isServer) {
|
||||||
@ -105,7 +100,14 @@ export class Tabs extends LitElement {
|
|||||||
|
|
||||||
override connectedCallback() {
|
override connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this.setAttribute('role', 'tablist');
|
// Firefox does not support ElementInternals aria yet, so we need to hydrate
|
||||||
|
// an attribute.
|
||||||
|
if (!('role' in this.internals)) {
|
||||||
|
this.setAttribute('role', 'tablist');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.internals.role = 'tablist';
|
||||||
}
|
}
|
||||||
|
|
||||||
// focus item on keydown and optionally select it
|
// focus item on keydown and optionally select it
|
||||||
@ -218,8 +220,8 @@ export class Tabs extends LitElement {
|
|||||||
}
|
}
|
||||||
if (itemsChanged || changed.has('selected')) {
|
if (itemsChanged || changed.has('selected')) {
|
||||||
if (this.previousSelectedItem !== this.selectedItem) {
|
if (this.previousSelectedItem !== this.selectedItem) {
|
||||||
this.previousSelectedItem?.removeAttribute(this.selectedAttribute);
|
this.previousSelectedItem?.removeAttribute('selected');
|
||||||
this.selectedItem?.setAttribute(this.selectedAttribute, '');
|
this.selectedItem?.setAttribute('selected', '');
|
||||||
}
|
}
|
||||||
if (this.selectedItem !== this.focusedItem) {
|
if (this.selectedItem !== this.focusedItem) {
|
||||||
this.updateFocusableItem(this.selectedItem);
|
this.updateFocusableItem(this.selectedItem);
|
||||||
|
Loading…
Reference in New Issue
Block a user