fix(overlays): add aria-hidden to arrow (#2030)

.changeset/little-worms-exist.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+hide overlay arrow from screen readers

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",

packages/ui/components/overlays/src/ArrowMixin.js

@@ -110,7 +110,9 @@ export const ArrowMixinImplementation = superclass =>
 
     /** @protected */
     _arrowNodeTemplate() {
-      return html` <div class="arrow" data-popper-arrow>${this._arrowTemplate()}</div> `;
+      return html`
+        <div class="arrow" aria-hidden="true" data-popper-arrow>${this._arrowTemplate()}</div>
+      `;
     }
 
     /** @protected */

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`
+        <arrow-test>
+          <div slot="content">This is a tooltip</div>
+          <button slot="invoker">Tooltip button</button>
+        </arrow-test>
+      `)
+    );
+
+    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`