Merge Develop -> copilot/fix-154

.github/workflows/deploy-develop.yml

@@ -91,7 +91,9 @@ jobs:
           # Checkout main branch
           git checkout main
 
-          # Build main branch content
+          # Build main branch content (without develop GitVersion env vars)
+          # This allows the inject-version script to use git-based version calculation
+          # which will correctly determine the main branch version
           npm run build
 
           # Save main build
@@ -105,10 +107,6 @@ jobs:
           else
             echo "No stash to pop"
           fi
-        env:
-          GITVERSION_SEMVER: ${{ steps.gitversion.outputs.semVer }}
-          GITVERSION_FULLSEMVER: ${{ steps.gitversion.outputs.fullSemVer }}
-          GITVERSION_INFORMATIONALVERSION: ${{ steps.gitversion.outputs.informationalVersion }}
 
       # Second: Build develop branch content for the subdirectory
       - name: Build develop branch for sub-directory

package.json

@@ -16,7 +16,7 @@
     "lint:fix": "eslint src/**/*.ts --fix",
     "format": "prettier --write src/**/*.{ts,js,json,html,css,md}",
     "format:check": "prettier --check src/**/*.{ts,js,json,html,css,md}",
-    "test": "npm run lint && npm run format:check && npm run type-check && vitest run",
+    "test": "npm run build && npm run lint && npm run format:check && npm run type-check && vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
@@ -31,19 +31,23 @@
   "author": "Taylor Marvin",
   "license": "MIT",
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.32.0",
     "@types/node": "^24.2.0",
     "@typescript-eslint/eslint-plugin": "^8.39.0",
     "@typescript-eslint/parser": "^8.37.0",
     "@vitest/ui": "^3.2.4",
+    "axe-core": "^4.10.3",
+    "axe-playwright": "^2.1.0",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.4",
     "happy-dom": "^18.0.1",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
+    "playwright": "^1.54.2",
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4"

src/index.html

@@ -73,12 +73,14 @@ <h2 class="modal-title">Search or select timezone</h2>
         </div>
         <div class="modal-content">
           <!-- Search input -->
+          <label for="timezone-input" class="visually-hidden">Search timezones</label>
           <input
             type="text"
             id="timezone-input"
             class="timezone-input"
             placeholder="Type to search timezones..."
             autocomplete="off"
+            aria-label="Search timezones"
           />
 
           <!-- Wheel navigation -->
@@ -110,7 +112,12 @@ <h2 class="modal-title">Select date and time</h2>
             <label for="datetime-input" class="datetime-label">
               Select date and time (in your current timezone):
             </label>
-            <input type="datetime-local" id="datetime-input" class="datetime-input" />
+            <input
+              type="datetime-local"
+              id="datetime-input"
+              class="datetime-input"
+              aria-label="Select date and time (in your current timezone)"
+            />
           </div>
         </div>
         <div class="modal-footer">
@@ -143,14 +150,14 @@ <h3 class="settings-section-title">Mode</h3>
           <div class="mode-toggle-container">
             <!-- Dark mode radio button -->
             <label class="mode-toggle">
-              <input type="radio" name="mode" value="dark" class="mode-radio" />
+              <input type="radio" name="mode" value="dark" class="mode-radio" aria-label="Dark Mode" />
               <span class="mode-option">
                 <span class="mode-text">Dark Mode</span>
               </span>
             </label>
             <!-- Light mode radio button -->
             <label class="mode-toggle">
-              <input type="radio" name="mode" value="light" class="mode-radio" />
+              <input type="radio" name="mode" value="light" class="mode-radio" aria-label="Light Mode" />
               <span class="mode-option">
                 <span class="mode-text">Light Mode</span>
               </span>
@@ -163,7 +170,11 @@ <h3 class="settings-section-title">Mode</h3>
           <h3 class="settings-section-title">Time Format</h3>
           <div class="time-format-toggle-container">
             <label class="time-format-switch">
-              <input type="checkbox" class="time-format-checkbox" />
+              <input
+                type="checkbox"
+                class="time-format-checkbox"
+                aria-label="Toggle between 12-hour and 24-hour time format"
+              />
               <span class="time-format-slider">
                 <span class="time-format-labels">
                   <span class="time-format-label-12h">🕒 12h</span>
@@ -188,12 +199,13 @@ <h3 class="settings-section-title">Time Format</h3>
       }
     </script>
 
+    <!-- Third-party Libraries -->
+    <script src="scripts/suncalc/suncalc.js"></script>
+
     <!-- Module Import Map -->
     <script type="importmap">
       {
-        "imports": {
-          "suncalc": "./scripts/suncalc/suncalc.js"
-        }
+        "imports": {}
       }
     </script>