From 2af6ac2cbc11730d027cf1f391958ed403ef2898 Mon Sep 17 00:00:00 2001
From: samithaf <fernando.samitha@gmail.com>
Date: Mon, 4 Dec 2023 12:49:32 +1100
Subject: [PATCH] fixes a11y issue in Compacta storybook

---
 package.json                                         |  2 +-
 .../ui/src/components/compacta/compacta.stories.tsx  | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 3f01ad35b..195e449cb 100644
--- 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
index 546030eea..339353f4f 100644
--- 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);