One weird trick that delights screen readers (#1988)

## 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: #1988

.changeset/cool-moons-reply.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Hiding graphie labels from screen readers.

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;"
     >

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");
     }

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;"
                   >

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;"
             >

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;"
               >

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;"
               >