feat: add accessibility tests support

.github/workflows/run-ci-cd.yaml

@@ -271,6 +271,40 @@ jobs:
           docker run --env-file frontend/.env.example owasp/nest:test-frontend-e2e-latest pnpm run test:e2e
     timeout-minutes: 10
 
+  run-frontend-a11y-tests:
+    name: Run frontend accessibility tests
+    needs:
+      - scan-code
+      - scan-ci-dependencies
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8
+
+      - name: Set up Docker buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f
+
+      - name: Build frontend a11y-testing image
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83
+        with:
+          cache-from: |
+            type=gha
+            type=registry,ref=owasp/nest:test-frontend-a11y-cache
+          cache-to: |
+            type=gha,compression=zstd
+          context: frontend
+          file: docker/frontend/Dockerfile.a11y.test
+          load: true
+          platforms: linux/amd64
+          tags: owasp/nest:test-frontend-a11y-latest
+
+      - name: Run frontend a11y tests
+        run: |
+          docker run --env-file frontend/.env.example owasp/nest:test-frontend-a11y-latest pnpm run test:a11y
+    timeout-minutes: 10
+
   set-release-version:
     name: Set release version
     outputs:
@@ -297,6 +331,7 @@ jobs:
       github.ref == 'refs/heads/main'
     needs:
       - run-backend-tests
+      - run-frontend-a11y-tests
       - run-frontend-e2e-tests
       - run-frontend-unit-tests
       - set-release-version
@@ -662,6 +697,7 @@ jobs:
       github.event.action == 'published'
     needs:
       - run-backend-tests
+      - run-frontend-a11y-tests
       - run-frontend-e2e-tests
       - run-frontend-unit-tests
       - set-release-version

docker/frontend/Dockerfile.a11y.test

@@ -0,0 +1,27 @@
+FROM node:24-alpine
+
+ENV FORCE_COLOR=1 \
+    NPM_CACHE="/app/.npm" \
+    PNPM_HOME="/pnpm"
+
+ENV NPM_CONFIG_RETRY=5 \
+    NPM_CONFIG_TIMEOUT=30000 \
+    PATH="$PNPM_HOME:$PATH"
+
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
+
+WORKDIR /app
+
+COPY --chmod=444 --chown=root:root package.json pnpm-lock.yaml ./
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    pnpm install --frozen-lockfile --ignore-scripts && \
+    chown node:node /app
+
+COPY __tests__/a11y __tests__/a11y
+COPY __tests__/mockData __tests__/mockData
+COPY .pnpmrc jest.config.ts jest.setup.ts tsconfig.json ./
+COPY public public
+COPY src src
+
+USER node

docker/frontend/Dockerfile.e2e.test

@@ -18,7 +18,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts
 
 COPY __tests__/e2e __tests__/e2e
-COPY __tests__/unit/data __tests__/unit/data
+COPY __tests__/mockData __tests__/mockData
 COPY .pnpmrc next.config.ts postcss.config.js playwright.config.ts tailwind.config.mjs tsconfig.json ./
 COPY public public
 COPY src src

docker/frontend/Dockerfile.unit.test

@@ -19,6 +19,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     chown node:node /app
 
 COPY __tests__/unit __tests__/unit
+COPY __tests__/mockData __tests__/mockData
 COPY .pnpmrc jest.config.ts jest.setup.ts tsconfig.json ./
 COPY public public
 COPY src src

frontend/Makefile

@@ -69,8 +69,16 @@ shell-frontend:
 
 test-frontend: \
 	test-frontend-unit \
+	test-frontend-a11y \
 	test-frontend-e2e
 
+test-frontend-a11y:
+	@DOCKER_BUILDKIT=1 NEXT_PUBLIC_ENVIRONMENT=local docker build \
+		--cache-from nest-test-frontend-a11y \
+		-f docker/frontend/Dockerfile.a11y.test frontend \
+		-t nest-test-frontend-a11y
+	@docker run --env-file frontend/.env.example --rm nest-test-frontend-a11y pnpm run test:a11y
+
 test-frontend-e2e:
 	@DOCKER_BUILDKIT=1 NEXT_PUBLIC_ENVIRONMENT=local docker build \
 		--cache-from nest-test-frontend-e2e \

