feat(LEMS-1733): adds aria labels to line segment #2032
Conversation
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (717bd34) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2032If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2032 |
|
Size Change: +741 B (+0.06%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
anakaren-rojas
changed the title
anakaren-rojas
changed the title
packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx
Outdated
Show resolved
Hide resolved
packages/perseus/src/strings.ts
Outdated
| srAngleGraphAriaLabel: { | ||
| context: | ||
| "Screenreader-accessible label for an angle on a coordinate plane.", | ||
| message: "An angle on a coordinate plane", |
There was a problem hiding this comment.
Can you add a period to the end of this?
|
|
||
| function getLengthOfSegment(segment: PairOfPoints) { | ||
| return kpoint.distanceToPoint(...segment); | ||
| } |
There was a problem hiding this comment.
Nit (Optional): Since this component is not using stuff inside the component (everything it needs is passed into the parameters), you can move it outside the component, maybe at the top of this file. That way it won't re-initialize on every render.
This won't really make a difference in performance in this particular case, so it's really up to you, but I believe that's considered good practice.
There was a problem hiding this comment.
Oops, I meant to write "Since this function is not using stuff inside the component"
| aria-label={wholeSegmentAriaLabel} | ||
| aria-describedby="segment-description" | ||
| > | ||
| <> |
There was a problem hiding this comment.
I think we might still want a label on the overall segments graph saying something like "[Num] segments" so the user knows what to expect before going through each segment individually.
| }} | ||
| /> | ||
| <g | ||
| id={`segment-description-${i}`} |
There was a problem hiding this comment.
You still need to use React.useId() to make sure that it's referring to the correct description if there are multiple interactive graphs on the page.
There was a problem hiding this comment.
Oh I see, you're talking about having multiple instances of the line segment graph on a single page, right?
I wonder if the ID creation should be bubbled up to the Mafs graph to ensure that we're not getting the same ID in multiple instances for all the graphs, then the individual graphs can consume the IDs.
It looks like we already have a unique ID being generated there, we would just need to consume it
There was a problem hiding this comment.
You can bubble it down, but I think just adding another React.useId() at the top of the current file is much less work. Then you don't have to bubble it down into everything and keep passing it around everywhere even when not strictly necessary.
I'm not aware of performance issues with React.useId() so I'd personally go with that approach myself, but it's up to you.
Summary:
Issue: LEMS-1733
Test plan:
Expected behavior
Single Segment
A line segment on a coordinate plane.A line segment on a coordinate plane. Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 ${point2X} comma ${point2Y}. Segment length %(length)s units.Multiple Segments
{Number of segments} segment on a coordinate plane.{Number of segments} segment on a coordinate plane. Segment {N}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 ${point2X} comma ${point2Y}. Segment length %(length)s units.Individual Points
Endpoint ${endpointNumber} at ${x} comma ${y}Screenshots:
Single Segment on a Coordinate Plane - Aria Label and Description
Multiple segments on a coordinate plane - Aria Label and Description
Individual Segment Aria Label - Description