From cc9d3a4bc8866bbdaa09e2bf3fdb321fb9a125c1 Mon Sep 17 00:00:00 2001
From: Sarah Third <sarahthird@khanacademy.org>
Date: Thu, 12 Dec 2024 09:41:06 -0800
Subject: [PATCH] One weird trick that delights screen readers (#1988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
This is a simple PR that adds an aria-hidden tag to our graphie container so that we don't read out axis labels or "Made by Raphael" on screen readers. As a result, screen readers should have an easier time navigating the website.

While this may hide some labels within graphie, we've taken the position that the alt tags should be the sole source of truth for our screen readers.

Issue: LEMS-2712

## Test plan:
- manual testing

Author: SonicScrewdriver

Reviewers: mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x)

Pull Request URL: https://github.com/Khan/perseus/pull/1988
---
 .changeset/cool-moons-reply.md                         |  5 +++++
 .../__tests__/__snapshots__/graph.test.tsx.snap        |  1 +
 packages/perseus/src/util/graphie.ts                   |  3 +++
 .../widgets/grapher/__snapshots__/grapher.test.ts.snap |  2 ++
 .../interaction/__snapshots__/interaction.test.ts.snap |  1 +
 .../__snapshots__/interactive-graph.test.tsx.snap      |  9 +++++++++
 .../number-line/__snapshots__/number-line.test.ts.snap | 10 ++++++++++
 7 files changed, 31 insertions(+)
 create mode 100644 .changeset/cool-moons-reply.md

diff --git a/.changeset/cool-moons-reply.md b/.changeset/cool-moons-reply.md
new file mode 100644
index 0000000000..a71cab37b6
--- /dev/null
+++ b/.changeset/cool-moons-reply.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Hiding graphie labels from screen readers.
diff --git a/packages/perseus/src/components/__tests__/__snapshots__/graph.test.tsx.snap b/packages/perseus/src/components/__tests__/__snapshots__/graph.test.tsx.snap
index 6e245cd588..a5722937de 100644
--- a/packages/perseus/src/components/__tests__/__snapshots__/graph.test.tsx.snap
+++ b/packages/perseus/src/components/__tests__/__snapshots__/graph.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`graph should render 1`] = `
     style="width: 400px; height: 400px;"
   >
     <div
+      aria-hidden="true"
       class="graphie"
       style="position: relative; width: 400px; height: 400px;"
     >
diff --git a/packages/perseus/src/util/graphie.ts b/packages/perseus/src/util/graphie.ts
index 7909feeb95..a9820d06b4 100644
--- a/packages/perseus/src/util/graphie.ts
+++ b/packages/perseus/src/util/graphie.ts
@@ -128,6 +128,9 @@ export class Graphie {
         $(el).css("position", "relative");
         this.raphael = Raphael(el);
 
+        // Hide the Raphael canvas from screen readers
+        $(el).attr("aria-hidden", "true");
+
         // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
         $(el).children("div").css("position", "absolute");
     }
diff --git a/packages/perseus/src/widgets/grapher/__snapshots__/grapher.test.ts.snap b/packages/perseus/src/widgets/grapher/__snapshots__/grapher.test.ts.snap
index af4473385a..be4ad37550 100644
--- a/packages/perseus/src/widgets/grapher/__snapshots__/grapher.test.ts.snap
+++ b/packages/perseus/src/widgets/grapher/__snapshots__/grapher.test.ts.snap
@@ -52,6 +52,7 @@ exports[`grapher widget should snapshot linear graph question: initial render 1`
                   class="graphie-container"
                 >
                   <div
+                    aria-hidden="true"
                     class="graphie"
                     style="position: relative; width: 400px; height: 400px;"
                   >
@@ -1398,6 +1399,7 @@ exports[`grapher widget should snapshot question with multiple graph types: init
                   class="graphie-container"
                 >
                   <div
+                    aria-hidden="true"
                     class="graphie"
                     style="position: relative; width: 400px; height: 400px;"
                   >
diff --git a/packages/perseus/src/widgets/interaction/__snapshots__/interaction.test.ts.snap b/packages/perseus/src/widgets/interaction/__snapshots__/interaction.test.ts.snap
index 4a5d7e5fe2..bdfd9634dc 100644
--- a/packages/perseus/src/widgets/interaction/__snapshots__/interaction.test.ts.snap
+++ b/packages/perseus/src/widgets/interaction/__snapshots__/interaction.test.ts.snap
@@ -29,6 +29,7 @@ exports[`interaction widget should render 1`] = `
             class="graphie-container"
           >
             <div
+              aria-hidden="true"
               class="graphie"
               style="position: relative; width: 479.99999999999994px; height: 120.00000000000001px;"
             >
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 f980f9198b..bdcdde6579 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
@@ -24,6 +24,7 @@ exports[`interactive-graph widget A none-type graph renders predictably: first r
               style="width: 400px; height: 400px;"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -1164,6 +1165,7 @@ exports[`interactive-graph widget question Should render predictably: after inte
               style="width: 400px; height: 400px;"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -1558,6 +1560,7 @@ exports[`interactive-graph widget question Should render predictably: after inte
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -1968,6 +1971,7 @@ exports[`interactive-graph widget question Should render predictably: after inte
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -2371,6 +2375,7 @@ exports[`interactive-graph widget question Should render predictably: after inte
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -2856,6 +2861,7 @@ exports[`interactive-graph widget question Should render predictably: first rend
               style="width: 400px; height: 400px;"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -3250,6 +3256,7 @@ exports[`interactive-graph widget question Should render predictably: first rend
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -3660,6 +3667,7 @@ exports[`interactive-graph widget question Should render predictably: first rend
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
@@ -3875,6 +3883,7 @@ exports[`interactive-graph widget question Should render predictably: first rend
                 </span>
               </div>
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 400px; height: 400px;"
               >
diff --git a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
index aedd38d4e0..7bd2993422 100644
--- a/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
+++ b/packages/perseus/src/widgets/number-line/__snapshots__/number-line.test.ts.snap
@@ -65,6 +65,7 @@ exports[`number-line widget snapshots all tick labels show when "Style" is "deci
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -629,6 +630,7 @@ exports[`number-line widget snapshots can handle fractions: show fractions 1`] =
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 459.99999999999994px; height: 100px;"
               >
@@ -985,6 +987,7 @@ exports[`number-line widget snapshots default: first render 1`] = `
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 459.99999999999994px; height: 80px;"
               >
@@ -1357,6 +1360,7 @@ exports[`number-line widget snapshots endpoints are highlighted when labels are
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -1921,6 +1925,7 @@ exports[`number-line widget snapshots endpoints are highlighted when labels are
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -2485,6 +2490,7 @@ exports[`number-line widget snapshots labels are highlighted when part of the ti
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -2889,6 +2895,7 @@ exports[`number-line widget snapshots labels are inserted when NOT part of the t
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -3330,6 +3337,7 @@ exports[`number-line widget snapshots mobile: first mobile render 1`] = `
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 288px; height: 80px;"
               >
@@ -3702,6 +3710,7 @@ exports[`number-line widget snapshots only endpoints/labels show when "Show labe
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >
@@ -4095,6 +4104,7 @@ exports[`number-line widget snapshots only endpoints/labels show when "Show labe
               class="graphie-container"
             >
               <div
+                aria-hidden="true"
                 class="graphie"
                 style="position: relative; width: 460px; height: 80px;"
               >