@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-accessibility-visually-hidden.json

@@ -0,0 +1,388 @@
+{
+  "meta": {
+    "id": "Components-VisuallyHidden",
+    "title": "Visually hidden",
+    "exportName": "VisuallyHidden",
+    "description": "Makes content accessible to screen readers but hides it visually.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/visually-hidden/visually-hidden.mdx",
+    "menu": [
+      "Components",
+      "Accessibility",
+      "Visually hidden"
+    ],
+    "route": "components/accessibility/visually-hidden",
+    "tags": [
+      "component",
+      "accessibility",
+      "screen reader",
+      "hidden",
+      "a11y"
+    ],
+    "toc": [
+      {
+        "value": "Basic usage",
+        "href": "#basic-usage",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Focusable content",
+        "href": "#focusable-content",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Inline content",
+        "href": "#inline-content",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Basic usage\n\nJust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the `VisuallyHidden` component.\n\n```jsx\nconst App = () => <VisuallyHidden>I am VisuallyHidden!</VisuallyHidden>;\n```\n\n## Focusable content\n\nIf the content you want to hide visually contains focusable elements, add the\n`isFocusable` property to the `VisuallyHidden` component. The content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n```jsx live\nconst App = () => (\n  <VisuallyHidden isFocusable>\n    <Button>I can have focus</Button>\n  </VisuallyHidden>\n);\n```\n\n## Inline content\n\n`VisuallyHidden` uses a `<div>` element by default to render into the DOM. If\nyou need to hide inline content, you can use the `as` prop to render a `<span>`\nelement instead, keeping the `html` semantics intact.\n\n```jsx live\nconst App = () => (\n  <p>\n    Text that will be visible.\n    <VisuallyHidden as=\"span\">I will blend just in.</VisuallyHidden>\n    Text that will be visible.\n  </p>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Basic usage\n\nJust wrap the content you want to hide visually, but keep accessible to screen\nreaders, with the `VisuallyHidden` component.\n\n```jsx\nconst App = () => <VisuallyHidden>I am VisuallyHidden!</VisuallyHidden>;\n```\n\n## Focusable content\n\nIf the content you want to hide visually contains focusable elements, add the\n`isFocusable` property to the `VisuallyHidden` component. The content then\nbecomes visible if the first focusable element inside is focused with the\n_keyboard_.\n\n```jsx live\nconst App = () => (\n  <VisuallyHidden isFocusable>\n    <Button>I can have focus</Button>\n  </VisuallyHidden>\n);\n```\n\n## Inline content\n\n`VisuallyHidden` uses a `<div>` element by default to render into the DOM. If\nyou need to hide inline content, you can use the `as` prop to render a `<span>`\nelement instead, keeping the `html` semantics intact.\n\n```jsx live\nconst App = () => (\n  <p>\n    Text that will be visible.\n    <VisuallyHidden as=\"span\">I will blend just in.</VisuallyHidden>\n    Text that will be visible.\n  </p>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Focusable content",
+          "href": "#focusable-content",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Inline content",
+          "href": "#inline-content",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Button>\n    <Icons.Delete />\n    <VisuallyHidden>Delete item</VisuallyHidden>\n  </Button>\n);\n```\n\n### Accessibility standards\n\n- **Provide text alternatives for icons:** Use VisuallyHidden to add descriptive\n  text for icon-only buttons or links that is accessible to screen readers but\n  visually hidden.\n- **Don't hide important content:** Only use VisuallyHidden for supplementary\n  text that provides context for assistive technologies, not for essential\n  information that all users need.\n- **Skip links:** Use VisuallyHidden to create skip navigation links that allow\n  keyboard users to bypass repetitive content.\n- **Form labels:** Use for additional context in form labels when visual design\n  already makes the purpose clear.\n- **Accessible names:** Provide accessible names for interactive elements that\n  rely on visual cues (icons, colors, shapes).\n- **Maintain focus visibility:** When VisuallyHidden contains focusable elements\n  (like skip links), ensure they become visible when focused.\n- **Screen reader only instructions:** Use for providing specific instructions\n  that screen reader users need but sighted users don't.\n\n### Resources\n\n- [WebAIM - CSS in Action: Invisible Content](https://webaim.org/techniques/css/invisiblecontent/)\n- [A11y Project - How to hide content](https://www.a11yproject.com/posts/how-to-hide-content/)\n- [WCAG 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html)\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { VisuallyHidden, type VisuallyHiddenProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\n```jsx live-dev\nconst App = () => (\n  <VisuallyHidden>\n    This text is hidden visually but accessible to screen readers\n  </VisuallyHidden>\n);\n```\n\n## Usage examples\n\n### Screen reader-only content\n\nProvide additional context for screen reader users without cluttering the visual interface.\n\n```jsx live-dev\nconst App = () => (\n  <Stack gap=\"400\">\n    <Box>\n      <Text fontWeight=\"bold\">\n        Product Price\n        <VisuallyHidden as=\"span\"> (in US Dollars)</VisuallyHidden>\n      </Text>\n      <Text textStyle=\"xl\">$29.99</Text>\n    </Box>\n    \n    <Box>\n      <Button>\n        <VisuallyHidden>Add to cart: </VisuallyHidden>\n        Add to Cart\n      </Button>\n    </Box>\n  </Stack>\n);\n```\n\n### Focusable content\n\nUse `isFocusable` to make hidden content visible when it receives keyboard focus. This is essential for skip navigation links.\n\n```jsx live-dev\nconst App = () => (\n  <Stack gap=\"400\">\n    <VisuallyHidden isFocusable>\n      <Button>Skip to main content</Button>\n    </VisuallyHidden>\n    \n    <Text color=\"neutral.11\" textStyle=\"sm\">\n      Press Tab to see the skip link appear\n    </Text>\n    \n    <Box p=\"400\" bg=\"neutral.7\" borderRadius=\"md\">\n      <Text fontWeight=\"bold\" mb=\"200\">Main Content</Text>\n      <Text>Focus the skip link with Tab, and it will become visible.</Text>\n    </Box>\n  </Stack>\n);\n```\n\n### Inline vs block content\n\nUse the `as` prop to control whether VisuallyHidden renders as a block (`div`) or inline (`span`) element.\n\n```jsx live-dev\nconst App = () => (\n  <Stack gap=\"400\">\n    <Box>\n      <Text fontWeight=\"bold\" mb=\"200\">Block element (default)</Text>\n      <Text>Before text</Text>\n      <VisuallyHidden>Hidden block content</VisuallyHidden>\n      <Text>After text</Text>\n    </Box>\n    \n    <Box>\n      <Text fontWeight=\"bold\" mb=\"200\">Inline element (as=\"span\")</Text>\n      <Text>\n        Before text\n        <VisuallyHidden as=\"span\"> hidden inline content </VisuallyHidden>\n        after text.\n      </Text>\n    </Box>\n  </Stack>\n);\n```\n\n### Status announcements\n\nProvide status updates that are only announced to screen readers.\n\n```jsx live-dev\nconst App = () => {\n  const [items, setItems] = React.useState<string[]>([]);\n  \n  const addItem = () => {\n    setItems([...items, `Item ${items.length + 1}`]);\n  };\n  \n  const removeItem = (index: number) => {\n    setItems(items.filter((_, i) => i !== index));\n  };\n  \n  return (\n    <Stack gap=\"400\">\n      <Box>\n        <Button onClick={addItem}>Add Item</Button>\n      </Box>\n      \n      <VisuallyHidden role=\"status\" aria-live=\"polite\">\n        {items.length} {items.length === 1 ? 'item' : 'items'} in list\n      </VisuallyHidden>\n      \n      <Stack gap=\"200\">\n        {items.map((item, index) => (\n          <Box \n            key={index} \n            p=\"300\" \n            bg=\"neutral.7\" \n            borderRadius=\"md\"\n            display=\"flex\"\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n          >\n            <Text>{item}</Text>\n            <Button size=\"sm\" onClick={() => removeItem(index)}>\n              Remove\n            </Button>\n          </Box>\n        ))}\n      </Stack>\n      \n      {items.length === 0 && (\n        <Text color=\"neutral.11\">No items in list</Text>\n      )}\n    </Stack>\n  );\n};\n```\n\n## Component requirements\n\n### Usage context\n\n**When to use VisuallyHidden**:\n- Skip navigation links for keyboard users\n- Additional context for screen reader users\n- Accessible labels for icon-only buttons\n- Status announcements for dynamic content\n- Form hints that don't need to be visible\n\n**When NOT to use**:\n- Don't use for critical information that all users need\n- Don't hide interactive elements without `isFocusable` prop\n- Avoid using as a substitute for proper semantic HTML\n- Don't use to hide content from all users (use `display: none` or conditional rendering instead)\n\n## Accessibility\n\n**Role**: The component renders as a `<div>` or `<span>` with CSS that hides it visually while keeping it accessible to screen readers.\n\n**Labeling**: The content inside VisuallyHidden is read by screen readers:\n\n```tsx\n<Button>\n  <Icon name=\"delete\" />\n  <VisuallyHidden>Delete item</VisuallyHidden>\n</Button>\n```\n\n**Keyboard navigation**: \n- By default, hidden content cannot receive keyboard focus\n- With `isFocusable={true}`, the first focusable element inside becomes visible when focused\n- Essential for skip navigation patterns\n\n**ARIA attributes**: You can add ARIA attributes for live regions and status announcements:\n\n```tsx\n<VisuallyHidden role=\"status\" aria-live=\"polite\">\n  Loading complete\n</VisuallyHidden>\n```\n\n### Persistent ID\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"skip-navigation-link\";\n\nexport const SkipLink = () => (\n  <VisuallyHidden id={PERSISTENT_ID} isFocusable>\n    <Button>Skip to main content</Button>\n  </VisuallyHidden>\n);\n```\n\n## API reference\n\n<PropsTable id=\"VisuallyHidden\" />\n\n## Common patterns\n\n### Skip to main content\n\nA standard accessibility pattern for keyboard navigation.\n\n```jsx live-dev\nconst App = () => {\n  const mainContentRef = React.useRef<HTMLDivElement>(null);\n  \n  const handleSkip = () => {\n    mainContentRef.current?.focus();\n  };\n  \n  return (\n    <Stack gap=\"400\">\n      <VisuallyHidden isFocusable>\n        <Button onClick={handleSkip}>Skip to main content</Button>\n      </VisuallyHidden>\n      \n      <Box p=\"400\" bg=\"neutral.7\" borderRadius=\"md\">\n        <Text fontWeight=\"bold\">Navigation Area</Text>\n        <Text textStyle=\"sm\" color=\"neutral.11\">\n          Press Tab to reveal the skip link\n        </Text>\n      </Box>\n      \n      <Box \n        ref={mainContentRef}\n        tabIndex={-1}\n        p=\"400\" \n        bg=\"primary.7\" \n        borderRadius=\"md\"\n      >\n        <Text fontWeight=\"bold\" mb=\"200\">Main Content</Text>\n        <Text>This is the main content area that users can skip to.</Text>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Accessible data tables\n\nProvide additional context for screen reader users navigating tables.\n\n```jsx live-dev\nconst App = () => {\n  const data = [\n    { product: 'Widget A', price: 29.99, stock: 45 },\n    { product: 'Widget B', price: 39.99, stock: 12 },\n    { product: 'Widget C', price: 19.99, stock: 0 },\n  ];\n  \n  return (\n    <Box overflowX=\"auto\">\n      <table style={{ width: '100%', borderCollapse: 'collapse' }}>\n        <thead>\n          <tr>\n            <th style={{ textAlign: 'left', padding: '12px', borderBottom: '2px solid #e2e8f0' }}>\n              Product\n            </th>\n            <th style={{ textAlign: 'right', padding: '12px', borderBottom: '2px solid #e2e8f0' }}>\n              Price\n            </th>\n            <th style={{ textAlign: 'right', padding: '12px', borderBottom: '2px solid #e2e8f0' }}>\n              Stock\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((item, index) => (\n            <tr key={index}>\n              <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0' }}>\n                {item.product}\n              </td>\n              <td style={{ textAlign: 'right', padding: '12px', borderBottom: '1px solid #e2e8f0' }}>\n                <VisuallyHidden as=\"span\">Price: </VisuallyHidden>\n                ${item.price.toFixed(2)}\n              </td>\n              <td style={{ textAlign: 'right', padding: '12px', borderBottom: '1px solid #e2e8f0' }}>\n                <VisuallyHidden as=\"span\">Stock: </VisuallyHidden>\n                {item.stock === 0 ? (\n                  <span style={{ color: '#ef4444' }}>\n                    Out of stock\n                    <VisuallyHidden as=\"span\"> for {item.product}</VisuallyHidden>\n                  </span>\n                ) : (\n                  item.stock\n                )}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </Box>\n  );\n};\n```\n\n### Form field descriptions\n\nProvide additional hints for form fields without cluttering the UI.\n\n```jsx live-dev\nconst App = () => {\n  const [password, setPassword] = React.useState('');\n  \n  return (\n    <Stack gap=\"400\">\n      <Box>\n        <Text as=\"label\" fontWeight=\"semibold\" mb=\"200\" display=\"block\">\n          Password\n        </Text>\n        <input\n          type=\"password\"\n          value={password}\n          onChange={(e) => setPassword(e.target.value)}\n          aria-describedby=\"password-hint\"\n          style={{\n            width: '100%',\n            padding: '8px 12px',\n            borderRadius: '4px',\n            border: '1px solid #cbd5e0',\n          }}\n        />\n        <VisuallyHidden id=\"password-hint\">\n          Password must be at least 8 characters long and contain a number\n        </VisuallyHidden>\n        <Text textStyle=\"sm\" color=\"neutral.11\" mt=\"100\">\n          Min. 8 characters\n        </Text>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Loading states\n\nAnnounce loading states to screen reader users.\n\n```jsx live-dev\nconst App = () => {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [data, setData] = React.useState<string | null>(null);\n  \n  const loadData = () => {\n    setIsLoading(true);\n    setData(null);\n    \n    setTimeout(() => {\n      setData('Data loaded successfully!');\n      setIsLoading(false);\n    }, 2000);\n  };\n  \n  return (\n    <Stack gap=\"400\">\n      <Button onClick={loadData} isDisabled={isLoading}>\n        {isLoading ? 'Loading...' : 'Load Data'}\n      </Button>\n      \n      <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {isLoading ? 'Loading data, please wait' : ''}\n        {data ? 'Data loaded successfully' : ''}\n      </VisuallyHidden>\n      \n      {data && (\n        <Box p=\"400\" bg=\"success.7\" borderRadius=\"md\">\n          <Text>{data}</Text>\n        </Box>\n      )}\n    </Stack>\n  );\n};\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using VisuallyHidden within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Usage Tests\n\nVerify the VisuallyHidden component hides content visually while keeping it accessible\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { VisuallyHidden, NimbusProvider, Button } from \"@commercetools/nimbus\";\n\ndescribe(\"VisuallyHidden - Basic usage\", () => {\n  it(\"renders content that is accessible but visually hidden\", () => {\n    render(\n      <NimbusProvider>\n        <VisuallyHidden data-testid=\"hidden-content\">\n          Screen reader only text\n        </VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    const element = screen.getByTestId(\"hidden-content\");\n    expect(element).toBeInTheDocument();\n    expect(element).toHaveTextContent(\"Screen reader only text\");\n\n    // Verify it's visually hidden\n    const styles = window.getComputedStyle(element);\n    expect(styles.position).toBe(\"absolute\");\n    expect(styles.width).toBe(\"1px\");\n    expect(styles.height).toBe(\"1px\");\n  });\n\n  it(\"renders as div by default and as span when specified\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <VisuallyHidden data-testid=\"element\">Content</VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"element\").tagName).toBe(\"DIV\");\n\n    rerender(\n      <NimbusProvider>\n        <VisuallyHidden as=\"span\" data-testid=\"element\">\n          Content\n        </VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"element\").tagName).toBe(\"SPAN\");\n  });\n\n  it(\"supports skip navigation with isFocusable\", () => {\n    render(\n      <NimbusProvider>\n        <VisuallyHidden isFocusable>\n          <Button data-testid=\"skip-button\">Skip to content</Button>\n        </VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"skip-button\")).toBeInTheDocument();\n  });\n});\n```\n\n### Accessibility Tests\n\nVerify ARIA attributes and accessibility patterns\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { VisuallyHidden, NimbusProvider, Button } from \"@commercetools/nimbus\";\n\ndescribe(\"VisuallyHidden - Accessibility\", () => {\n  it(\"forwards ARIA attributes for live regions\", () => {\n    render(\n      <NimbusProvider>\n        <VisuallyHidden\n          role=\"status\"\n          aria-live=\"polite\"\n          data-testid=\"status-region\"\n        >\n          Loading complete\n        </VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    const element = screen.getByTestId(\"status-region\");\n    expect(element).toHaveAttribute(\"role\", \"status\");\n    expect(element).toHaveAttribute(\"aria-live\", \"polite\");\n  });\n\n  it(\"can be used with aria-describedby for form hints\", () => {\n    render(\n      <NimbusProvider>\n        <input\n          type=\"text\"\n          aria-describedby=\"field-hint\"\n          data-testid=\"input-field\"\n        />\n        <VisuallyHidden id=\"field-hint\">\n          Enter your full name as it appears on your ID\n        </VisuallyHidden>\n      </NimbusProvider>\n    );\n\n    const input = screen.getByTestId(\"input-field\");\n    expect(input).toHaveAttribute(\"aria-describedby\", \"field-hint\");\n  });\n\n  it(\"provides accessible labels for icon buttons\", () => {\n    render(\n      <NimbusProvider>\n        <Button data-testid=\"icon-button\">\n          <span aria-hidden=\"true\">⚙️</span>\n          <VisuallyHidden>Settings</VisuallyHidden>\n        </Button>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByTestId(\"icon-button\");\n    expect(button).toHaveTextContent(\"Settings\");\n  });\n});\n```\n\n\n## Resources\n\n- [VisuallyHidden component in Storybook](https://nimbus-storybook.vercel.app/?path=/docs/utils-visuallyhidden--docs)\n- [React Aria VisuallyHidden documentation](https://react-spectrum.adobe.com/react-aria/VisuallyHidden.html)\n- [WebAIM: Invisible Content](https://webaim.org/techniques/css/invisiblecontent/)\n- [W3C Skip Navigation](https://www.w3.org/TR/WCAG20-TECHS/G1.html)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Screen reader-only content",
+          "href": "#screen-reader-only-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Focusable content",
+          "href": "#focusable-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Inline vs block content",
+          "href": "#inline-vs-block-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Status announcements",
+          "href": "#status-announcements",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage context",
+          "href": "#usage-context",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Persistent ID",
+          "href": "#persistent-id",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Skip to main content",
+          "href": "#skip-to-main-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessible data tables",
+          "href": "#accessible-data-tables",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Form field descriptions",
+          "href": "#form-field-descriptions",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Loading states",
+          "href": "#loading-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Usage Tests",
+          "href": "#basic-usage-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/components-accessibility.json

@@ -0,0 +1,34 @@
+{
+  "meta": {
+    "id": "Components-Accessibility",
+    "title": "Accessibility",
+    "description": "Components designed to enhance accessibility and ARIA compliance.",
+    "order": 12,
+    "repoPath": "packages/nimbus/src/docs/accessibility.mdx",
+    "menu": [
+      "Components",
+      "Accessibility"
+    ],
+    "route": "components/accessibility",
+    "tags": [
+      "document"
+    ],
+    "toc": [],
+    "icon": "Blind",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Accessibility\n\nComponents designed to enhance accessibility and ARIA compliance.\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Accessibility\n\nComponents designed to enhance accessibility and ARIA compliance.\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": []
+    }
+  }
+}