Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(LEMS-1733): adds aria labels to line segment #2032

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
+705 −31
Open

feat(LEMS-1733): adds aria labels to line segment #2032

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
776c38b
docs(changeset): adds aria labels to line segment
anakaren-rojas Dec 18, 2024
bf27d16
add aria labels to line segment
anakaren-rojas Dec 18, 2024
76391ec
use line segment label
anakaren-rojas Dec 18, 2024
25b8121
Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment
anakaren-rojas Dec 19, 2024
de68801
remove role from segment
anakaren-rojas Dec 19, 2024
0616ef8
Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment
anakaren-rojas Dec 19, 2024
08fd6bf
add description for multiple segments
anakaren-rojas Dec 20, 2024
a4f033a
update strings
anakaren-rojas Dec 20, 2024
67b3bd7
add periods at the end of sentences
anakaren-rojas Dec 23, 2024
06114d8
update strings to include multiples and add desc for whole graph
anakaren-rojas Dec 23, 2024
1f6b8b4
move function outside of component
anakaren-rojas Dec 27, 2024
822097d
add unique id to the descriptions
anakaren-rojas Dec 27, 2024
4981fdc
remove unique id from aria described by key
anakaren-rojas Dec 27, 2024
bacaad4
add missing id
anakaren-rojas Dec 27, 2024
717bd34
readd key
anakaren-rojas Dec 27, 2024
42d5288
remove context and message objects
anakaren-rojas Jan 7, 2025
ec9d977
Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment
anakaren-rojas Jan 7, 2025
072225a
lint fix
anakaren-rojas Jan 7, 2025
1206856
Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment
anakaren-rojas Jan 8, 2025
d070c09
add placeholder for grab handle aria label
anakaren-rojas Jan 15, 2025
9221928
Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment
nishasy Jan 21, 2025
2adacae
Remove unused string. Make the description the label.
nishasy Jan 21, 2025
97a9970
Add grab handle string
nishasy Jan 21, 2025
4235cd7
Separate length into description
nishasy Jan 21, 2025
30061d3
Describe interactive elements in outer graph
nishasy Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/perseus/src/strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,12 +265,14 @@ export type PerseusStrings = {
point2X,
point2Y,
length,
indexOfSegment
}: {
point1X: string;
point1Y: string;
point2X: string;
point2Y: string;
length: string;
indexOfSegment: number;
}) => string;
srSegmentGraphEndpointAriaLabel: ({
endpointNumber,
Expand Down Expand Up @@ -586,7 +588,7 @@ export const strings: {
context:
"Screenreader-only description of a line segment on a coordinate plane.",
message:
"Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s. Segment length %(length)s",
"Segment %(indexOfSegment)s. Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s. Segment length %(length)s",
},
srSegmentGraphEndpointAriaLabel: {
context:
Expand Down Expand Up @@ -817,8 +819,9 @@ export const mockStrings: PerseusStrings = {
point2X,
point2Y,
length,
indexOfSegment
}) =>
`Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}. Segment length ${length}`,
`Segment ${indexOfSegment}. Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}. Segment length ${length}`,
srSegmentGraphEndpointAriaLabel: ({endpointNumber, x, y}) =>
`Endpoint ${endpointNumber} at ${x} comma ${y}`,
// The above strings are used for interactive graph SR descriptions.
Expand Down
107 changes: 59 additions & 48 deletions packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type {
Dispatch,
InteractiveGraphElementSuite,
MafsGraphProps,
PairOfPoints,
SegmentGraphState,
} from "../types";
import type {vec} from "mafs";
Expand All @@ -31,19 +32,23 @@ type SegmentProps = MafsGraphProps<SegmentGraphState>;
const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
const {coords: segments} = graphState;
const {strings, locale} = usePerseusI18n();
const lengthOfSegment =
segments[0] && kpoint.distanceToPoint(...segments[0]);

const wholeSegmentAriaLabel = strings.srSegmentGraphAriaLabel;
const wholeSegmentAriaDescription =
segments[0] &&
strings.srSegmentGraphAriaDescription({
point1X: srFormatNumber(segments[0][0][X], locale),
point1Y: srFormatNumber(segments[0][0][Y], locale),
point2X: srFormatNumber(segments[0][1][X], locale),
point2Y: srFormatNumber(segments[0][1][Y], locale),
length: srFormatNumber(lengthOfSegment, locale),

function getLengthOfSegment(segment: PairOfPoints) {
return kpoint.distanceToPoint(...segment);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I meant to write "Since this function is not using stuff inside the component"


function getWholeSegmentAriaDescription(segment: PairOfPoints, index: number) {
const indexOfSegment = index + 1;
return strings.srSegmentGraphAriaDescription({
point1X: srFormatNumber(segment[0][X], locale),
point1Y: srFormatNumber(segment[0][Y], locale),
point2X: srFormatNumber(segment[1][X], locale),
point2Y: srFormatNumber(segment[1][Y], locale),
length: srFormatNumber(getLengthOfSegment(segment), locale),
indexOfSegment: indexOfSegment,
});
anakaren-rojas marked this conversation as resolved.
Show resolved Hide resolved
}

function formatSegment(endpointNumber: number, x: number, y: number) {
return strings.srSegmentGraphEndpointAriaLabel({
Expand All @@ -54,46 +59,52 @@ const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
}

return (
<g
aria-label={wholeSegmentAriaLabel}
aria-describedby="segment-description"
>
<>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

{segments?.map((segment, i) => (
<MovableLine
<g
aria-label={wholeSegmentAriaLabel}
aria-describedby={`segment-description-${i}`}
key={i}
points={segment}
onMoveLine={(delta: vec.Vector2) => {
dispatch(actions.segment.moveLine(i, delta));
}}
onMovePoint={(
endpointIndex: number,
destination: vec.Vector2,
) => {
dispatch(
actions.segment.movePointInFigure(
i,
endpointIndex,
destination,
>
<MovableLine
key={i}
points={segment}
onMoveLine={(delta: vec.Vector2) => {
dispatch(actions.segment.moveLine(i, delta));
}}
onMovePoint={(
endpointIndex: number,
destination: vec.Vector2,
) => {
dispatch(
actions.segment.movePointInFigure(
i,
endpointIndex,
destination,
),
);
}}
ariaLabels={{
point1AriaLabel: formatSegment(
1,
segment[0][X],
segment[0][Y],
),
point2AriaLabel: formatSegment(
2,
segment[1][X],
segment[1][Y],
),
);
}}
ariaLabels={{
point1AriaLabel: formatSegment(
1,
segment[0][X],
segment[0][Y],
),
point2AriaLabel: formatSegment(
2,
segment[1][X],
segment[1][Y],
),
}}
/>
}}
/>
<g
id={`segment-description-${i}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

style={{display: "hidden"}}
>
{getWholeSegmentAriaDescription(segment, i)}
</g>
</g>
))}
<g id="segment-description" style={{display: "hidden"}}>
{wholeSegmentAriaDescription}
</g>
</g>
</>
);
};
Loading