From 215f343e52462759aefa61dc2b2330967638ff3a Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 4 Mar 2025 11:38:23 -0800
Subject: [PATCH 1/3] [stop-safari-empty-images] Add aria-hidden to individual
 components of interactive graph elements

---
 .../graphs/components/angle-indicators.tsx           | 10 ++++++++++
 .../graphs/components/arrowhead.tsx                  |  5 +++++
 .../graphs/components/hairlines.tsx                  |  8 +++++++-
 .../graphs/components/movable-point-view.tsx         |  5 +++++
 .../graphs/components/svg-line.tsx                   |  5 +++++
 .../widgets/interactive-graphs/graphs/polygon.tsx    | 12 ++++++++++++
 .../widgets/interactive-graphs/graphs/quadratic.tsx  | 11 ++++++++++-
 .../widgets/interactive-graphs/graphs/sinusoid.tsx   |  6 ++++++
 8 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx
index 6df6d4f865..f2edb30dad 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx
@@ -272,6 +272,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"
@@ -286,6 +291,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"
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx
index 4877c8bdef..045ef03f1f 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx
@@ -27,6 +27,11 @@ export function Arrowhead(props: Props) {
 
     return (
         <g
+            // 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}
             className="interactive-graph-arrowhead"
             transform={`translate(${point[X]} ${point[Y]}) rotate(${props.angle})`}
         >
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/hairlines.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/hairlines.tsx
index e7d035cdf8..690fc7f9fe 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/hairlines.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/hairlines.tsx
@@ -22,7 +22,13 @@ export default function Hairlines(props: Props) {
     const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
 
     return (
-        <g>
+        <g
+            // 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}
+        >
             <line
                 x1={verticalStartX}
                 y1={y}
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx
index e39971a05d..464a0b0b89 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx
@@ -61,6 +61,11 @@ export const MovablePointView = forwardRef(
 
         const svgForPoint = (
             <g
+                // 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}
                 ref={hitboxRef}
                 className={pointClasses}
                 style={{"--movable-point-color": color, cursor} as any}
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/svg-line.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/svg-line.tsx
index 3c82b0380e..bb43755932 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/svg-line.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/svg-line.tsx
@@ -17,6 +17,11 @@ export function SVGLine(props: Props) {
     const {start, end, style, className, testId} = props;
     return (
         <line
+            // 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}
             x1={start[X]}
             y1={start[Y]}
             x2={end[X]}
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
index 0d9c7e5343..d62d600e7b 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
@@ -227,6 +227,10 @@ const LimitedPolygonGraph = (statefulProps: StatefulProps) => {
                         ? "var(--movable-line-stroke-weight-active)"
                         : "var(--movable-line-stroke-weight)",
                     style: {fill: "transparent"},
+                    // Use aria-hidden to hide the line from screen readers
+                    // so it doesn't read as "image" with no context.
+                    // This is okay because the graph has its own aria-label.
+                    "aria-hidden": true,
                 }}
             />
             {points.map((point, i) => {
@@ -453,12 +457,20 @@ const UnlimitedPolygonGraph = (statefulProps: StatefulProps) => {
                 svgPolylineProps={{
                     strokeWidth: "var(--movable-line-stroke-weight)",
                     style: {fill: "transparent"},
+                    // Use aria-hidden to hide the line from screen readers
+                    // so it doesn't read as "image" with no context.
+                    // This is okay because the graph has its own aria-label.
+                    "aria-hidden": true,
                 }}
             />
             {/* This rect is here to grab clicks so that new points can be added */}
             {/* It's important because it stops mouse events from propogating
                 when dragging a points around */}
             <rect
+                // Use aria-hidden to hide the line from screen readers
+                // so it doesn't read as "image" with no context.
+                // This is okay because the graph has its own aria-label.
+                aria-hidden={true}
                 style={{
                     fill: "rgba(0,0,0,0)",
                     cursor: "crosshair",
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/quadratic.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/quadratic.tsx
index 8f5f06b6c8..16a2e9f303 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/quadratic.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/quadratic.tsx
@@ -81,7 +81,16 @@ function QuadraticGraph(props: QuadraticGraphProps) {
             aria-label={srQuadraticGraph}
             aria-describedby={`${quadraticDirectionId} ${quadraticVertexId} ${quadraticInterceptsId}`}
         >
-            <Plot.OfX y={y} color={color.blue} />
+            <Plot.OfX
+                y={y}
+                color={color.blue}
+                svgPathProps={{
+                    // Use aria-hidden to hide the line from screen readers
+                    // so it doesn't read as "image" with no context.
+                    // This is okay because the graph has its own aria-label.
+                    "aria-hidden": true,
+                }}
+            />
             {coords.map((coord, i) => {
                 const srQuadraticPoint = getQuadraticPointString(
                     i + 1,
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx
index 846cbb551c..c4ec6d88d3 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx
@@ -79,6 +79,12 @@ function SinusoidGraph(props: SinusoidGraphProps) {
             <Plot.OfX
                 y={(x) => computeSine(x, coeffRef.current)}
                 color={color.blue}
+                svgPathProps={{
+                    // Use aria-hidden to hide the line from screen readers
+                    // so it doesn't read as "image" with no context.
+                    // This is okay because the graph has its own aria-label.
+                    "aria-hidden": true,
+                }}
             />
             {coords.map((coord, i) => (
                 <MovablePoint

From 963862b9743e3b11d4520c2340d32c6d80c05a9e Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 4 Mar 2025 13:51:32 -0800
Subject: [PATCH 2/3] [stop-safari-empty-images] docs(changeset): [SR] Hide
 individual visual components of interactive graph elements

---
 .changeset/wild-apes-repeat.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wild-apes-repeat.md

diff --git a/.changeset/wild-apes-repeat.md b/.changeset/wild-apes-repeat.md
new file mode 100644
index 0000000000..ccb86cb923
--- /dev/null
+++ b/.changeset/wild-apes-repeat.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Hide individual visual components of interactive graph elements

From 68eb743adc15a9a219b32e6cc77e8e2a37447c5c Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 4 Mar 2025 13:55:02 -0800
Subject: [PATCH 3/3] [stop-safari-empty-images] update snapshots

---
 .../interactive-graph.test.tsx.snap           | 24 +++++++++++++++++++
 .../__snapshots__/movable-line.test.tsx.snap  | 22 +++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
index 13f808a27c..59a221d2d6 100644
--- a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
+++ b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
@@ -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)"
                       >
@@ -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)"
                       >
@@ -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)"
                       >
@@ -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)"
                       >
@@ -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"
@@ -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;"
@@ -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;"
@@ -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;"
@@ -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"
@@ -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;"
@@ -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;"
@@ -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;"
@@ -2293,6 +2305,7 @@ 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"
@@ -2300,6 +2313,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
                             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"
@@ -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"
@@ -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;"
@@ -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;"
@@ -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;"
@@ -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"
@@ -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;"
@@ -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;"
@@ -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;"
@@ -3607,6 +3629,7 @@ 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"
@@ -3614,6 +3637,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
                             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"
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap b/packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap
index caff18915f..c796a43bd5 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap
@@ -31,6 +31,7 @@ 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"
@@ -38,6 +39,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline"
           x1="0"
           x2="0"
@@ -45,6 +47,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline-gap"
           x1="0"
           x2="0"
@@ -52,6 +55,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           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);"
@@ -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;"
@@ -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;"
@@ -173,6 +179,7 @@ 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"
@@ -180,6 +187,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline"
           x1="0"
           x2="0"
@@ -187,6 +195,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline-gap"
           x1="0"
           x2="0"
@@ -194,6 +203,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           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);"
@@ -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;"
@@ -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;"
@@ -315,6 +327,7 @@ 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"
@@ -322,6 +335,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline"
           x1="0"
           x2="0"
@@ -329,6 +343,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           y2="0"
         />
         <line
+          aria-hidden="true"
           class="movable-line-focus-outline-gap"
           x1="0"
           x2="0"
@@ -336,6 +351,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           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);"
@@ -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)"
         >
@@ -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)"
         >
@@ -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;"
@@ -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;"