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

anakaren-rojas · 2024-12-18T22:30:43Z

Summary:

Adds aria label and description to whole line segment graph
Adds copy that distinguishes between single line segment on a coordinate plane and multiple line segments on a coordinate plane
Adds aria label for individual end points of line segment

Issue: LEMS-1733

Test plan:

Navigate to Chromatic
Select Line Segment Interactive Graph from drop down
Validate screen reader can read line segment

Expected behavior

Single Segment

Screen reader reads aria label for whole graph: A line segment on a coordinate plane.
Screen reader reads aria description for whole graph: 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

Screen reader reads aria label for whole graph: {Number of segments} segment on a coordinate plane.
Screen reader reads aria description for whole graph: {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

When selected, screen reader reads aria label for end points: Endpoint ${endpointNumber} at ${x} comma ${y}
When moving a point, aria labels and descriptions adjust to include new end points and length, as appropriate

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

github-actions · 2024-12-18T22:33:13Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (30061d3) and published it to npm. You
can install it using the tag PR2032.

Example:

yarn add @khanacademy/perseus@PR2032

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2032

github-actions · 2024-12-18T22:33:36Z

Size Change: +1.02 kB (+0.07%)

Total Size: 1.47 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	396 kB	+755 B (+0.19%)
`packages/perseus/dist/es/strings.js`	5.37 kB	+270 B (+5.3%)	🔍

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	86.8 kB
`packages/math-input/dist/es/index.js`	77.6 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	27.1 kB
`packages/perseus-editor/dist/es/index.js`	689 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	113 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

nishasy

A couple of small requests.

packages/perseus/src/strings.ts

packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx

nishasy · 2024-12-26T21:47:34Z

packages/perseus/src/strings.ts

+    srAngleGraphAriaLabel: {
+        context:
+            "Screenreader-accessible label for an angle on a coordinate plane.",
+        message: "An angle on a coordinate plane",


Can you add a period to the end of this?

nishasy · 2024-12-26T22:17:32Z

packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx

+
+    function getLengthOfSegment(segment: PairOfPoints) {
+        return kpoint.distanceToPoint(...segment);
+    }


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.

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

nishasy · 2024-12-26T22:19:30Z

packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx

-            aria-label={wholeSegmentAriaLabel}
-            aria-describedby="segment-description"
-        >
+        <>


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.

nishasy · 2024-12-26T22:20:23Z

packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx

+                        }}
+                    />
+                    <g
+                        id={`segment-description-${i}`}


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.

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

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.

nishasy

Nice! This is really coming together.

Note: We'll still have to figure out the aria label/description for the middle section (missing from the SRUX doc I think) after the holidays.

anakaren-rojas · 2025-01-15T19:00:37Z

packages/perseus/src/strings.ts

+    srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
+    srMultipleSegmentGraphAriaLabel:
+        "%(countOfSegments)s segments on a coordinate plane.",
+    srIndividualSegmentAriaLabel: "PLACEHOLDER: PLEASE UPDATE ME",


@nishasy FYI - I added a placeholder for inner aria label, which should be updated when the design copy is finalized

catandthemachines

LGTM!

catandthemachines · 2025-01-21T23:33:51Z

packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx

@@ -1382,7 +1383,7 @@ describe("Interactive Graph", function () {

        it("should not have an aria-label or description if they are not provided", async () => {
            // Arrange
-            const {container} = renderQuestion(segmentQuestion, apiOptions);


@nishasy I'm assuming Anakaren used the "nonQuestion" testdata because segmentQuestions now have an aria-label?

Ah, I just changed that. Yes, it's because the graph container now has a description (and will for all graph types eventually), so I think only the None type graph might not have one.

@Myranae

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Major Changes - [#1965](#1965) [`0f2bec314`](0f2bec3) Thanks [@Myranae](https://github.com/Myranae)! - Refactor the LabelImage widget to separate out answers from userInput into scoringData - [#2134](#2134) [`117e78d03`](117e78d) Thanks [@handeyeco](https://github.com/handeyeco)! - Move widget ID utils to perseus-core - [#2153](#2153) [`29a1c656e`](29a1c65) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Rename all instances of the term "ScoringData" back to "Rubric" - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core ### Minor Changes - [#2002](#2002) [`a1e22a4e3`](a1e22a4) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Add and improve types for scoring and validation - [#2155](#2155) [`0df0b1940`](0df0b19) Thanks [@benchristel](https://github.com/benchristel)! - Move `parsePerseusItem`, `parseAndMigratePerseusItem`, `parseAndMigratePerseusArticle`, `isSuccess`, and `isFailure` to the `perseus-core` package, and deprecate the equivalent exports from the `perseus` package. - [#2032](#2032) [`22d108fdc`](22d108f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - adds aria labels to line segment - [#2038](#2038) [`e6f7cc91e`](e6f7cc9) Thanks [@Myranae](https://github.com/Myranae)! - Fix some naming discrepancies related to validation and simplify Matcher ScoringData type - [#2083](#2083) [`4c10af109`](4c10af1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Use empty widgets check in scoring function - [#2000](#2000) [`0db68d222`](0db68d2) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Change empty widgets check in Renderer to depend only on data available (and not on scoring data) - [#2137](#2137) [`b4b3a3dbb`](b4b3a3d) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the orderer widget - [#2006](#2006) [`879d2a501`](879d2a5) Thanks [@Myranae](https://github.com/Myranae)! - Rename usages of rubric to scoringData - [#2139](#2139) [`32cc4a45b`](32cc4a4) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Expression widget - [#2016](#2016) [`55ad836c6`](55ad836) Thanks [@Myranae](https://github.com/Myranae)! - Introduces a validation function for the label-image widget (extracted from label-image scoring function). ### Patch Changes - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#1997](#1997) [`0464a760f`](0464a76) Thanks [@Myranae](https://github.com/Myranae)! - Remove unused CS Program rubric type - [#2110](#2110) [`e2f2cee9f`](e2f2cee) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Linear - Add the interactive elements linear description to the whole graph container - [#2136](#2136) [`ffaa3904a`](ffaa390) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Quadratic - add screen reader support for Quadratic interactive graph - [#1996](#1996) [`b6623bb56`](b6623bb) Thanks [@Myranae](https://github.com/Myranae)! - Remove unused iframe rubric type - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - [#2152](#2152) [`f8c9d3574`](f8c9d35) Thanks [@Myranae](https://github.com/Myranae)! - Move the categorizer, orderer, and expression public widget options functions from perseus package to their widget folders in perseus-core - [#1995](#1995) [`99cd254de`](99cd254) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - TESTS: swap input-number out of renderer tests as it is deprecated - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`29a1c656e`](29a1c65), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Major Changes - [#2153](#2153) [`29a1c656e`](29a1c65) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Rename all instances of the term "ScoringData" back to "Rubric" ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2158](#2158) [`8f8955718`](8f89557) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Re-export widget id support function: addWidget - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2148](#2148) [`685774f2e`](685774f) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Matcher upgrade logic to Perseus Core - [#2145](#2145) [`8a489600e`](8a48960) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 2) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#2155](#2155) [`0df0b1940`](0df0b19) Thanks [@benchristel](https://github.com/benchristel)! - Move `parsePerseusItem`, `parseAndMigratePerseusItem`, `parseAndMigratePerseusArticle`, `isSuccess`, and `isFailure` to the `perseus-core` package, and deprecate the equivalent exports from the `perseus` package. - [#2144](#2144) [`dc8118aa1`](dc8118a) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 1) - [#2150](#2150) [`82fa90299`](82fa902) Thanks [@handeyeco](https://github.com/handeyeco)! - Move InteractiveGraph widget upgrade to Perseus Core - [#2134](#2134) [`117e78d03`](117e78d) Thanks [@handeyeco](https://github.com/handeyeco)! - Move widget ID utils to perseus-core - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - [#2149](#2149) [`75f43a8f4`](75f43a8) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Table upgrade logic to Perseus Core - [#2147](#2147) [`ebf3695b6`](ebf3695) Thanks [@handeyeco](https://github.com/handeyeco)! - Move upgrade logic for NumberLine to Perseus Core ### Patch Changes - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2137](#2137) [`b4b3a3dbb`](b4b3a3d) Thanks [@Myranae](https://github.com/Myranae)! - Move util files out of widget folder in perseus package to utils folder in perseus-core - [#2152](#2152) [`f8c9d3574`](f8c9d35) Thanks [@Myranae](https://github.com/Myranae)! - Move the categorizer, orderer, and expression public widget options functions from perseus package to their widget folders in perseus-core - [#2139](#2139) [`32cc4a45b`](32cc4a4) Thanks [@Myranae](https://github.com/Myranae)! - Move util files out of widget folder in perseus package to utils folder in perseus-core ## @khanacademy/[email protected] ### Minor Changes - [#2015](#2015) [`46623c8f1`](46623c8) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] Re-organize editor and improve its UI - [#2015](#2015) [`46623c8f1`](46623c8) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - Adjust editor to organize settings more logically ### Patch Changes - [#2142](#2142) [`d7bcb14c3`](d7bcb14) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Radio upgrade logic to Perseus Core - [#2148](#2148) [`685774f2e`](685774f) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Matcher upgrade logic to Perseus Core - [#2145](#2145) [`8a489600e`](8a48960) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 2) - [#2122](#2122) [`1a75ca628`](1a75ca6) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Type and test fixes for new MockWidget (isolating to be seen only in tests) - [#2143](#2143) [`459c25074`](459c250) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Passage widgets upgrade logic to Perseus Core - [#2144](#2144) [`dc8118aa1`](dc8118a) Thanks [@handeyeco](https://github.com/handeyeco)! - Move simple widget upgrade logic to Perseus Core (pt 1) - [#2150](#2150) [`82fa90299`](82fa902) Thanks [@handeyeco](https://github.com/handeyeco)! - Move InteractiveGraph widget upgrade to Perseus Core - [#1965](#1965) [`0f2bec314`](0f2bec3) Thanks [@Myranae](https://github.com/Myranae)! - Refactor the LabelImage widget to separate out answers from userInput into scoringData - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - [#2135](#2135) [`7a984eba6`](7a984eb) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Expression WidgetOptions logic to core - [#2141](#2141) [`1355d6cfc`](1355d6c) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Measurer upgrade logic to Perseus Core - [#2149](#2149) [`75f43a8f4`](75f43a8) Thanks [@handeyeco](https://github.com/handeyeco)! - Move Table upgrade logic to Perseus Core - [#2147](#2147) [`ebf3695b6`](ebf3695) Thanks [@handeyeco](https://github.com/handeyeco)! - Move upgrade logic for NumberLine to Perseus Core - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`a1e22a4e3`](a1e22a4), [`0464a760f`](0464a76), [`0df0b1940`](0df0b19), [`22d108fdc`](22d108f), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`e2f2cee9f`](e2f2cee), [`ffaa3904a`](ffaa390), [`0f2bec314`](0f2bec3), [`b4b3a3dbb`](b4b3a3d), [`e6f7cc91e`](e6f7cc9), [`4c10af109`](4c10af1), [`b6623bb56`](b6623bb), [`0db68d222`](0db68d2), [`bdbdafe5d`](bdbdafe), [`117e78d03`](117e78d), [`b4b3a3dbb`](b4b3a3d), [`29a1c656e`](29a1c65), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`879d2a501`](879d2a5), [`32cc4a45b`](32cc4a4), [`99cd254de`](99cd254), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`55ad836c6`](55ad836), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2124](#2124) [`bdbdafe5d`](bdbdafe) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonder-blocks dependences. - Updated dependencies \[[`8f8955718`](8f89557), [`d7bcb14c3`](d7bcb14), [`685774f2e`](685774f), [`8a489600e`](8a48960), [`1a75ca628`](1a75ca6), [`459c25074`](459c250), [`0df0b1940`](0df0b19), [`dc8118aa1`](dc8118a), [`82fa90299`](82fa902), [`b4b3a3dbb`](b4b3a3d), [`117e78d03`](117e78d), [`7a984eba6`](7a984eb), [`f8c9d3574`](f8c9d35), [`1355d6cfc`](1355d6c), [`75f43a8f4`](75f43a8), [`32cc4a45b`](32cc4a4), [`ebf3695b6`](ebf3695)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected]

anakaren-rojas added 2 commits December 18, 2024 14:29

docs(changeset): adds aria labels to line segment

776c38b

add aria labels to line segment

bf27d16

anakaren-rojas self-assigned this Dec 18, 2024

anakaren-rojas changed the title ~~docs(changeset): adds aria labels to line segment~~ feat(LEMS01733): adds aria labels to line segment Dec 18, 2024

anakaren-rojas changed the title ~~feat(LEMS01733): adds aria labels to line segment~~ feat(LEMS-1733): adds aria labels to line segment Dec 18, 2024

use line segment label

76391ec

anakaren-rojas requested review from nishasy and catandthemachines December 18, 2024 23:34

anakaren-rojas marked this pull request as ready for review December 18, 2024 23:34

anakaren-rojas added 3 commits December 18, 2024 16:26

Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment

25b8121

remove role from segment

de68801

Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment

0616ef8

nishasy reviewed Dec 19, 2024

View reviewed changes

anakaren-rojas added 4 commits December 20, 2024 14:56

add description for multiple segments

08fd6bf

update strings

a4f033a

add periods at the end of sentences

67b3bd7

update strings to include multiples and add desc for whole graph

06114d8

nishasy reviewed Dec 26, 2024

View reviewed changes

anakaren-rojas added 5 commits December 27, 2024 09:47

move function outside of component

1f6b8b4

add unique id to the descriptions

822097d

remove unique id from aria described by key

4981fdc

add missing id

bacaad4

readd key

717bd34

nishasy approved these changes Dec 28, 2024

View reviewed changes

anakaren-rojas added 4 commits January 7, 2025 14:05

remove context and message objects

42d5288

Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment

ec9d977

lint fix

072225a

Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment

1206856

add placeholder for grab handle aria label

d070c09

anakaren-rojas commented Jan 15, 2025

View reviewed changes

nishasy added 5 commits January 21, 2025 12:42

Merge branch 'main' into LEMS-1733-add-aria-label-to-line-segment

9221928

Remove unused string. Make the description the label.

2adacae

Add grab handle string

97a9970

Separate length into description

4235cd7

Describe interactive elements in outer graph

30061d3

nishasy self-assigned this Jan 21, 2025

catandthemachines approved these changes Jan 21, 2025

View reviewed changes

nishasy merged commit 22d108f into main Jan 22, 2025
8 checks passed

nishasy deleted the LEMS-1733-add-aria-label-to-line-segment branch January 22, 2025 22:04

khan-actions-bot mentioned this pull request Jan 22, 2025

Version Packages #2140

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

anakaren-rojas commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

nishasy left a comment

nishasy Dec 26, 2024

nishasy Dec 26, 2024

nishasy Dec 28, 2024

nishasy Dec 26, 2024

nishasy Dec 26, 2024

anakaren-rojas Dec 27, 2024

nishasy Dec 27, 2024

nishasy left a comment

anakaren-rojas Jan 15, 2025

catandthemachines left a comment

catandthemachines Jan 21, 2025

nishasy Jan 22, 2025

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

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

Conversation

anakaren-rojas commented Dec 18, 2024 • edited Loading

Summary:

Test plan:

Expected behavior

Single Segment

Multiple Segments

Individual Points

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

github-actions bot commented Dec 18, 2024 • edited Loading

npm Snapshot: Published

github-actions bot commented Dec 18, 2024 • edited Loading

nishasy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishasy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

catandthemachines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anakaren-rojas commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading