diff --git a/.changeset/little-worms-exist.md b/.changeset/little-worms-exist.md new file mode 100644 index 000000000..8fff508ce --- /dev/null +++ b/.changeset/little-worms-exist.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +hide overlay arrow from screen readers diff --git a/package-lock.json b/package-lock.json index 9f8e991ee..199ea2f40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22393,7 +22393,7 @@ }, "packages/ui": { "name": "@lion/ui", - "version": "0.3.1", + "version": "0.3.4", "license": "MIT", "dependencies": { "@bundled-es-modules/message-format": "^6.0.4", diff --git a/packages/ui/components/overlays/src/ArrowMixin.js b/packages/ui/components/overlays/src/ArrowMixin.js index e85729feb..d98d5702c 100644 --- a/packages/ui/components/overlays/src/ArrowMixin.js +++ b/packages/ui/components/overlays/src/ArrowMixin.js @@ -110,7 +110,9 @@ export const ArrowMixinImplementation = superclass => /** @protected */ _arrowNodeTemplate() { - return html`
${this._arrowTemplate()}
`; + return html` + + `; } /** @protected */ diff --git a/packages/ui/components/overlays/test/ArrowMixin.test.js b/packages/ui/components/overlays/test/ArrowMixin.test.js index ae34fc90f..bb68c7812 100644 --- a/packages/ui/components/overlays/test/ArrowMixin.test.js +++ b/packages/ui/components/overlays/test/ArrowMixin.test.js @@ -62,6 +62,20 @@ describe('ArrowMixin', () => { expect(window.getComputedStyle(arrowNode).getPropertyValue('display')).to.equal('block'); }); + it('hides for screen readers', async () => { + const el = /** @type {ArrowTest} */ ( + await fixture(html` + +
This is a tooltip
+ +
+ `) + ); + + const arrowNode = /** @type {Element} */ (el._arrowNode); + expect(arrowNode.getAttribute('aria-hidden')).to.equal('true'); + }); + it('hides the arrow when has-arrow is false', async () => { const el = /** @type {ArrowTest} */ ( await fixture(html`