feat: associate all inputs with labels via unique IDs (#113)

* feat: surround all inputs by labels for better a11y * reafactor: use unique IDs for html label association * feat: add support for non-react setups * feat: add documentation for useIdWithFallback * fix: run formatter * refactor: import useId directly
ory · Jul 11, 2023 · 518080e · 518080e
1 parent e81d958
commit 518080e
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 60 deletions.
diff --git a/src/common/useIdWithFallback.ts b/src/common/useIdWithFallback.ts
@@ -0,0 +1,18 @@
+// Copyright © 2023 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { useId } from "react"
+
+/**
+ * A function to obtain a unique ID. If react is available, this
+ * is just a wrapper for React.useId(), meaning the ID will be
+ * consistent across SSR and CSR. Otherwise, it will be a random and
+ * unique ID on every call.
+ */
+export const useIdWithFallback = () => {
+  try {
+    return useId()
+  } catch (e) {
+    return Math.random().toString(36).substring(2)
+  }
+}
diff --git a/src/react-components/checkbox.tsx b/src/react-components/checkbox.tsx
@@ -7,6 +7,7 @@ import {
   typographyStyle,
 } from "../theme"
 import { Message, MessageStyleProps } from "./message"
+import { useIdWithFallback } from "../common/useIdWithFallback"
 
 export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
@@ -26,7 +27,7 @@ export const Checkbox = ({
   dataTestid,
   ...props
 }: CheckboxProps): JSX.Element => {
-  const id = props.id ?? Math.random().toString(36).substring(2)
+  const id = props.id ?? useIdWithFallback()
   return (
     <div
       data-testid={dataTestid}

diff --git a/src/react-components/codebox.tsx b/src/react-components/codebox.tsx
@@ -8,6 +8,7 @@ import {
   gridStyle,
   typographyStyle,
 } from "../theme"
+import { useIdWithFallback } from "../common/useIdWithFallback"
 
 export interface CodeBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode
@@ -19,7 +20,7 @@ export const CodeBox = ({
   className,
   ...props
 }: CodeBoxProps): JSX.Element => {
-  const id = Math.random().toString(36).substring(2)
+  const id = useIdWithFallback()
   return (
     <div
       className={cn(className, gridStyle({ gap: 16 }), codeboxStyle)}

diff --git a/src/react-components/input-field.tsx b/src/react-components/input-field.tsx
@@ -7,6 +7,7 @@ import {
   typographyStyle,
 } from "../theme"
 import { Message, MessageStyleProps } from "./message"
+import { useIdWithFallback } from "../common/useIdWithFallback"
 
 export interface InputFieldProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
@@ -26,18 +27,24 @@ export const InputField = ({
   fullWidth,
   className,
   dataTestid,
+  id,
   ...props
 }: InputFieldProps): JSX.Element => {
+  const inputId = id ?? useIdWithFallback()
+
   return (
     <div
       data-testid={dataTestid}
       className={cn(className, gridStyle({ gap: 4 }))}
     >
       {title && (
-        <div className={typographyStyle({ size: "small", type: "regular" })}>
+        <label
+          htmlFor={inputId}
+          className={typographyStyle({ size: "small", type: "regular" })}
+        >
           {title}{" "}
           {props.required && <span className={inputFieldTitleStyle}>*</span>}
-        </div>
+        </label>
       )}
       <input
         className={cn(
@@ -46,6 +53,7 @@ export const InputField = ({
         )}
         style={{ width: fullWidth ? "100%" : "auto" }}
         placeholder={" "} // we need this so the input css field border is not green by default
+        id={inputId}
         {...props}
       />
       {typeof helperMessage === "string" ? (

diff --git a/src/react-components/nav.tsx b/src/react-components/nav.tsx
@@ -12,6 +12,7 @@ import {
   typographyStyle,
 } from "../theme"
 import { MenuLink, MenuLinkProps } from "./menu-link"
+import { useIdWithFallback } from "../common/useIdWithFallback"
 
 export type NavSectionLinks = {
   name: string
@@ -37,60 +38,66 @@ export const Nav = ({
   navSections,
   className,
   ...props
-}: NavProps) => (
-  <nav role="navigation" className={cn(navStyle, className)} {...props}>
-    <input id="collapse-nav" type="checkbox" />
-    <div
-      className={cn(
-        navSectionTitleStyle,
-        typographyStyle({ size: "caption" }),
-        colorSprinkle({ color: "accentDefault" }),
-      )}
-    >
-      {navTitle}
-      <label htmlFor="collapse-nav">
-        <i className={cn("fa", "fa-bars")}></i>
-        <i className={cn("fa", "fa-xmark")}></i>
-      </label>
-    </div>
-    <ul
-      className={cn(
-        navMainSectionStyle,
-        navMenuSectionStyle,
-        gridStyle({ gap: 24 }),
-      )}
-    >
-      {navSections.map((section, key) => (
-        <li
-          key={key}
-          {...(section.floatBottom && { className: navSectionBottom })}
-        >
-          {section.title && (
-            <div
-              className={cn(
-                typographyStyle({ size: "xsmall", type: "bold" }),
-                colorSprinkle({ color: "foregroundDefault" }),
-                navSectionTitleStyle,
-              )}
-            >
-              {section.title}
-              <i className={`fa fa-${section.titleIcon}`}></i>
-            </div>
-          )}
-          <ul className={navMenuSectionStyle}>
-            {section.links.map(({ testId, ...link }, key) => (
-              <li
-                key={key}
-                {...(link.selected && { className: navMenuLinkSelectedStyle })}
+}: NavProps) => {
+  const collapseNavId = `collapse-ory-elements-nav-${useIdWithFallback()}`
+
+  return (
+    <nav role="navigation" className={cn(navStyle, className)} {...props}>
+      <input id={collapseNavId} type="checkbox" />
+      <div
+        className={cn(
+          navSectionTitleStyle,
+          typographyStyle({ size: "caption" }),
+          colorSprinkle({ color: "accentDefault" }),
+        )}
+      >
+        {navTitle}
+        <label htmlFor={collapseNavId}>
+          <i className={cn("fa", "fa-bars")}></i>
+          <i className={cn("fa", "fa-xmark")}></i>
+        </label>
+      </div>
+      <ul
+        className={cn(
+          navMainSectionStyle,
+          navMenuSectionStyle,
+          gridStyle({ gap: 24 }),
+        )}
+      >
+        {navSections.map((section, key) => (
+          <li
+            key={key}
+            {...(section.floatBottom && { className: navSectionBottom })}
+          >
+            {section.title && (
+              <div
+                className={cn(
+                  typographyStyle({ size: "xsmall", type: "bold" }),
+                  colorSprinkle({ color: "foregroundDefault" }),
+                  navSectionTitleStyle,
+                )}
               >
-                <MenuLink data-testid={testId} {...link}>
-                  {link.name}
-                </MenuLink>
-              </li>
-            ))}
-          </ul>
-        </li>
-      ))}
-    </ul>
-  </nav>
-)
+                {section.title}
+                <i className={`fa fa-${section.titleIcon}`}></i>
+              </div>
+            )}
+            <ul className={navMenuSectionStyle}>
+              {section.links.map(({ testId, ...link }, key) => (
+                <li
+                  key={key}
+                  {...(link.selected && {
+                    className: navMenuLinkSelectedStyle,
+                  })}
+                >
+                  <MenuLink data-testid={testId} {...link}>
+                    {link.name}
+                  </MenuLink>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}