mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 17:40:40 +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 {EASING} from '../../internal/motion/animation.js';
|
||||
|
||||
/**
|
||||
* An element that can select items.
|
||||
*/
|
||||
export interface Tabs extends HTMLElement {
|
||||
interface Tabs extends HTMLElement {
|
||||
selected?: number;
|
||||
selectedItem?: Tab;
|
||||
previousSelectedItem?: Tab;
|
||||
@ -132,10 +129,6 @@ export class Tab extends LitElement {
|
||||
dispatchActivationClick(this.button);
|
||||
};
|
||||
|
||||
private get tabs() {
|
||||
return this.parentElement as Tabs;
|
||||
}
|
||||
|
||||
private animateSelected() {
|
||||
this.indicator.getAnimations().forEach(a => {
|
||||
a.cancel();
|
||||
@ -152,9 +145,12 @@ export class Tab extends LitElement {
|
||||
if (!this.selected) {
|
||||
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
||||
}
|
||||
|
||||
// TODO(b/298105040): avoid hardcoding selector
|
||||
const tabs = this.closest<Tabs>('md-tabs');
|
||||
const from: Keyframe = {};
|
||||
const fromRect =
|
||||
(this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
|
||||
(tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
|
||||
({} as DOMRect));
|
||||
const fromPos = fromRect.left;
|
||||
const fromExtent = fromRect.width;
|
||||
|
@ -41,12 +41,6 @@ const NAVIGATION_KEYS = new Map([
|
||||
*
|
||||
*/
|
||||
export class Tabs extends LitElement {
|
||||
/** @nocollapse */
|
||||
static override readonly shadowRootOptions = {
|
||||
...LitElement.shadowRootOptions,
|
||||
delegatesFocus: true
|
||||
};
|
||||
|
||||
/**
|
||||
* Index of the selected item.
|
||||
*/
|
||||
@ -71,8 +65,6 @@ export class Tabs extends LitElement {
|
||||
// be kept in sync
|
||||
@state() private itemsDirty = false;
|
||||
|
||||
private readonly selectedAttribute = `selected`;
|
||||
|
||||
/**
|
||||
* The item currently selected.
|
||||
*/
|
||||
@ -90,10 +82,13 @@ export class Tabs extends LitElement {
|
||||
/**
|
||||
* The item currently focused.
|
||||
*/
|
||||
protected get focusedItem() {
|
||||
private get focusedItem() {
|
||||
return this.items.find((el: HTMLElement) => el.matches(':focus-within'));
|
||||
}
|
||||
|
||||
private readonly internals =
|
||||
(this as HTMLElement /* needed for closure */).attachInternals();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
if (!isServer) {
|
||||
@ -105,7 +100,14 @@ export class Tabs extends LitElement {
|
||||
|
||||
override 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
|
||||
@ -218,8 +220,8 @@ export class Tabs extends LitElement {
|
||||
}
|
||||
if (itemsChanged || changed.has('selected')) {
|
||||
if (this.previousSelectedItem !== this.selectedItem) {
|
||||
this.previousSelectedItem?.removeAttribute(this.selectedAttribute);
|
||||
this.selectedItem?.setAttribute(this.selectedAttribute, '');
|
||||
this.previousSelectedItem?.removeAttribute('selected');
|
||||
this.selectedItem?.setAttribute('selected', '');
|
||||
}
|
||||
if (this.selectedItem !== this.focusedItem) {
|
||||
this.updateFocusableItem(this.selectedItem);
|
||||
|
Loading…
Reference in New Issue
Block a user