Skip to content

Commit 7859080

Browse files
authored
[SR][SR Tree] Add screen reader tree to interactive graph editor (#2062)
## Summary: To make it easier for content authors (and us devs while we're still working on the screen reader experience) to build the screen reader experience for an interactive graph without constantly having to turn on the screen reader, add a screen reader tree directly into the editor. To do this, I used `querySelectorAll()` to get the mafs container and all its children, and read their `aria-label` and `aria-describedby` attributes. After building an object with the elements, roles, and attributes, display a tree showing these in the editor. ![image](https://github.com/user-attachments/assets/4fe89f90-590c-4aeb-8847-1235a56ca31b) Issue: https://khanacademy.atlassian.net/browse/LEMS-2714 ## Test plan: `yarn jest packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.test.tsx` Storybook - Go to http://localhost:6006/iframe.html?globals=&id=perseuseditor-widgets-interactive-graph--interactive-graph-circle&viewMode=story - Update the whole graph aria label and description - Update the correct graph - Update the locked figures and their labels - Confirm that the SR tree updates Author: nishasy Reviewers: benchristel, nishasy, catandthemachines, anakaren-rojas Required Reviewers: Approved By: benchristel Checks: ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x) Pull Request URL: #2062
1 parent 43e99d2 commit 7859080

File tree

6 files changed

+720
-1
lines changed

6 files changed

+720
-1
lines changed

.changeset/four-avocados-raise.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@khanacademy/perseus": patch
3+
"@khanacademy/perseus-editor": patch
4+
---
5+
6+
[SR][sr tree] Add screen reader tree to interactive graph editor

packages/perseus-editor/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"@khanacademy/wonder-blocks-form": "6.0.4",
5656
"@khanacademy/wonder-blocks-icon": "5.0.4",
5757
"@khanacademy/wonder-blocks-icon-button": "6.0.4",
58+
"@khanacademy/wonder-blocks-pill": "3.0.4",
5859
"@khanacademy/wonder-blocks-switch": "3.0.2",
5960
"@khanacademy/wonder-blocks-timing": "6.0.1",
6061
"@khanacademy/wonder-blocks-tokens": "3.0.1",
@@ -82,6 +83,7 @@
8283
"@khanacademy/wonder-blocks-form": "6.0.4",
8384
"@khanacademy/wonder-blocks-icon": "5.0.4",
8485
"@khanacademy/wonder-blocks-icon-button": "6.0.4",
86+
"@khanacademy/wonder-blocks-pill": "3.0.4",
8587
"@khanacademy/wonder-blocks-switch": "3.0.2",
8688
"@khanacademy/wonder-blocks-timing": "6.0.1",
8789
"@khanacademy/wonder-blocks-tokens": "3.0.1",

0 commit comments

Comments
 (0)