diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx
index d0b2183c34..e6dfa9bc94 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx
@@ -64,112 +64,6 @@ describe("Linear System graph screen reader", () => {
);
});
- test("should have aria labels and describedbys for both points and grab handle on the line", () => {
- // Arrange
- render(
- ,
- );
-
- // Act
- // Moveable elements: point 1, grab handle, point 2
- const movableElements = screen.getAllByRole("button");
- const [
- line1Point1,
- line1Grab,
- line1Point2,
- line2Point1,
- line2Grab,
- line2Point2,
- ] = movableElements;
-
- // Assert
- // Check aria-label and describedby on interactive elements.
- // (The actual description text is tested separately below.)
- expect(line1Point1).toHaveAttribute(
- "aria-label",
- "Point 1 on line 1 at -5 comma 5.",
- );
- // We don't know the exact ID because of React.useID(), but we can
- // check the suffix.
- expect(line1Point1.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line1Point1.getAttribute("aria-describedby")).toContain(
- "-slope",
- );
-
- expect(line1Grab).toHaveAttribute(
- "aria-label",
- "Line 1 from -5 comma 5 to 5 comma 5.",
- );
- expect(line1Grab.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line1Grab.getAttribute("aria-describedby")).toContain("-slope");
-
- expect(line1Point2).toHaveAttribute(
- "aria-label",
- "Point 2 on line 1 at 5 comma 5.",
- );
- expect(line1Point2.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line1Point2.getAttribute("aria-describedby")).toContain(
- "-slope",
- );
-
- expect(line2Point1).toHaveAttribute(
- "aria-label",
- "Point 1 on line 2 at -5 comma -5.",
- );
- // We don't know the exact ID because of React.useID(), but we can
- // check the suffix.
- expect(line2Point1.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line2Point1.getAttribute("aria-describedby")).toContain(
- "-slope",
- );
-
- expect(line2Grab).toHaveAttribute(
- "aria-label",
- "Line 2 from -5 comma -5 to 5 comma -5.",
- );
- expect(line2Grab.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line2Grab.getAttribute("aria-describedby")).toContain("-slope");
-
- expect(line2Point2).toHaveAttribute(
- "aria-label",
- "Point 2 on line 2 at 5 comma -5.",
- );
- expect(line2Point2.getAttribute("aria-describedby")).toContain(
- "-intercept",
- );
- expect(line2Point2.getAttribute("aria-describedby")).toContain(
- "-slope",
- );
- });
-
- test("points description should include points info", () => {
- // Arrange
- render(
- ,
- );
-
- // Act
- const linearSystemGraph = screen.getByLabelText(overallGraphLabel);
-
- // Assert
- expect(linearSystemGraph).toHaveTextContent(
- "Line 1 has two points, point 1 at -5 comma 5 and point 2 at 5 comma 5.",
- );
- expect(linearSystemGraph).toHaveTextContent(
- "Line 2 has two points, point 1 at -5 comma -5 and point 2 at 5 comma -5.",
- );
- });
-
// Test each line in the linear system graph separately.
describe.each`
lineSequence
@@ -285,6 +179,33 @@ describe("Linear System graph screen reader", () => {
);
});
+ test.each`
+ element | index
+ ${"point1"} | ${0}
+ ${"grabHandle"} | ${1}
+ ${"point2"} | ${2}
+ `("should have describedby on all interactive elements", ({index}) => {
+ // Arrange
+ render(
+ ,
+ );
+
+ // Act
+ const interactiveElements = screen.getAllByRole("button");
+ const element = interactiveElements[index + (lineSequence - 1) * 3];
+
+ // Assert
+ expect(element.getAttribute("aria-describedby")).toContain(
+ "-slope",
+ );
+ expect(element.getAttribute("aria-describedby")).toContain(
+ "-intercept",
+ );
+ });
+
test.each`
elementName | index
${"point1"} | ${0}
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx
index e3110b2253..4cc8eff7c0 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx
@@ -61,7 +61,6 @@ const LinearGraph = (props: LinearGraphProps, key: number) => {
// Outer line minimal description
aria-label={strings.srLinearGraph}
aria-describedby={`${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`}
- role="figure"
>