[SR][Locked Figures] Give all locked figures "img" role (#2097)

## Summary: Right now, when traversing through locked figures with a screen reader, it reads out the label and then identifies the figure as "empty group." This is an extremely unhelpful description. To give a more accurate description of the function the locked figures are serving, we need to give them a role of "img." This way, the screen reader will read the aria label and then say "image" after. Issue: none ## Test plan: Storybook - http://localhost:6006/iframe.html?globals=&args=&id=perseuseditor-widgets-interactive-graph--mafs-with-locked-figures&viewMode=story - Go through this story before and after the change. It should say image instead of empty group now. ### Before https://github.com/user-attachments/assets/245cd639-a64b-4abf-bcc3-9354a6381c8d ### After https://github.com/user-attachments/assets/68c67c9b-160e-4949-a123-209e28759b4e Author: nishasy Reviewers: SonicScrewdriver Required Reviewers: Approved By: SonicScrewdriver Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2097
Khan · Jan 14, 2025 · 7ed21f4 · 7ed21f4
1 parent b846392
commit 7ed21f4
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/spotty-fireants-switch.md b/.changeset/spotty-fireants-switch.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR][locked figures] Give all locked figures "img" role
diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx
@@ -18,6 +18,7 @@ const LockedEllipse = (props: LockedEllipseType) => {
             className="locked-ellipse"
             aria-label={hasAria ? ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             <Ellipse
                 center={center}

diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-function.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-function.tsx
@@ -39,6 +39,7 @@ const LockedFunction = (props: LockedFunctionType) => {
             className="locked-function"
             aria-label={hasAria ? props.ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             {directionalAxis === "x" && (
                 <Plot.OfX y={(x) => equation.eval({x})} {...plotProps} />

diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx
@@ -115,6 +115,7 @@ const LockedLine = (props: Props) => {
             className={kind === "ray" ? "locked-ray" : "locked-line"}
             aria-label={hasAria ? ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             {line}
             {showPoint1 && (

diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx
@@ -17,6 +17,7 @@ const LockedPoint = (props: LockedPointType) => {
             className="locked-point"
             aria-label={hasAria ? ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             <Point
                 x={x}

diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx
@@ -20,6 +20,7 @@ const LockedPolygon = (props: LockedPolygonType) => {
             className="locked-polygon"
             aria-label={hasAria ? props.ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             <Polygon
                 points={[...points]}

diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-vector.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-vector.tsx
@@ -16,6 +16,7 @@ const LockedVector = (props: LockedVectorType) => {
             className="locked-vector"
             aria-label={hasAria ? ariaLabel : undefined}
             aria-hidden={!hasAria}
+            role="img"
         >
             <Vector tail={tail} tip={tip} color={lockedFigureColors[color]} />
         </g>