Enhancement: Comprehensive Accessibility (a11y) & Keyboard Navigation Improvements

.github/workflows/labeler.yml

@@ -1,6 +1,6 @@
 name: PR Labeler
 on:
-  pull_request_target:
+  pull_request:
 jobs:
   label:
     runs-on: ubuntu-latest

src/app/dashboard/settings/page.tsx

@@ -691,7 +691,7 @@ function SettingsPageContent() {
             </div>
 
             {/* Toggle Switch */}
-            <label className="flex items-center cursor-pointer select-none">
+            <label className="flex items-center cursor-pointer select-none"><span className="sr-only">Toggle setting</span>
               <div className="relative">
                 <input
                   type="checkbox"
@@ -726,7 +726,7 @@ function SettingsPageContent() {
                   type="text"
                   value={`${window.location.origin}/u/${settings.github_login}`}
                   readOnly
-                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus:outline-none"
+                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus-visible:outline-none"
                 />
                 <button
                   type="button"
@@ -821,7 +821,7 @@ function SettingsPageContent() {
               maxLength={500}
               rows={5}
               placeholder="Write a short bio with **bold**, _italic_, `code`, or links."
-              className="w-full resize-y rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-3 text-sm text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+              className="w-full resize-y rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-3 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
             />
 
             {showBioPreview && (
@@ -883,7 +883,7 @@ function SettingsPageContent() {
                     setTheme("default");
                     setIsDirty(true);
                   }}
-                  className="accent-[var(--accent)] focus:ring-[var(--accent)]"
+                  className="accent-[var(--accent)] focus-visible:ring-[var(--accent)]"
                 />
               </label>
               <label className="flex cursor-pointer items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-3 text-[var(--foreground)]">
@@ -897,7 +897,7 @@ function SettingsPageContent() {
                     setTheme("colour-blind-friendly");
                     setIsDirty(true);
                   }}
-                  className="accent-[var(--accent)] focus:ring-[var(--accent)]"
+                  className="accent-[var(--accent)] focus-visible:ring-[var(--accent)]"
                 />
               </label>
             </div>
@@ -944,7 +944,7 @@ function SettingsPageContent() {
               </p>
             </div>
 
-            <label className="flex items-center cursor-pointer select-none">
+            <label className="flex items-center cursor-pointer select-none"><span className="sr-only">Toggle setting</span>
               <div className="relative">
                 <input
                   type="checkbox"
@@ -1058,7 +1058,7 @@ function SettingsPageContent() {
                 onChange={(e) => setRepoSearchQuery(e.target.value)}
                 placeholder="Type to search your repositories..."
                 aria-label="Search repositories to pin"
-                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] mb-4"
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] mb-4"
               />
 
               {loadingRepos ? (
@@ -1118,7 +1118,7 @@ function SettingsPageContent() {
               </p>
             </div>
 
-            <label className="flex items-center cursor-pointer select-none">
+            <label className="flex items-center cursor-pointer select-none"><span className="sr-only">Toggle setting</span>
               <div className="relative">
                 <input
                   type="checkbox"
@@ -1247,7 +1247,7 @@ function SettingsPageContent() {
                   }}
                   placeholder={settings.has_wakatime_key ? "•••••••••••••••• (Configured)" : "Enter your Wakatime API key"}
                   autoComplete="new-password"
-                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
                 />
                 <button
                   type="button"
@@ -1292,7 +1292,7 @@ function SettingsPageContent() {
                     setIsDirty(true);
                   }}
                   placeholder="https://discord.com/api/webhooks/..."
-                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+                  className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
                 />
               </div>
             </div>
@@ -1308,7 +1308,7 @@ function SettingsPageContent() {
                   setTimezone(e.target.value);
                   setIsDirty(true);
                 }}
-                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
               >
                 <option value="UTC">UTC</option>
                 <option value="America/New_York">Eastern Time (ET)</option>

src/components/ActivityRingChart.tsx

@@ -89,7 +89,7 @@ export default function ActivityRingChart() {
         <select
           value={days}
           onChange={(e) => setDays(Number(e.target.value))}
-          className="rounded-lg border border-[var(--border)] bg-[var(--card)] px-2 py-1 text-sm text-[var(--card-foreground)] focus:outline-none focus:border-[var(--accent)]"
+          className="rounded-lg border border-[var(--border)] bg-[var(--card)] px-2 py-1 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus:border-[var(--accent)]"
         >
           <option value={7}>Last 7d</option>
           <option value={30}>Last 30d</option>

src/components/CodingActivityInsightsCard.tsx

@@ -248,7 +248,7 @@ export default function CodingActivityInsightsCard() {
           </p>
         </div>
 
-         <button
+         <button aria-label="Refresh"
   type="button"
   onClick={fetchInsights}
   disabled={loading}

src/components/CommitSearchPanel.tsx

@@ -127,7 +127,7 @@ export default function CommitSearchPanel({ commits, loading }: CommitSearchPane
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Search commits..."
             aria-label="Search commits by message or repository"
-            className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] py-2 pl-10 pr-10 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:border-transparent transition-colors"
+            className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] py-2 pl-10 pr-10 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus:border-transparent transition-colors"
           />
           {searchQuery && (
             <button

src/components/CommitTimeChart.tsx

@@ -105,7 +105,7 @@ export default function CommitTimeChart() {
         <select
           value={days}
           onChange={(e) => setDays(Number(e.target.value))}
-          className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-2 py-1 text-sm text-[var(--card-foreground)] focus:outline-none focus:border-[var(--accent)]"
+          className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-2 py-1 text-sm text-[var(--card-foreground)] focus-visible:outline-none focus:border-[var(--accent)]"
         >
           <option value={7}>Last 7d</option>
           <option value={30}>Last 30d</option>

src/components/ConfirmModal.tsx

@@ -50,6 +50,7 @@ export default function ConfirmModal({
       <div 
         className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
         onClick={onCancel}
+        aria-hidden="true"
       />
 
       {/* Modal Content */}
@@ -72,14 +73,14 @@ export default function ConfirmModal({
           <button
             type="button"
             onClick={onCancel}
-            className="w-full sm:w-auto rounded-xl border border-[var(--border)] bg-[var(--control)] px-5 py-2.5 text-sm font-semibold text-[var(--card-foreground)] transition-all hover:bg-[var(--card-muted)] active:scale-95 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+            className="w-full sm:w-auto rounded-xl border border-[var(--border)] bg-[var(--control)] px-5 py-2.5 text-sm font-semibold text-[var(--card-foreground)] transition-all hover:bg-[var(--card-muted)] active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
           >
             {cancelLabel}
           </button>
           <button
             type="button"
             onClick={onConfirm}
-            className="w-full sm:w-auto rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-semibold text-[var(--accent-foreground)] transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-[var(--accent)]/20 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+            className="w-full sm:w-auto rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-semibold text-[var(--accent-foreground)] transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-[var(--accent)]/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
           >
             {confirmLabel}
           </button>

src/components/ContributionHeatmap.tsx

@@ -536,7 +536,7 @@ export default function ContributionHeatmap({
                       aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
                       disabled={isFuture}
                       onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
-                      className={`group relative z-0 h-4 w-4 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-20 ${
+                      className={`group relative z-0 h-4 w-4 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-20 ${
                         cell.inRange ? "opacity-100" : "opacity-40"
                       }`}
                       style={{

src/components/GoalTracker.tsx

@@ -1379,6 +1379,10 @@ export default function GoalTracker() {
         )}
 
         {/* Recurrence Picker */}
+        <div role="group" aria-labelledby="recurrence-label">
+          <span id="recurrence-label" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
+            Recurrence
+          </span>
         <div>
           <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
             Recurrence

src/components/InactiveRepositoriesCard.tsx

@@ -86,7 +86,7 @@ export default function InactiveRepositoriesCard() {
             value={thresholdDays}
             onChange={(event) => setThresholdDays(Number(event.target.value) as ThresholdDays)}
             aria-label="Select inactivity threshold"
-            className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-2 py-1 text-sm text-[var(--card-foreground)] focus:border-[var(--accent)] focus:outline-none"
+            className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-2 py-1 text-sm text-[var(--card-foreground)] focus:border-[var(--accent)] focus-visible:outline-none"
           >
             {THRESHOLDS.map((days) => (
               <option key={days} value={days}>

src/components/ProjectMetrics.tsx

@@ -175,11 +175,12 @@ export default function ProjectMetrics() {
               </h3>
               <form onSubmit={handleConnect} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="jiraDomain" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Jira Domain
                   </label>
                   <input
                     type="text"
+                    id="jiraDomain"
                     placeholder="your-company.atlassian.net"
                     value={formData.jiraDomain}
                     onChange={(e) =>
@@ -190,10 +191,11 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="email" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Email
                   </label>
                   <input
+                    id="email"
                     type="email"
                     value={formData.email}
                     onChange={(e) =>
@@ -204,10 +206,11 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="apiToken" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     API Token
                   </label>
                   <input
+                    id="apiToken"
                     type="password"
                     placeholder="Get from id.atlassian.com/manage-profile"
                     value={formData.apiToken}
@@ -219,11 +222,12 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="projectKey" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Project Key (optional)
                   </label>
                   <input
                     type="text"
+                    id="projectKey"
                     placeholder="e.g. PROJ"
                     value={formData.projectKey}
                     onChange={(e) =>
@@ -293,11 +297,12 @@ export default function ProjectMetrics() {
               </h3>
               <form onSubmit={handleConnect} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="jiraDomain" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Jira Domain
                   </label>
                   <input
                     type="text"
+                    id="jiraDomain"
                     placeholder="your-company.atlassian.net"
                     value={formData.jiraDomain}
                     onChange={(e) =>
@@ -308,10 +313,11 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="email" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Email
                   </label>
                   <input
+                    id="email"
                     type="email"
                     value={formData.email}
                     onChange={(e) =>
@@ -322,10 +328,11 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="apiToken" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     API Token
                   </label>
                   <input
+                    id="apiToken"
                     type="password"
                     placeholder="Get from id.atlassian.com/manage-profile"
                     value={formData.apiToken}
@@ -337,11 +344,12 @@ export default function ProjectMetrics() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium mb-1 text-[var(--foreground)]">
+                  <label htmlFor="projectKey" className="block text-sm font-medium mb-1 text-[var(--foreground)]">
                     Project Key (optional)
                   </label>
                   <input
                     type="text"
+                    id="projectKey"
                     placeholder="e.g. PROJ"
                     value={formData.projectKey}
                     onChange={(e) =>