fix(RTE): Move aria-describedby to textbox element (#55)

* fix(RTE): Move aria-describedby to textbox element * Add changeset
cultureamp · Nov 24, 2023 · c522def · c522def
1 parent d987feb
commit c522def
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/.changeset/large-ants-attend.md b/.changeset/large-ants-attend.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/rich-text-editor": patch
+---
+
+aria-describedby put on textbox element instead of container div
diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.tsx
@@ -44,6 +44,54 @@ const TestRTE = (
   )
 }
 
+describe("accessible name and description", () => {
+  it("has the correct accessible name", () => {
+    render(<TestRTE labelText="Some label" />)
+    expect(
+      screen.getByRole("textbox", { name: "Some label" })
+    ).toBeInTheDocument()
+  })
+
+  it("has the correct name and description when added with aria-labelledby and aria-describedby", () => {
+    render(
+      <>
+        <div id="external-label">External label</div>
+        <div id="external-description">External description</div>
+        <TestRTE
+          aria-labelledby="external-label"
+          aria-describedby="external-description"
+        />
+      </>
+    )
+    expect(
+      screen.getByRole("textbox", {
+        name: "External label",
+        description: "External description",
+      })
+    ).toBeInTheDocument()
+  })
+
+  it("has the correct description with a description passed in, validation error, and aria-describedby", () => {
+    render(
+      <>
+        <div id="external-description">External description</div>
+        <TestRTE
+          labelText="Some label"
+          description="Some help text"
+          validationMessage="Some error"
+          aria-describedby="external-description"
+        />
+      </>
+    )
+    expect(
+      screen.getByRole("textbox", {
+        name: "Some label",
+        description: "Some error Some help text External description",
+      })
+    ).toBeInTheDocument()
+  })
+})
+
 describe("RTE receives list controls", () => {
   it("renders list buttons when receiving a list controls", () => {
     render(<TestRTE />)

diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx
@@ -82,6 +82,15 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
   )
   const [labelId] = useState<string>(labelledBy || v4())
   const [editorId] = useState<string>(v4())
+  const validationMessageAria = validationMessage
+    ? `${editorId}-rte-validation-message`
+    : ""
+  const descriptionAria = description ? `${editorId}-rte-description` : ""
+  const ariaDescribedBy = classnames(
+    validationMessageAria,
+    descriptionAria,
+    describedBy
+  )
 
   const useRichTextEditorResult = (():
     | ReturnType<typeof useRichTextEditor>
@@ -99,7 +108,11 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
           schema,
           plugins: getPlugins(controls, schema),
         }),
-        { "aria-labelledby": labelId, role: "textbox" }
+        {
+          "aria-labelledby": labelId,
+          role: "textbox",
+          "aria-describedby": ariaDescribedBy,
+        }
       )
     } catch {
       return new Error("Bad data error")
@@ -124,17 +137,6 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
     // Including `onContentChange` in the dependencies here will cause a 'Maximum update depth exceeded' issue
   }, [editorState])
 
-  const validationMessageAria = validationMessage
-    ? `${editorId}-rte-validation-message`
-    : ""
-  const descriptionAria = description ? `${editorId}-rte-description` : ""
-
-  const ariaDescribedBy = classnames(
-    validationMessageAria,
-    descriptionAria,
-    describedBy
-  )
-
   return (
     <>
       {!labelledBy && labelText && <Label id={labelId} labelText={labelText} />}
@@ -173,7 +175,6 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
             classNameOverride,
             controls != null && controls.length > 0 && styles.hasToolbar
           )}
-          aria-describedby={ariaDescribedBy}
           {...restProps}
         />
       </div>