[SR] Polygon (limited) - Add screen reader experience #2173
Conversation
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (05a1319) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2173If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2173 |
|
Size Change: +1.92 kB (+0.13%) Total Size: 1.48 MB
ℹ️ View Unchanged
|
| <UnlimitedPolygonGraph {...statefulProps} /> | ||
| ) : ( | ||
| <LimitedPolygonGraph {...statefulProps} /> | ||
| ); |
There was a problem hiding this comment.
I changed this to render as components this so I could use hooks inside each component separately. Otherwise it gives me a conditional hook error and crashes in the editor when changing between fixed and unlimited polygon graph type.
I prefer this over having a whole bunch of hooks up here in the parent that may or may not apply to the two different components and passing them down.
| srPolygonInteractiveElements: string; | ||
| }; | ||
|
|
||
| function describePolygonGraph( |
There was a problem hiding this comment.
I didn't export this one for testing, because I tested all these strings inside the LimitedPolygon component since it's called in there.
| export function srFormatNumber( | ||
| a: number, | ||
| locale: string, | ||
| maximumFractionDigits?: number, |
There was a problem hiding this comment.
Adding this parameter so that the screen reader label for the side angles can match what's presented by the "show angles" button (which is only one decimal point).
Summary:
Add the aria labels and descriptions for the full graph and interactive elements in the Fixed Polygon graph, based on the SRUX doc.
The Unlimited Polygon SR experience will be added in a separate PR.
Issue: https://khanacademy.atlassian.net/browse/LEMS-2487
Test plan:
yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/polygon.test.tsxyarn jest packages/perseus/src/widgets/interactive-graphs/graphs/utils.test.tsStorybook
http://localhost:6006/iframe.html?globals=&id=perseuseditor-widgets-interactive-graph--interactive-graph-polygon&viewMode=story