fixes a11y issue in Compacta storybook

WestpacGEL · Dec 4, 2023 · 2af6ac2 · 2af6ac2
1 parent abe1722
commit 2af6ac2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "check-types": "turbo run check-types --filter=./packages/* --no-daemon",
     "dev": "turbo run dev --parallel --no-daemon",
     "format": "prettier --check \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md}\"",
-    "format:fix": "prettier --write \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md,*.mdoc}\"",
+    "format:fix": "prettier --write \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md}\"",
     "lint": "turbo run lint --no-daemon",
     "lint:fix": "turbo run lint:fix --no-daemon",
     "new:package": "node ./helpers/create-package/index.js",

diff --git a/packages/ui/src/components/compacta/compacta.stories.tsx b/packages/ui/src/components/compacta/compacta.stories.tsx
@@ -30,9 +30,11 @@ export const Default = () => {
         <Form>
           <Form.Group>
             <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
-            <Form.Hint>Primary title text</Form.Hint>
+            <Form.Hint id={`primary-hint-${id}`}>Primary title text</Form.Hint>
             <Input
+              aria-describedby={`primary-hint-${id}`}
               name={`primary-${id}`}
+              id={`primary-${id}`}
               value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
@@ -42,9 +44,11 @@ export const Default = () => {
           </Form.Group>
           <Form.Group>
             <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
-            <Form.Hint>Secondary title text</Form.Hint>
+            <Form.Hint id={`secondary-hint-${id}`}>Secondary title text</Form.Hint>
             <Input
+              aria-describedby={`secondary-hint-${id}`}
               name={`secondary-${id}`}
+              id={`secondary-${id}`}
               value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
@@ -54,9 +58,11 @@ export const Default = () => {
           </Form.Group>
           <Form.Group>
             <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
-            <Form.Hint>Tertiary title text</Form.Hint>
+            <Form.Hint id={`tertiary-hint-${id}`}>Tertiary title text</Form.Hint>
             <Input
+              aria-describedby={`tertiary-hint-${id}`}
               name={`tertiary-${id}`}
+              id={`tertiary-${id}`}
               value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);