add placeholder for grab handle aria label

Khan · Jan 15, 2025 · d070c09 · d070c09
1 parent 1206856
commit d070c09
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts
@@ -264,6 +264,7 @@ export type PerseusStrings = {
     }: {
         countOfSegments: number;
     }) => string;
+    srIndividualSegmentAriaLabel: string;
     srIndividualSegmentAriaDescription: ({
         point1X,
         point1Y,
@@ -522,6 +523,7 @@ export const strings: {
     srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
     srMultipleSegmentGraphAriaLabel:
         "%(countOfSegments)s segments on a coordinate plane.",
+    srIndividualSegmentAriaLabel: "PLACEHOLDER: PLEASE UPDATE ME",
     srIndividualSegmentAriaDescription:
         "Segment %(indexOfSegment)s: Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s. Segment length %(length)s units.",
     srSingleSegmentGraphEndpointAriaLabel:
@@ -748,6 +750,7 @@ export const mockStrings: PerseusStrings = {
     srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
     srMultipleSegmentGraphAriaLabel: ({countOfSegments}) =>
         `${countOfSegments} segments on a coordinate plane.`,
+    srIndividualSegmentAriaLabel: "PLACEHOLDER: PLEASE UPDATE ME",
     srIndividualSegmentAriaDescription: ({
         point1X,
         point1Y,

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx
@@ -42,6 +42,8 @@ const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
     }
 
     const wholeSegmentGraphAriaLabel = getWholeSegmentGraphAriaLabel();
+    // STRING FOR THIS SHOULD BE UPDATED PRIOR TO BEING TRANSLATED
+    const individualSegmentAriaLabel = strings.srIndividualSegmentAriaLabel;
 
     function getIndividualSegmentAriaDescription(
         segment: PairOfPoints,
@@ -95,6 +97,7 @@ const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
         >
             {segments?.map((segment, i) => (
                 <g
+                    aria-label={individualSegmentAriaLabel}
                     aria-describedby={`segment-description-${segmentUniqueId}-${i}`}
                     key={`${segmentUniqueId}-${i}`}
                 >