Skip to content

Commit

Permalink
[SR] Add aria-hidden to individual components of interactive graph el…
Browse files Browse the repository at this point in the history 
…ements (#2277)

## Summary:
When using Safari + VoiceOver, the screen reader reads out every single internal part of every single element on the graph. For example, the arrow on a line is read out as "image" as well as the segment composing the line. This means that when traversing the graph in Safari, there are a whole bunch of empty "image"s being read out with no context. The context is provided by specific element's aria labels.

To remedy this, I added `aria-hidden` to all the visual elements that should not be read as "image" in all the graph types.

Issue: none

## Test Plan:
Storybook
- http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs
- Go to every graph type and traverse through it with a screen reader
- Confirm there are no random empty "image" calls

Author: nishasy

Reviewers: SonicScrewdriver, catandthemachines, mark-fitzgerald

Required Reviewers:

Approved By: SonicScrewdriver, catandthemachines

Checks: ✅ 13 checks were successful

Pull Request URL: #2277
  • Loading branch information
@nishasy
nishasy authored Mar 6, 2025
1 parent 5a64f3c commit 88e4e90
Show file tree
Hide file tree
Showing 11 changed files with 111 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/wild-apes-repeat.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

[SR] Hide individual visual components of interactive graph elements
24 changes: 24 additions & 0 deletions ...ages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -932,6 +932,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
</g>
</g>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(-200 0) rotate(180)"
>
Expand All @@ -949,6 +950,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
</g>
</g>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(200 0) rotate(0)"
>
Expand All @@ -966,6 +968,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
</g>
</g>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(0 200) rotate(90)"
>
Expand All @@ -983,6 +986,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
</g>
</g>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(0 -200) rotate(270)"
>
Expand Down Expand Up @@ -1192,6 +1196,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
aria-label="A polygon."
>
<polygon
aria-hidden="true"
fill-opacity="0.15"
points="3.5 2 2.5 4 1.5 2"
stroke-linejoin="round"
Expand Down Expand Up @@ -1260,6 +1265,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -1320,6 +1326,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -1380,6 +1387,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -1628,6 +1636,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
aria-label="A polygon."
>
<polygon
aria-hidden="true"
fill-opacity="0.15"
points="3 -2 0 3 -3 -2"
stroke-linejoin="round"
Expand Down Expand Up @@ -1657,6 +1666,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -1717,6 +1727,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -1777,6 +1788,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -2293,13 +2305,15 @@ exports[`Interactive Graph question Should render predictably: after interaction
aria-label="An empty coordinate plane."
>
<polyline
aria-hidden="true"
fill-opacity="0"
points=""
stroke-linejoin="round"
stroke-width="var(--movable-line-stroke-weight)"
style="fill: transparent; fill-opacity: 0; stroke: var(--movable-line-stroke-color); stroke-opacity: 1; vector-effect: non-scaling-stroke; transform: var(--mafs-view-transform);"
/>
<rect
aria-hidden="true"
height="400"
style="fill: rgba(0,0,0,0); cursor: crosshair;"
width="400"
Expand Down Expand Up @@ -2506,6 +2520,7 @@ exports[`Interactive Graph question Should render predictably: first render 1`]
aria-label="A polygon."
>
<polygon
aria-hidden="true"
fill-opacity="0.15"
points="3.5 2 2.5 4 1.5 2"
stroke-linejoin="round"
Expand Down Expand Up @@ -2574,6 +2589,7 @@ exports[`Interactive Graph question Should render predictably: first render 1`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -2634,6 +2650,7 @@ exports[`Interactive Graph question Should render predictably: first render 1`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -2694,6 +2711,7 @@ exports[`Interactive Graph question Should render predictably: first render 1`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -2942,6 +2960,7 @@ exports[`Interactive Graph question Should render predictably: first render 2`]
aria-label="A polygon."
>
<polygon
aria-hidden="true"
fill-opacity="0.15"
points="3 -2 0 3 -3 -2"
stroke-linejoin="round"
Expand Down Expand Up @@ -2971,6 +2990,7 @@ exports[`Interactive Graph question Should render predictably: first render 2`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -3031,6 +3051,7 @@ exports[`Interactive Graph question Should render predictably: first render 2`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -3091,6 +3112,7 @@ exports[`Interactive Graph question Should render predictably: first render 2`]
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -3607,13 +3629,15 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
aria-label="An empty coordinate plane."
>
<polyline
aria-hidden="true"
fill-opacity="0"
points=""
stroke-linejoin="round"
stroke-width="var(--movable-line-stroke-weight)"
style="fill: transparent; fill-opacity: 0; stroke: var(--movable-line-stroke-color); stroke-opacity: 1; vector-effect: non-scaling-stroke; transform: var(--mafs-view-transform);"
/>
<rect
aria-hidden="true"
height="400"
style="fill: rgba(0,0,0,0); cursor: crosshair;"
width="400"
Expand Down
22 changes: 22 additions & 0 deletions ...src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,31 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
tabindex="0"
>
<line
aria-hidden="true"
style="stroke: transparent; stroke-width: 44;"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline-gap"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class=""
data-testid="movable-line__line"
style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
Expand All @@ -70,6 +74,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -104,6 +109,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
/>
</g>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -173,27 +179,31 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
tabindex="0"
>
<line
aria-hidden="true"
style="stroke: transparent; stroke-width: 44;"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline-gap"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class=""
data-testid="movable-line__line"
style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
Expand All @@ -212,6 +222,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -246,6 +257,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
/>
</g>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -315,27 +327,31 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
tabindex="0"
>
<line
aria-hidden="true"
style="stroke: transparent; stroke-width: 44;"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class="movable-line-focus-outline-gap"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<line
aria-hidden="true"
class=""
data-testid="movable-line__line"
style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
Expand All @@ -349,12 +365,14 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
style="stroke: var(--movable-line-stroke-color); stroke-width: 2;"
>
<line
aria-hidden="true"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(0 0) rotate(0)"
>
Expand All @@ -376,12 +394,14 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
style="stroke: var(--movable-line-stroke-color); stroke-width: 2;"
>
<line
aria-hidden="true"
x1="0"
x2="0"
y1="0"
y2="0"
/>
<g
aria-hidden="true"
class="interactive-graph-arrowhead"
transform="translate(0 0) rotate(0)"
>
Expand All @@ -408,6 +428,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
tabindex="0"
/>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down Expand Up @@ -442,6 +463,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
/>
</g>
<g
aria-hidden="true"
class="movable-point"
data-testid="movable-point"
style="--movable-point-color: #1865f2;"
Expand Down
10 changes: 10 additions & 0 deletions packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,11 @@ const RightAngleSquare = ({
}) => (
<MafsCssTransformWrapper>
<path
// Use aria-hidden to hide the line from screen readers
// so it doesn't read as "image" with no context.
// The elements using this should have their own aria-labels,
// so this is okay.
aria-hidden={true}
d={`M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`}
strokeWidth={0.02}
fill="none"
Expand All @@ -287,6 +292,11 @@ const Arc = ({arc, className}: {arc: string; className?: string}) => {
return (
<MafsCssTransformWrapper>
<path
// Use aria-hidden to hide the line from screen readers
// so it doesn't read as "image" with no context.
// The elements using this should have their own aria-labels,
// so this is okay.
aria-hidden={true}
d={arc}
strokeWidth={0.02}
fill="none"
Expand Down
Loading

0 comments on commit 88e4e90

Please sign in to comment.