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);