fix(color-loupe): hide svg from screen readers (#3318)

adobe · Jun 26, 2023 · 01e75b7 · 01e75b7
1 parent 217db8e
commit 01e75b7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts
@@ -37,6 +37,7 @@ export class ColorLoupe extends SpectrumElement {
     protected override render(): TemplateResult {
         return html`
             <svg
+                aria-hidden="true"
                 class="spectrum-ColorLoupe is-open"
                 overflow="visible"
                 style="--spectrum-picked-color: ${this

diff --git a/packages/color-loupe/test/color-loupe.test.ts b/packages/color-loupe/test/color-loupe.test.ts
@@ -35,5 +35,11 @@ describe('ColorLoupe', () => {
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
+
+        // SVG should be hidden from screen readers.
+        expect(el.shadowRoot.querySelector('svg')).to.have.attribute(
+            'aria-hidden',
+            'true'
+        );
     });
 });