test(docs): add jest-axe accessibility testing to Docusaurus components (#845)

# Pull Request

## Description

Added **jest-axe** accessibility testing to all five Docusaurus
component test suites. Each test file gained an async assertion that
renders the component, runs axe-core analysis, and verifies zero
accessibility violations. This establishes automated a11y coverage for
the documentation site's custom React components.

## Related Issue(s)

Related to #821

## Type of Change

Select all that apply:

**Code & Documentation:**

* [ ] Bug fix (non-breaking change fixing an issue)
* [x] New feature (non-breaking change adding functionality)
* [ ] Breaking change (fix or feature causing existing functionality to
change)
* [ ] Documentation update

**Infrastructure & Configuration:**

* [ ] GitHub Actions workflow
* [ ] Linting configuration (markdown, PowerShell, etc.)
* [ ] Security configuration
* [ ] DevContainer configuration
* [x] Dependency update

**AI Artifacts:**

* [ ] Reviewed contribution with `prompt-builder` agent and addressed
all feedback
* [ ] Copilot instructions (`.github/instructions/*.instructions.md`)
* [ ] Copilot prompt (`.github/prompts/*.prompt.md`)
* [ ] Copilot agent (`.github/agents/*.agent.md`)
* [ ] Copilot skill (`.github/skills/*/SKILL.md`)

**Other:**

* [ ] Script/automation (`.ps1`, `.sh`, `.py`)
* [ ] Other (please describe):

## Testing

- All 34 Docusaurus component tests pass (`npm test` in
`docs/docusaurus/`)
- Each new a11y test renders the component, calls `axe(container)`, and
asserts `toHaveNoViolations()`
- The `region` rule is disabled inline since components render as
fragments outside a full page landmark structure
- `Icons.test.tsx` tests `GettingStartedIcon` as a representative sample
rather than all six icon variants

## Checklist

### Required Checks

* [x] Documentation is updated (if applicable)
* [x] Files follow existing naming conventions
* [x] Changes are backwards compatible (if applicable)
* [x] Tests added for new functionality (if applicable)

### Required Automated Checks

The following validation commands must pass before merging:

* [x] Markdown linting: `npm run lint:md`
* [x] Spell checking: `npm run spell-check`
* [x] Frontmatter validation: `npm run lint:frontmatter`
* [x] Skill structure validation: `npm run validate:skills`
* [x] Link validation: `npm run lint:md-links`
* [x] PowerShell analysis: `npm run lint:ps`

Co-authored-by: Bill Berry <wbery@microsoft.com>

Author: WilliamBerryiii

docs/docusaurus/package-lock.json

@@ -31,9 +31,11 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
+    "@types/jest-axe": "^3.5.9",
     "@types/react": "^19.2.14",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
+    "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.2.0",
     "ts-jest": "^29.4.6"
   },

docs/docusaurus/package.json

@@ -1,8 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import BoxCard from '../BoxCard';
 
+expect.extend(toHaveNoViolations);
+
 describe('BoxCard', () => {
   const defaultProps = {
     title: 'Box Title',
@@ -44,4 +47,12 @@ describe('BoxCard', () => {
     const { container } = render(<BoxCard {...defaultProps} />);
     expect(container.querySelector('img')).toBeNull();
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<BoxCard {...defaultProps} />);
+    const results = await axe(container, {
+      rules: { region: { enabled: false } },
+    });
+    expect(results).toHaveNoViolations();
+  });
 });

docs/docusaurus/src/components/Cards/__tests__/BoxCard.test.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import CardGrid from '../CardGrid';
 
+expect.extend(toHaveNoViolations);
+
 describe('CardGrid', () => {
   it('renders children', () => {
     render(<CardGrid><div>child content</div></CardGrid>);
@@ -23,4 +26,12 @@ describe('CardGrid', () => {
     const { container } = render(<CardGrid columns={4}><div>child</div></CardGrid>);
     expect(container.firstChild).toHaveClass('cardGridFour');
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<CardGrid><div>child</div></CardGrid>);
+    const results = await axe(container, {
+      rules: { region: { enabled: false } },
+    });
+    expect(results).toHaveNoViolations();
+  });
 });

docs/docusaurus/src/components/Cards/__tests__/CardGrid.test.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import IconCard from '../IconCard';
 
+expect.extend(toHaveNoViolations);
+
 describe('IconCard', () => {
   const defaultProps = {
     icon: <span data-testid="test-icon">🚀</span>,
@@ -37,4 +40,12 @@ describe('IconCard', () => {
     const { container } = render(<IconCard {...defaultProps} />);
     expect(container.querySelector('.cardDescription')).toBeNull();
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<IconCard {...defaultProps} />);
+    const results = await axe(container, {
+      rules: { region: { enabled: false } },
+    });
+    expect(results).toHaveNoViolations();
+  });
 });

docs/docusaurus/src/components/Cards/__tests__/IconCard.test.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import HeroSection from '..';
 
+expect.extend(toHaveNoViolations);
+
 describe('HeroSection', () => {
   it('renders title and subtitle', () => {
     render(<HeroSection title="Hello World" subtitle="A subtitle" />);
@@ -14,4 +17,12 @@ describe('HeroSection', () => {
     render(<HeroSection title="Heading" subtitle="Sub" />);
     expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Heading');
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<HeroSection title="Hello World" subtitle="A subtitle" />);
+    const results = await axe(container, {
+      rules: { region: { enabled: false } },
+    });
+    expect(results).toHaveNoViolations();
+  });
 });

docs/docusaurus/src/components/HeroSection/__tests__/HeroSection.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import {
   GettingStartedIcon,
   AgentsPromptsIcon,
@@ -10,6 +11,8 @@ import {
   TemplatesExamplesIcon,
 } from '..';
 
+expect.extend(toHaveNoViolations);
+
 const icons = [
   { name: 'GettingStartedIcon', Component: GettingStartedIcon },
   { name: 'AgentsPromptsIcon', Component: AgentsPromptsIcon },
@@ -32,4 +35,12 @@ describe('Icons', () => {
     const svg = container.querySelector('svg');
     expect(svg).toHaveClass('custom-class');
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<GettingStartedIcon />);
+    const results = await axe(container, {
+      rules: { region: { enabled: false } },
+    });
+    expect(results).toHaveNoViolations();
+  });
 });