js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tooltip

Browse Source
This commit is contained in:
konnorrogers
2024-06-11 16:41:42 -04:00
parent 2e7096c66f
commit dc12e16d83
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tooltip/tooltip.ts
View File

@@ -264,6 +264,13 @@ export default class WaTooltip extends WebAwesomeElement {
const labelRegex = new RegExp(`\\b${this.id}\\b`);
if (newAnchor) {
/**
* We use `aria-labelledby` because it seems to have the most consistent screenreader experience.
* Particularly for our "special" focusable elements like `<wa-button>`, `<wa-input>` etc.
* aria-describedby usually in some screenreaders is required to be on the actually focusable element,
* whereas with `aria-labelledby` it'll still read on first focus. The APG does and WAI-ARIA does recommend aria-describedby
* so perhaps once we have cross-root aria, we can revisit this decision.
*/
const currentLabel = newAnchor.getAttribute('aria-labelledby') || '';
if (!currentLabel.match(labelRegex)) {
newAnchor.setAttribute('aria-labelledby', currentLabel + ' ' + this.id);
@@ -324,12 +331,6 @@ export default class WaTooltip extends WebAwesomeElement {
return waitForEvent(this, 'wa-after-hide');
}
//
// NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
// announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
// aria-describedby attribute to a slot, which is required by `<wa-popup>` to correctly locate the first assigned
// element, otherwise positioning is incorrect.
//
render() {
return html`
<wa-popup