intial setup

.github/workflows/ci-cd.yaml

@@ -68,6 +68,21 @@ jobs:
         working-directory: frontend
         run: npm run lint:check
 
+       - name: Run accessibility tests
+        run: |
+          npm run test -- -t "accessibility"
+          
+      - name: Generate accessibility report
+        run: |
+          npm run test:a11y
+        continue-on-error: true  # Don't fail the build, but record issues
+
+      - name: Upload accessibility report
+        uses: actions/upload-artifact@v2
+        with:
+          name: accessibility-report
+          path: accessibility-report.json
+
       - name: Check for uncommitted changes
         run: |
           git diff --exit-code || (echo 'Unstaged changes detected. \
@@ -174,6 +189,7 @@ jobs:
       - name: Run frontend tests
         run: |
           docker run --env-file frontend/.env.example ${{ env.DOCKERHUB_USERNAME }}/owasp-nest-test-frontend:latest npm run test
+  
 
   build-docker-staging-images:
     name: Build Docker Staging Images

frontend/__tests__/src/pages/ChapterDetails.test.tsx

@@ -1,11 +1,13 @@
 import { screen, waitFor } from '@testing-library/react'
-
 import { fetchAlgoliaData } from 'api/fetchAlgoliaData'
+import { axe, toHaveNoViolations } from 'jest-axe'
 import { ChapterDetailsPage } from 'pages'
 import { render } from 'wrappers/testUtil'
 
 import { mockChapterData } from '@tests/data/mockChapterData'
 
+expect.extend(toHaveNoViolations)
+
 jest.mock('api/fetchAlgoliaData', () => ({
   fetchAlgoliaData: jest.fn(),
 }))
@@ -26,6 +28,18 @@ describe('ChapterDetailsPage Component', () => {
     jest.clearAllMocks()
   })
 
+  test('should not have any accessibility violations', async () => {
+    const { container } = render(<ChapterDetailsPage />)
+
+    // Wait for content to load
+    await waitFor(() => {
+      expect(screen.queryByText('Loading indicator')).not.toBeInTheDocument()
+    })
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
   test('renders loading spinner initially', async () => {
     render(<ChapterDetailsPage />)
     const loadingSpinner = screen.getAllByAltText('Loading indicator')

frontend/eslint.config.js

@@ -7,6 +7,7 @@ import typescriptParser from '@typescript-eslint/parser'
 import prettierConfig from 'eslint-config-prettier'
 import importPlugin from 'eslint-plugin-import'
 import jest from 'eslint-plugin-jest'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
 import prettier from 'eslint-plugin-prettier'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
@@ -41,6 +42,7 @@ export default [
       jest,
       prettier,
       react,
+      'jsx-a11y': jsxA11y,
     },
     settings: {
       'import/resolver': {
@@ -59,6 +61,19 @@ export default [
     rules: {
       ...jest.configs.recommended.rules,
       ...prettierConfig.rules,
+      'jsx-a11y/alt-text': 'error',
+      'jsx-a11y/anchor-has-content': 'error',
+      'jsx-a11y/anchor-is-valid': 'error',
+      'jsx-a11y/aria-props': 'error',
+      'jsx-a11y/aria-proptypes': 'error',
+      'jsx-a11y/aria-unsupported-elements': 'error',
+      'jsx-a11y/role-has-required-aria-props': 'error',
+      'jsx-a11y/role-supports-aria-props': 'error',
+      'jsx-a11y/tabindex-no-positive': 'error',
+      'jsx-a11y/no-redundant-roles': 'error',
+      'jsx-a11y/label-has-associated-control': 'error',
+      'jsx-a11y/no-autofocus': 'warn',
+      'jsx-a11y/no-noninteractive-tabindex': 'error',
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',

frontend/jest.setup.ts

@@ -1,12 +1,20 @@
 import '@testing-library/jest-dom'
 import { TextEncoder } from 'util'
 import dotenv from 'dotenv'
+import { toHaveNoViolations } from 'jest-axe'
 import React from 'react'
 
 dotenv.config()
+expect.extend(toHaveNoViolations)
 
 global.React = React
 global.TextEncoder = TextEncoder
+global.axe = {
+  run: async () => ({
+    violations: [],
+  }),
+  configure: () => null,
+}
 
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation((...args) => {
@@ -28,4 +36,21 @@ beforeEach(() => {
   })
 })
 
+expect.extend({
+  toBeAccessible: async (received) => {
+    const results = await global.axe.run(received)
+    return {
+      pass: results.violations.length === 0,
+      message: () =>
+        results.violations.length === 0
+          ? 'Expected element to not be accessible'
+          : `Expected element to be accessible but found violations:\n${JSON.stringify(
+              results.violations,
+              null,
+              2
+            )}`,
+    }
+  },
+})
+
 jest.mock('@algolia/autocomplete-theme-classic', () => ({}))