Chore/accessibility audit ci

.github/dependabot.yml

@@ -0,0 +1,26 @@
+version: 2
+
+updates:
+  - package-ecosystem: "npm"
+    directory: "/FRONTEND"
+    schedule:
+      interval: "weekly"
+
+    labels:
+      - "dependencies"
+
+  - package-ecosystem: "npm"
+    directory: "/BACKEND"
+    schedule:
+      interval: "weekly"
+
+    labels:
+      - "dependencies"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+
+    labels:
+      - "dependencies"

.github/workflows/ci.yml

@@ -59,6 +59,10 @@ jobs:
           NODE_ENV: test
           JWT_SECRET: testsecret12345678901234567890123
 
+      - name: Run frontend coverage
+        run: npm run coverage
+        working-directory: FRONTEND
+
   e2e-tests:
     name: Playwright E2E Tests
     runs-on: ubuntu-latest

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+coverage/

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+echo "Running frontend tests..."
+npm run test --prefix FRONTEND -- --run || exit 1

FRONTEND/package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
@@ -46,7 +47,8 @@
     "vite": "^6.3.1",
     "vite-plugin-pwa": "^1.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "@vitest/coverage-v8": "^1.6.1"
   },
   "vitest": {
     "environment": "jsdom"

FRONTEND/src/components/ui/QuickViewModal.jsx

@@ -17,7 +17,7 @@ import { Link } from "react-router-dom";
 import { useCartStore } from "../../store/cart";
 import { useCurrencyStore } from "../../store/currency";
 import { formatPrice } from "../../utils/currency";
-
+import React from "react";
 const QuickViewModal = ({ isOpen, onClose, product }) => {
   const { addToCart } = useCartStore();
   const { currency, rates } = useCurrencyStore();
@@ -51,7 +51,9 @@ const QuickViewModal = ({ isOpen, onClose, product }) => {
               {formatPrice(product.price, currency, rates)}
             </Text>
 
-            {product.category && <Badge colorScheme="blue">{product.category}</Badge>}
+            {product.category && (
+              <Badge colorScheme="blue">{product.category}</Badge>
+            )}
 
             {product.brand && (
               <Text>

FRONTEND/src/components/ui/ScrollToTop.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { IconButton, useColorModeValue } from "@chakra-ui/react";
 import { LuArrowUp } from "react-icons/lu";
 

FRONTEND/src/components/ui/tests/ProductCard.test.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
@@ -34,8 +35,7 @@ vi.mock("../../../store/cart", () => ({
 }));
 
 vi.mock("../QuickAddModal", () => ({
-  default: ({ isOpen }) =>
-    isOpen ? <div>Quick Add Modal</div> : null,
+  default: ({ isOpen }) => (isOpen ? <div>Quick Add Modal</div> : null),
 }));
 
 vi.mock("@chakra-ui/react", async () => {
@@ -86,22 +86,18 @@ describe("ProductCard", () => {
     expect(screen.getByText("Quick Add Modal")).toBeInTheDocument();
   });
 
-    it("disables Add to Cart button when product is out of stock", () => {
-      render(
-        <ProductCard
-          product={{
-            ...mockProduct,
-            stock: 0,
-          }}
-        />
-      );
-
-      const addToCartButton = screen.getByRole("button", {
-        name: `Add ${mockProduct.name} to cart`,
-      });
-
-      expect(addToCartButton).toBeDisabled();
-      expect(addToCartButton).toHaveTextContent("Out of Stock");
+  it("disables Add to Cart button when product is out of stock", () => {
+    render(
+      <ProductCard
+        product={{
+          ...mockProduct,
+          stock: 0,
+        }}
+      />
+    );
+
+    const addToCartButton = screen.getByRole("button", {
+      name: `Add ${mockProduct.name} to cart`,
     });
 
     it("applies correct layout properties and transition styles to the card container", () => {
@@ -114,3 +110,4 @@ describe("ProductCard", () => {
       expect(computedStyle.transition).toBe("all 0.2s ease-in-out");
     });
   });
+});

FRONTEND/vitest.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "./src/setupTests.js",
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "html"],
+    },
+  },
+});

e2e/accessibility.spec.js

@@ -0,0 +1,39 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+import { BASE_URL } from "./helpers.js";
+
+test.describe("Accessibility Audits", () => {
+  test("Homepage should not have serious or critical WCAG violations", async ({
+    page,
+  }) => {
+    await page.goto(BASE_URL);
+
+    await expect(page.locator("vite-error-overlay")).toHaveCount(0);
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    const severeViolations = results.violations.filter(
+      (violation) =>
+        violation.impact === "serious" || violation.impact === "critical"
+    );
+
+    expect(severeViolations).toEqual([]);
+  });
+
+  test("404 page should not have serious or critical WCAG violations", async ({
+    page,
+  }) => {
+    await page.goto(`${BASE_URL}/this-route-does-not-exist`);
+
+    await expect(page.locator("vite-error-overlay")).toHaveCount(0);
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    const severeViolations = results.violations.filter(
+      (violation) =>
+        violation.impact === "serious" || violation.impact === "critical"
+    );
+
+    expect(severeViolations).toEqual([]);
+  });
+});

package.json

@@ -6,7 +6,8 @@
     "build": "npm install && npm install --prefix FRONTEND && npm run build --prefix FRONTEND",
     "start": "cross-env NODE_ENV=production node BACKEND/server.js",
     "test:e2e": "npx playwright test",
-    "test:e2e:ui": "npx playwright test --ui"
+    "test:e2e:ui": "npx playwright test --ui",
+    "prepare": "husky"
   },
   "type": "module",
   "keywords": [],
@@ -22,6 +23,7 @@
     "serverless-http": "^4.0.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
     "@eslint/js": "^9.22.0",
     "@playwright/test": "^1.61.0",
     "cross-env": "^7.0.3",