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.

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

[SR] Linear System - add screen reader support for Linear System interactive graph #2030

Merged
merged 22 commits into from
Jan 15, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
30333ff
[SR] Linear graph - add grab handle description and aria lives
nishasy Dec 18, 2024
586c962
docs(changeset): [SR] Linear graph - add grab handle description and …
nishasy Dec 18, 2024
ee8b9b2
Merge branch 'main' into sr-linear-body
nishasy Dec 18, 2024
a5ef0f8
Linear System SR
nishasy Dec 18, 2024
0fbbbfa
docs(changeset): [SR] Linear System - add screen reader support for L…
nishasy Dec 18, 2024
951fc96
Merge branch 'main' into sr-linear-system
nishasy Dec 19, 2024
193ee2a
fix misunderstanding from linear PR. update tests
nishasy Dec 19, 2024
c01b4f6
Merge branch 'main' into sr-linear-system
nishasy Jan 8, 2025
b315fbf
remove contexts from strings
nishasy Jan 8, 2025
7d96885
Add full graph description of all interactive elements
nishasy Jan 8, 2025
9ac9782
Rename lineSequence --> lineNumber
nishasy Jan 9, 2025
5b48e40
Create custom matcher for aria descriptions
nishasy Jan 9, 2025
24f71a1
Include ID in template string
nishasy Jan 9, 2025
8669b75
Use srOnly style instead of invalid display hidden
nishasy Jan 9, 2025
ed8ccbd
use isFinite
nishasy Jan 9, 2025
4523ca0
Merge branch 'main' into sr-linear-system
nishasy Jan 9, 2025
f8c8c11
handle SR for lines overlapping axes
nishasy Jan 15, 2025
1dcf3fd
Use existing aria description matcher rather than creating a new one
nishasy Jan 15, 2025
d64ac0d
correct string in test
nishasy Jan 15, 2025
4468c3e
Add types
nishasy Jan 15, 2025
e4a7322
fix import
nishasy Jan 15, 2025
11f2a4a
Update grab handle description to match SRUX doc
nishasy Jan 15, 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
5 changes: 5 additions & 0 deletions .changeset/tidy-baboons-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

[SR] Linear System - add screen reader support for Linear System interactive graph
35 changes: 35 additions & 0 deletions packages/perseus/src/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,31 @@ export type PerseusStrings = {
endingSideX: string;
endingSideY: string;
}) => string;
srLinearSystemGraph: string;
srLinearSystemPoints: ({
lineNumber,
point1X,
point1Y,
point2X,
point2Y,
}: {
lineNumber: number;
point1X: string;
point1Y: string;
point2X: string;
point2Y: string;
}) => string;
srLinearSystemPoint({
lineNumber,
pointSequence,
x,
y,
}: {
lineNumber: number;
pointSequence: number;
x: string;
y: string;
}): string;
// The above strings are used for interactive graph SR descriptions.
};

Expand Down Expand Up @@ -478,6 +503,11 @@ export const strings: {
srAngleGraphAriaLabel: "An angle on a coordinate plane.",
srAngleGraphAriaDescription:
"The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(startingSideX)s comma %(startingSideY)s and a point on the ending side at %(endingSideX)s comma %(endingSideY)s",
srLinearSystemGraph: "Two lines on a coordinate plane.",
srLinearSystemPoints:
"Line %(lineNumber)s has two points, point 1 at %(point1X)s comma %(point1Y)s and point 2 at %(point2X)s comma %(point2Y)s.",
srLinearSystemPoint:
"Point %(pointSequence)s on line %(lineNumber)s at %(x)s comma %(y)s.",
// The above strings are used for interactive graph SR descriptions.
};

Expand Down Expand Up @@ -695,5 +725,10 @@ export const mockStrings: PerseusStrings = {
endingSideY,
}) =>
`The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`,
srLinearSystemGraph: "Two lines on a coordinate plane.",
srLinearSystemPoints: ({lineNumber, point1X, point1Y, point2X, point2Y}) =>
`Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`,
srLinearSystemPoint: ({lineNumber, pointSequence, x, y}) =>
`Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`,
// The above strings are used for interactive graph SR descriptions.
};
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {vec} from "mafs";
import * as React from "react";

import {usePerseusI18n} from "../../../components/i18n-context";
import a11y from "../../../util/a11y";
import {X, Y, calculateAngleInDegrees, getClockwiseAngle, polar} from "../math";
import {findIntersectionOfRays} from "../math/geometry";
import {actions} from "../reducer/interactive-graph-action";
Expand Down Expand Up @@ -215,7 +216,7 @@ function AngleGraph(props: AngleGraphProps) {
}
ariaLabel={initialSideAriaLabel}
/>
<g id="angle-description" style={{display: "hidden"}}>
<g id="angle-description" style={a11y.srOnly}>
{wholeAngleDescription}
</g>
</g>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as React from "react";
import {useRef} from "react";

import {usePerseusI18n} from "../../../components/i18n-context";
import a11y from "../../../util/a11y";
import {snap, X, Y} from "../math";
import {actions} from "../reducer/interactive-graph-action";
import {getRadius} from "../reducer/interactive-graph-state";
Expand Down Expand Up @@ -103,10 +104,10 @@ function CircleGraph(props: CircleGraphProps) {
/>
{/* Hidden elements to provide the descriptions for the
circle and radius point's `aria-describedby` properties. */}
<g id={radiusId} style={{display: "hidden"}}>
<g id={radiusId} style={a11y.srOnly}>
{srCircleRadius}
</g>
<g id={outerPointsId} style={{display: "hidden"}}>
<g id={outerPointsId} style={a11y.srOnly}>
{srCircleOuterPoints}
</g>
</g>
Expand Down
Loading
Loading