fix(color-loupe): svg should be hidden from screen readers #3316

[majornista]

Description

Add aria-hidden="true" to the svg within the ColorLoupe shadowDom.

Related issue(s)

• fixes [Bug][a11y]: ColorLoupe svg should be hidden from screen readers #3316

Motivation and context

How has this been tested?

• Test case 1
  1. Go here
  2. Do this
• Test case 2
  1. Go here
  2. Do this

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch Preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Tachometer results

Chrome

color-area permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	428 kB	165.89ms - 168.55ms	-	unsure 🔍 -1% - +1% -1.63ms - +1.60ms
branch	428 kB	166.32ms - 168.15ms	unsure 🔍 -1% - +1% -1.60ms - +1.63ms	-

color-handle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	350 kB	66.98ms - 67.49ms	-	unsure 🔍 -1% - +1% -0.37ms - +0.49ms
branch	351 kB	66.83ms - 67.52ms	unsure 🔍 -1% - +1% -0.49ms - +0.37ms	-

color-loupe permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	342 kB	45.63ms - 46.01ms	-	unsure 🔍 -1% - +0% -0.31ms - +0.16ms
branch	343 kB	45.77ms - 46.03ms	unsure 🔍 -0% - +1% -0.16ms - +0.31ms	-

color-slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	432 kB	147.14ms - 148.40ms	-	unsure 🔍 -1% - +1% -0.87ms - +0.99ms
branch	432 kB	147.02ms - 148.39ms	unsure 🔍 -1% - +1% -0.99ms - +0.87ms	-

color-wheel permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	434 kB	150.50ms - 152.26ms	-	unsure 🔍 -0% - +1% -0.63ms - +1.35ms
branch	434 kB	150.56ms - 151.47ms	unsure 🔍 -1% - +0% -1.35ms - +0.63ms	-

Firefox

color-area permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	428 kB	466.65ms - 503.39ms	-	unsure 🔍 -4% - +7% -20.56ms - +32.48ms
branch	428 kB	459.93ms - 498.19ms	unsure 🔍 -7% - +4% -32.48ms - +20.56ms	-

color-handle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	350 kB	277.15ms - 309.09ms	-	unsure 🔍 -8% - +7% -24.74ms - +20.82ms
branch	351 kB	278.84ms - 311.32ms	unsure 🔍 -7% - +8% -20.82ms - +24.74ms	-

color-loupe permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	342 kB	191.37ms - 226.79ms	-	unsure 🔍 -5% - +16% -9.67ms - +31.79ms
branch	343 kB	187.24ms - 208.80ms	unsure 🔍 -15% - +4% -31.79ms - +9.67ms	-

color-slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	432 kB	444.82ms - 489.58ms	-	unsure 🔍 -6% - +6% -26.26ms - +28.98ms
branch	432 kB	449.66ms - 482.02ms	unsure 🔍 -6% - +6% -28.98ms - +26.26ms	-

color-wheel permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	434 kB	420.63ms - 454.65ms	-	unsure 🔍 -2% - +8% -7.65ms - +34.69ms
branch	434 kB	411.53ms - 436.71ms	unsure 🔍 -8% - +2% -34.69ms - +7.65ms	-

[Westbrook]

Confirming CI with the small tweak I made to the test, and then we should be good to go here. Thanks @majornista!