frontend/__tests__/a11y/components/ActionButton.a11y.test.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import ActionButton from 'components/ActionButton'
+
+expect.extend(toHaveNoViolations)
+
+describe('ActionButton Accessibility', () => {
+  it('should not have any accessibility violations when no url is provided', async () => {
+    const { container } = render(<ActionButton>Sample Text</ActionButton>)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should not have any accessibility violations when url is provided', async () => {
+    const { container } = render(<ActionButton url="https://example.com">Visit Site</ActionButton>)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should not have any accessibility violations when tooltipLabel is provided', async () => {
+    const { baseElement } = render(
+      <ActionButton tooltipLabel="Test Label">Test Button</ActionButton>
+    )
+    const results = await axe(baseElement)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/AnchorTitle.a11y.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import AnchorTitle from 'components/AnchorTitle'
+
+expect.extend(toHaveNoViolations)
+
+describe('AnchorTitle Accessibility', () => {
+  it('should not have any accessibility violations', async () => {
+    const { container } = render(<AnchorTitle title="Test Title" />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/AutoScrollToTop.a11y.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import AutoScrollToTop from 'components/AutoScrollToTop'
+
+expect.extend(toHaveNoViolations)
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/test-path',
+}))
+
+beforeAll(() => {
+  window.scrollTo = jest.fn()
+})
+
+afterAll(() => {
+  jest.clearAllMocks()
+})
+
+describe('AutoScrollToTop Accessibility', () => {
+  it('should not have any accessibility violations', async () => {
+    const { container } = render(<AutoScrollToTop />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/Badges.a11y.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import Badges from 'components/Badges'
+
+const defaultProps = {
+  name: 'Test Badge',
+  cssClass: 'medal',
+}
+
+expect.extend(toHaveNoViolations)
+
+describe('Badges Accessibility', () => {
+  it('should not have any accessibility violations when tooltip is enabled', async () => {
+    const { baseElement } = render(<Badges {...defaultProps} />)
+
+    const results = await axe(baseElement)
+
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should not have any accessibility violations when tooltip is disabled', async () => {
+    const { baseElement } = render(<Badges {...defaultProps} showTooltip={false} />)
+
+    const results = await axe(baseElement)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/BarChart.a11y.test.tsx

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { ReactNode } from 'react'
+import BarChart from 'components/BarChart'
+
+const mockProps = {
+  title: 'Calories Burned',
+  labels: ['Mon', 'Tue', 'Wed'],
+  days: [200, 150, 100],
+  requirements: [180, 170, 90],
+}
+
+jest.mock('react-apexcharts', () => {
+  return function MockChart(props: {
+    options: unknown
+    series: unknown
+    height: number
+    type: string
+  }) {
+    const mockOptions = props.options as Record<string, unknown>
+
+    return (
+      <div
+        data-testid="mock-chart"
+        data-options={JSON.stringify(mockOptions)}
+        data-series={JSON.stringify(props.series)}
+        data-height={props.height}
+        data-type={props.type}
+      />
+    )
+  }
+})
+
+jest.mock('next/dynamic', () => {
+  return function mockDynamic() {
+    return jest.requireMock('react-apexcharts')
+  }
+})
+
+jest.mock('next-themes', () => ({
+  ThemeProvider: ({ children, ...props }: { children: ReactNode; [key: string]: unknown }) => (
+    <div {...props}>{children}</div>
+  ),
+  useTheme: () => ({ theme: 'light', setTheme: jest.fn() }),
+}))
+
+jest.mock('components/AnchorTitle', () => {
+  return function MockAnchorTitle({ title }: { title: string }) {
+    return <div data-testid="anchor-title">{title}</div>
+  }
+})
+
+jest.mock('components/SecondaryCard', () => {
+  return function MockSecondaryCard({
+    title,
+    icon,
+    children,
+  }: {
+    title: ReactNode
+    icon?: unknown
+    children: ReactNode
+  }) {
+    return (
+      <div data-testid="secondary-card">
+        <div data-testid="card-title">{title}</div>
+        {icon && <div data-testid="card-icon">icon</div>}
+        <div data-testid="card-content">{children}</div>
+      </div>
+    )
+  }
+})
+
+expect.extend(toHaveNoViolations)
+
+describe('BarChart Accessibility', () => {
+  it('should not have any accessibility violations', async () => {
+    const { container } = render(<BarChart {...mockProps} />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/BreadCrumbs.a11y.test.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@heroui/react'
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+describe('Breadcrumbs a11y', () => {
+  it('should not have any accessibility violations', async () => {
+    const { container } = render(<Breadcrumbs />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/BreadCrumbsWrapper.a11y.test.tsx

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react'
+import { useBreadcrumbs } from 'hooks/useBreadcrumbs'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { usePathname } from 'next/navigation'
+import BreadCrumbsWrapper from 'components/BreadCrumbsWrapper'
+
+expect.extend(toHaveNoViolations)
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(),
+}))
+
+jest.mock('hooks/useBreadcrumbs', () => ({
+  useBreadcrumbs: jest.fn(),
+}))
+
+describe('BreadcrumbsWrapper a11y', () => {
+  beforeAll(() => {
+    ;(usePathname as jest.Mock).mockReturnValue('/projects/test-project')
+    ;(useBreadcrumbs as jest.Mock).mockReturnValue([
+      { title: 'Home', path: '/' },
+      { title: 'Projects', path: '/projects' },
+      { title: 'Test Project', path: '/projects/test-project' },
+    ])
+  })
+
+  it('should not have any accessibility violations', async () => {
+    const { container } = render(<BreadCrumbsWrapper />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

frontend/__tests__/a11y/components/CalendarButton.a11y.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { FaCalendarAlt } from 'react-icons/fa'
+import CalendarButton from 'components/CalendarButton'
+
+expect.extend(toHaveNoViolations)
+
+const mockEvent = {
+  title: 'Test Event',
+  description: 'Test description',
+  location: 'Test Location',
+  startDate: '2025-12-01',
+  endDate: '2025-12-02',
+}
+
+describe('CalendarButton Accessibility', () => {
+  it('should not have any accessibility violations as an icon-only button', async () => {
+    const { container } = render(<CalendarButton event={mockEvent} />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should not have any accessibility violations when showLabel is enabled', async () => {
+    const { container } = render(<CalendarButton event={mockEvent} showLabel />)
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should not have any accessibility violations when custom icon is provided', async () => {
+    const { container } = render(<CalendarButton event={mockEvent} icon={<FaCalendarAlt />} />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})