Skip to content

chore(ci): add GitHub Actions CI + PR/Issue templates #2573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore(ci): add GitHub Actions CI + PR/Issue templates #2573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8beddc0
a11y: add 'Skip to main content' link and wrap app in <main> landmark
Harushii16 Aug 15, 2025
5be7dd6
feat: add custom 404 Not Found page
Harushii16 Aug 15, 2025
e044987
chore(ci): add GitHub Actions CI + PR/Issue templates
Harushii16 Aug 16, 2025
fa3d9b6
docs(readme): add GitHub Actions CI badge
Harushii16 Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,26 @@
## Note to reviewers

<!-- Add notes to reviewers if applicable -->


## Description

<!-- Describe what this PR does and why. -->

## Type of change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation
- [ ] CI / Build
- [ ] Other (please describe):

## How to test
1. Steps to reproduce / test locally
2.

## Checklist
- [ ] My code follows the project style (naming, formatting).
- [ ] I added/updated relevant tests (if applicable).
- [ ] I added/updated documentation (if applicable).
- [ ] Screenshots attached (if UI changes).

42 changes: 42 additions & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
name: CI

on:
push:
branches:
- main
- develop
pull_request:
branches:
- main
- develop

jobs:
build:
name: Install → Lint → Test → Build
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x]

steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'

- name: Install dependencies
run: npm ci

- name: Lint (if configured)
run: npm run lint --if-present

- name: Run tests (if configured)
run: npm test --if-present

- name: Build (if configured)
run: npm run build --if-present

2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<img src="https://github.com/user-attachments/assets/d476cdf0-7a01-4bcb-b61e-9f10b12216c5" width="200" alt="Logo">
<h1>VigyBag</h1>
</div>
![CI](https://github.com/codervivek5/VigyBag/actions/workflows/ci.yml/badge.svg)




Expand Down
47 changes: 45 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,55 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/Logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Keep existing Google site verification -->
<meta name="google-site-verification" content="ozm89q0WEqACFCdVPRWDNFvKDes5OGWyEQAB99JpA38" />
<title>VigyBag - Eco friendly store</title>

<!-- Accessibility helpers (safe, minimal CSS) -->
<style>
/* Make keyboard focus clearly visible everywhere */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Visually hide the skip link until it’s focused */
.skip-link {
position: absolute;
left: -999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip-link:focus {
position: fixed;
left: 1rem;
top: 1rem;
width: auto;
height: auto;
clip: auto;
padding: 0.75rem 1rem;
background: #ffffff;
border-radius: 0.5rem;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 1000;
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
}
</style>
</head>

<body>
<div id="root"></div>
<!-- New: keyboard users can jump straight to main content -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Wrap React root in a landmark for screen readers -->
<main id="main-content" tabindex="-1">
<div id="root"></div>
</main>

Comment on lines +52 to +55
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Ensure there’s only one

landmark at a time

Wrapping #root in

is great. Just confirm React pages don’t render another , which would create nested landmarks.

If additional

elements exist, switch those to a div or section with role="region" and appropriate aria-labels.

🏁 Script executed:

#!/bin/bash
# Search for other <main> elements in the React app that could cause nested landmarks
rg -n -C2 -S --type=jsx --type=tsx --type=js '<main\b' src

Length of output: 88

🏁 Script executed:

#!/bin/bash
# Search for all <main> tags in JS/JSX/TSX files without relying on rg’s built-in types
rg -n -C2 '<main\b' -g '*.js' -g '*.jsx' -g '*.tsx' src

Length of output: 17250

Single main landmark: prevent nested <main>

We’ve identified that nearly every page component under src/User/pages/** and src/Admin/Pages/** declares its own <main>, which will be nested inside the <main id="main-content"> wrapper in index.html. HTML specs allow only one <main> landmark per page. To resolve, pick one of two approaches:

  • Option A: Replace the outer <main> in index.html with a <div role="main">
    index.html (line 52): 
    - <main id="main-content" tabindex="-1">
+ <div id="main-content" role="main" tabindex="-1">
  • Option B: Keep the outer <main> and convert all inner page <main> tags to a semantically appropriate element (e.g. <section> or <div role="region" aria-label="…">), for example:
    • src/User/pages/Home/Home.jsx:179
    • src/User/pages/Shipping/shipping.jsx:11
    • src/Admin/Pages/AdminPanel.jsx:54
    • …and so on for each page-level <main>

Ensure only one <main> landmark exists in the final rendered DOM.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
index.html lines 52-55: the outer wrapper currently uses a <main
id="main-content"> which causes nested <main> landmarks because individual page
components also render their own <main>; choose one approach and implement it:
either replace the outer <main> with a <div role="main"> in index.html to keep
inner page semantics, or keep the outer <main> and update every page-level
<main> under src/User/pages/** and src/Admin/Pages/** to a semantically
appropriate element (e.g., <section> or <div role="region" aria-label="…">) so
only a single <main> exists in the final DOM; apply the chosen change
consistently across all listed page files (e.g., Home.jsx, shipping.jsx,
AdminPanel.jsx, etc.).

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import { Route, Routes } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import NotFound from "./pages/NotFound";

// User components
import UserAuth from "./User/pages/UserAuth/UserAuth";
Expand Down Expand Up @@ -257,6 +258,7 @@ export default function App() {
{/* Admin verification and login routes */}
<Route path="admin-verification" element={<AdminVerificationPage />} />
<Route path="/admin/login" element={<AdminLogin />} />
<Route path="*" element={<NotFound />} />
</Routes>
</AuthProvider>
);
Expand Down