kopia lustrzana https://github.com/shoelace-style/shoelace
fix accessible trigger
rodzic
fc4b1464b9
commit
7ff8b34e80
|
@ -2,6 +2,8 @@ import { autoUpdate, computePosition, flip, offset, shift, size } from '@floatin
|
||||||
import { html, LitElement } from 'lit';
|
import { html, LitElement } from 'lit';
|
||||||
import { customElement, property, query } from 'lit/decorators.js';
|
import { customElement, property, query } from 'lit/decorators.js';
|
||||||
import { classMap } from 'lit/directives/class-map.js';
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
|
import type SlButton from '~/components/button/button';
|
||||||
|
import type SlIconButton from '~/components/icon-button/icon-button';
|
||||||
import type SlMenuItem from '~/components/menu-item/menu-item';
|
import type SlMenuItem from '~/components/menu-item/menu-item';
|
||||||
import type SlMenu from '~/components/menu/menu';
|
import type SlMenu from '~/components/menu/menu';
|
||||||
import { animateTo, stopAnimations } from '~/internal/animate';
|
import { animateTo, stopAnimations } from '~/internal/animate';
|
||||||
|
@ -284,10 +286,22 @@ export default class SlDropdown extends LitElement {
|
||||||
const slot = this.trigger.querySelector('slot')!;
|
const slot = this.trigger.querySelector('slot')!;
|
||||||
const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];
|
const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];
|
||||||
const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
|
const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
|
||||||
|
let target: HTMLElement;
|
||||||
|
|
||||||
if (accessibleTrigger) {
|
if (accessibleTrigger) {
|
||||||
accessibleTrigger.setAttribute('aria-haspopup', 'true');
|
switch (accessibleTrigger.tagName.toLowerCase()) {
|
||||||
accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
// Shoelace buttons have to update the internal button so it's announced correctly by screen readers
|
||||||
|
case 'sl-button':
|
||||||
|
case 'sl-icon-button':
|
||||||
|
target = (accessibleTrigger as SlButton | SlIconButton).button;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
target = accessibleTrigger;
|
||||||
|
}
|
||||||
|
|
||||||
|
target.setAttribute('aria-haspopup', 'true');
|
||||||
|
target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue