@khanacademy/wonder-blocks-form - npm Package Compare versions

Comparing version 2.2.3 to 2.3.0

dist/es/index.js

@@ -1054,3 +1054,4 @@ import _extends from '@babel/runtime/helpers/extends';
       autoComplete,
-      forwardedRef
+      forwardedRef,
+      ariaDescribedby
     } = this.props;
@@ -1066,3 +1067,3 @@ return /*#__PURE__*/createElement(IDProvider, {
         id: `${uniqueId}-field`,
-        "aria-describedby": `${uniqueId}-error`,
+        "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
@@ -1069,0 +1070,0 @@ testId: testId && `${testId}-field`,

dist/index.js

@@ -938,3 +938,4 @@ module.exports =
       autoComplete,
-      forwardedRef
+      forwardedRef,
+      ariaDescribedby
     } = this.props;
@@ -950,3 +951,3 @@ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["IDProvider"], {
         id: `${uniqueId}-field`,
-        "aria-describedby": `${uniqueId}-error`,
+        "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
@@ -953,0 +954,0 @@ testId: testId && `${testId}-field`,

package.json

 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "design": "v1",
@@ -34,3 +34,3 @@ "description": "Form components for Wonder Blocks.",
   },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+  "gitHead": "61090a61b6e9d2a735976d5fd53a15d06f10c853"
 }

src/components/__tests__/labeled-text-field.test.js

 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import {render, screen} from "@testing-library/react";
 
@@ -189,2 +190,45 @@ import {StyleSheet} from "aphrodite";
 
+    it("ariaDescribedby prop sets aria-describedby", () => {
+        // Arrange
+        const ariaDescription = "aria description";
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                ariaDescribedby={ariaDescription}
+            />,
+        );
+
+        // Assert
+        const input = screen.getByRole("textbox");
+        expect(input.getAttribute("aria-describedby")).toEqual(ariaDescription);
+    });
+
+    it("auto-generates a unique error when ariaDescribedby is not passed in", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                // ariaDescribedby is not passed in
+            />,
+        );
+
+        // Assert
+        // Since the generated aria-describedby is unique,
+        // we cannot know what it will be.
+        // We only test if the aria-describedby attribute starts with
+        // "uid-" and ends with "-error".
+        const input = screen.getByRole("textbox");
+        expect(input.getAttribute("aria-describedby")).toMatch(
+            /^uid-.*-error$/,
+        );
+    });
+
     it("validate prop is called when input changes", () => {
@@ -191,0 +235,0 @@ // Arrange

src/components/labeled-text-field.js

@@ -45,2 +45,7 @@ // @flow
     /**
+     * Identifies the element or elements that describes this text field.
+     */
+    ariaDescribedby?: string | Array<string>,
+
+    /**
      * Provide a validation for the input value.
@@ -211,2 +216,3 @@ * Return a string error message or null | void for a valid input.
             forwardedRef,
+            ariaDescribedby,
         } = this.props;
@@ -224,3 +230,7 @@
                                 id={`${uniqueId}-field`}
-                                aria-describedby={`${uniqueId}-error`}
+                                aria-describedby={
+                                    ariaDescribedby
+                                        ? ariaDescribedby
+                                        : `${uniqueId}-error`
+                                }
                                 aria-invalid={
@@ -227,0 +237,0 @@ this.state.error ? "true" : "false"

No alert changes

Improved metrics

Total package byte prevSize

485264

increased by0.37%

Lines of code

6642

increased by0.74%

No dependency changes