Merge pull request #5240 from SamHecquet/fix/radio-aria-describedby

fix(radio): add aria-describedby to improve accessibility
chakra-ui · Dec 15, 2021 · b983e4c · b983e4c · vercel · Dec 15, 2021
2 parents 2bc045a + f6fd9d8
commit b983e4c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/olive-lemons-lay.md b/.changeset/olive-lemons-lay.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/radio": patch
+---
+
+Add `aria-describedby` to the radio props to improve accessibility
diff --git a/packages/radio/src/use-radio.ts b/packages/radio/src/use-radio.ts
@@ -70,6 +70,10 @@ export interface UseRadioProps {
    * @internal
    */
   "data-radiogroup"?: any
+  /**
+   * Refers to the `id` of the element that labels the radio element.
+   */
+  "aria-describedby"?: string
 }
 
 export function useRadio(props: UseRadioProps = {}) {
@@ -87,6 +91,7 @@ export function useRadio(props: UseRadioProps = {}) {
     value,
     id: idProp,
     "data-radiogroup": dataRadioGroup,
+    "aria-describedby": ariaDescribedBy,
     ...htmlProps
   } = props
 
@@ -216,6 +221,7 @@ export function useRadio(props: UseRadioProps = {}) {
         "aria-disabled": ariaAttr(trulyDisabled),
         "aria-required": ariaAttr(isRequired),
         "data-readonly": dataAttr(isReadOnly),
+        "aria-describedby": ariaDescribedBy,
         style: visuallyHiddenStyle,
       }
     },
@@ -235,6 +241,7 @@ export function useRadio(props: UseRadioProps = {}) {
       isReadOnly,
       isRequired,
       isInvalid,
+      ariaDescribedBy,
     ],
   )