From d63f2a0b86ce1f6e11dcf264667c269533ba5db6 Mon Sep 17 00:00:00 2001
From: Piotr Karpala <piotrkarpala@microsoft.com>
Date: Mon, 13 Jul 2026 21:40:19 -0400
Subject: [PATCH 1/2] fix(a11y): add aria-labels to icon buttons and non-color
 cue to activity band (#422)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bbf27d66-9aca-451b-85ee-3a32e0775d52
---
 app/components/AdminPanel.vue          |  4 +-
 app/components/AgentActivityViewer.vue |  6 +--
 app/components/AgentModeViewer.vue     |  6 +--
 app/components/AiChatPanel.vue         |  8 ++--
 app/components/BreakdownComponent.vue  |  6 +--
 app/components/CopilotChatViewer.vue   |  6 +--
 app/components/MainComponent.vue       |  9 +++--
 app/components/MetricsViewer.vue       |  6 +--
 app/components/MyUsageViewer.vue       |  6 +--
 app/components/PullRequestViewer.vue   |  6 +--
 app/components/SeatsAnalysisViewer.vue |  6 +--
 app/components/TeamsComponent.vue      | 16 +++++---
 app/components/UserMetricsViewer.vue   | 22 ++++++++---
 tests/a11y-components.spec.ts          | 55 ++++++++++++++++++++++++++
 14 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 tests/a11y-components.spec.ts

diff --git a/app/components/AdminPanel.vue b/app/components/AdminPanel.vue
index 5015177d..89cb32c3 100644
--- a/app/components/AdminPanel.vue
+++ b/app/components/AdminPanel.vue
@@ -5,7 +5,7 @@
         <v-icon color="primary">mdi-shield-crown</v-icon>
         Admin Panel
         <v-spacer />
-        <v-btn icon variant="text" size="small" title="Close" @click="isOpen = false">
+        <v-btn icon variant="text" size="small" title="Close" aria-label="Close admin panel" @click="isOpen = false">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
@@ -249,6 +249,7 @@
                     variant="text"
                     icon
                     title="Retry this date"
+                    aria-label="Retry this date"
                     :loading="retryingDate === f.metricsDate"
                     :disabled="!!busyAction"
                     @click="retryOne(f.metricsDate)"
@@ -431,6 +432,7 @@
                     variant="text"
                     density="compact"
                     title="Dismiss this row (kept in DB so gap-mode coverage still works)"
+                    aria-label="Dismiss billing job row"
                     @click="dismissBillingJob(j.id)"
                   />
                 </td>
diff --git a/app/components/AgentActivityViewer.vue b/app/components/AgentActivityViewer.vue
index 1406a725..4c1bcb03 100644
--- a/app/components/AgentActivityViewer.vue
+++ b/app/components/AgentActivityViewer.vue
@@ -66,9 +66,9 @@
     <v-container :fluid="chartColumns === 'full'" :class="['elevation-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
       <div class="d-flex justify-end mb-2">
         <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-          <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-          <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-          <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+          <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+          <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+          <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
         </v-btn-toggle>
       </div>
 
diff --git a/app/components/AgentModeViewer.vue b/app/components/AgentModeViewer.vue
index c1eb742a..457d5be6 100644
--- a/app/components/AgentModeViewer.vue
+++ b/app/components/AgentModeViewer.vue
@@ -109,9 +109,9 @@
             <v-container :fluid="chartColumns === 'full'" :class="['elevation-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
               <div class="d-flex justify-end mb-2">
                 <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-                  <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-                  <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-                  <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+                  <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+                  <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+                  <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
                 </v-btn-toggle>
               </div>
 
diff --git a/app/components/AiChatPanel.vue b/app/components/AiChatPanel.vue
index a566aac1..38606bd2 100644
--- a/app/components/AiChatPanel.vue
+++ b/app/components/AiChatPanel.vue
@@ -7,6 +7,7 @@
         class="ai-chat-fab"
         color="indigo"
         icon
+        aria-label="Open AI metrics assistant"
         size="large"
         elevation="6"
         style="position: fixed; bottom: 24px; right: 24px; z-index: 2147483647;"
@@ -31,15 +32,15 @@
           AI Metrics Assistant
         </v-toolbar-title>
         <v-spacer />
-        <v-btn v-if="userToken" icon size="small" variant="text" @click="clearUserToken" title="Disconnect token">
+        <v-btn v-if="userToken" icon size="small" variant="text" aria-label="Disconnect personal token" @click="clearUserToken" title="Disconnect token">
           <v-icon size="small">mdi-key-remove</v-icon>
           <v-tooltip activator="parent" :z-index="2147483647" location="bottom">Disconnect personal token</v-tooltip>
         </v-btn>
-        <v-btn icon size="small" variant="text" @click="clearConversation">
+        <v-btn icon size="small" variant="text" aria-label="Clear conversation" @click="clearConversation">
           <v-icon size="small">mdi-delete-outline</v-icon>
           <v-tooltip activator="parent" :z-index="2147483647" location="bottom">Clear conversation</v-tooltip>
         </v-btn>
-        <v-btn icon size="small" variant="text" @click="isOpen = false">
+        <v-btn icon size="small" variant="text" aria-label="Close AI metrics assistant" @click="isOpen = false">
           <v-icon size="small">mdi-close</v-icon>
         </v-btn>
       </v-toolbar>
@@ -185,6 +186,7 @@
           <template #append-inner>
             <v-btn
               icon
+              aria-label="Send message"
               size="small"
               variant="text"
               color="indigo"
diff --git a/app/components/BreakdownComponent.vue b/app/components/BreakdownComponent.vue
index d6e8bb32..fd0791f9 100644
--- a/app/components/BreakdownComponent.vue
+++ b/app/components/BreakdownComponent.vue
@@ -52,9 +52,9 @@
       <v-container :fluid="chartColumns === 'full'" :class="[chartColumns === 'full' ? 'px-0' : 'px-4']">
       <div class="d-flex justify-end mb-2">
         <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-          <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-          <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-          <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+          <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+          <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+          <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
         </v-btn-toggle>
       </div>
       <!-- CLI summary card (editors tab only) -->
diff --git a/app/components/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index b01fc3a1..852dadbe 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -90,9 +90,9 @@
     <v-container :fluid="chartColumns === 'full'" :class="['elevation-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
       <div class="d-flex justify-end mb-2">
         <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-          <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-          <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-          <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+          <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+          <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+          <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
         </v-btn-toggle>
       </div>
       <v-row>
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 66b7c3dc..3cc85d42 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-toolbar color="transparent" elevation="0" class="app-toolbar">
-      <v-btn icon>
+      <v-btn icon aria-label="GitHub Copilot Metrics Viewer home">
         <v-icon>mdi-github</v-icon>
       </v-btn>
 
@@ -9,7 +9,7 @@
       <h2 class="error-message"> {{ mockedDataMessage }} </h2>
       <v-spacer />
 
-      <v-btn icon :title="showDateRange ? 'Hide date range' : 'Show date range'" @click="showDateRange = !showDateRange">
+      <v-btn icon :title="showDateRange ? 'Hide date range' : 'Show date range'" :aria-label="showDateRange ? 'Hide date range' : 'Show date range'" @click="showDateRange = !showDateRange">
         <v-icon>{{ showDateRange ? 'mdi-calendar-check' : 'mdi-calendar' }}</v-icon>
       </v-btn>
 
@@ -17,12 +17,13 @@
         v-if="!signInRequired && isUsageAdmin"
         icon
         title="Admin panel"
+        aria-label="Open admin panel"
         @click="showAdminPanel = true"
       >
         <v-icon>mdi-shield-crown</v-icon>
       </v-btn>
 
-      <v-btn icon :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'" @click="toggleTheme">
+      <v-btn icon :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'" :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'" @click="toggleTheme">
         <v-icon>{{ isDark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
       </v-btn>
 
@@ -41,7 +42,7 @@
       </AuthState>
 
       <!-- PAT-mode info button: visible when auth is not required -->
-      <v-btn v-if="!isAuthRequired" icon title="Authentication info" @click="showAuthInfoDialog = true">
+      <v-btn v-if="!isAuthRequired" icon title="Authentication info" aria-label="Open authentication information" @click="showAuthInfoDialog = true">
         <v-icon>mdi-shield-account</v-icon>
       </v-btn>
 
diff --git a/app/components/MetricsViewer.vue b/app/components/MetricsViewer.vue
index 0ffe900c..e76c5889 100644
--- a/app/components/MetricsViewer.vue
+++ b/app/components/MetricsViewer.vue
@@ -184,9 +184,9 @@
         <!-- Chart layout toggle -->
         <div class="d-flex justify-end mb-2">
           <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-            <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-            <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-            <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+            <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+            <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+            <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
           </v-btn-toggle>
         </div>
 
diff --git a/app/components/MyUsageViewer.vue b/app/components/MyUsageViewer.vue
index 525fdc0a..53d6c0e6 100644
--- a/app/components/MyUsageViewer.vue
+++ b/app/components/MyUsageViewer.vue
@@ -42,9 +42,9 @@
           <!-- Chart layout toggle -->
           <div class="d-flex justify-end pa-3 pb-0">
             <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-              <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-              <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-              <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+              <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+              <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+              <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
             </v-btn-toggle>
           </div>
 
diff --git a/app/components/PullRequestViewer.vue b/app/components/PullRequestViewer.vue
index 6c9459e2..fb438c54 100644
--- a/app/components/PullRequestViewer.vue
+++ b/app/components/PullRequestViewer.vue
@@ -107,9 +107,9 @@
       <v-container :fluid="chartColumns === 'full'" :class="['elevation-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
         <div class="d-flex justify-end mb-2">
           <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-            <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-            <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-            <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+            <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+            <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+            <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
           </v-btn-toggle>
         </div>
         <v-row>
diff --git a/app/components/SeatsAnalysisViewer.vue b/app/components/SeatsAnalysisViewer.vue
index 7e96eea4..f7161e5c 100644
--- a/app/components/SeatsAnalysisViewer.vue
+++ b/app/components/SeatsAnalysisViewer.vue
@@ -107,9 +107,9 @@
     <v-container :fluid="chartColumns === 'full'" :class="['elevation-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
       <div class="d-flex justify-end mb-2">
         <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-          <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-          <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-          <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+          <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+          <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+          <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
         </v-btn-toggle>
       </div>
       <v-row v-if="seatsHistory.length > 0" class="mb-4">
diff --git a/app/components/TeamsComponent.vue b/app/components/TeamsComponent.vue
index 195d1b19..9902542f 100644
--- a/app/components/TeamsComponent.vue
+++ b/app/components/TeamsComponent.vue
@@ -69,6 +69,7 @@
                   v-bind="tooltipProps"
                   :to="`/orgs/${selectedOrg}`"
                   icon="mdi-open-in-new"
+                  aria-label="Switch to organization view"
                   variant="text"
                   size="small"
                   density="compact"
@@ -138,6 +139,7 @@
                   size="x-small"
                   icon
                   title="Deselect team"
+                  aria-label="Deselect team"
                   @click="selectedTeams = []"
                 >
                   <v-icon size="14">mdi-close</v-icon>
@@ -184,6 +186,7 @@
                   size="x-small"
                   icon
                   title="Clear filter"
+                  aria-label="Clear reporting hierarchy filter"
                   @click="onEntraSelect([], '', undefined)"
                 >
                   <v-icon size="14">mdi-close</v-icon>
@@ -235,9 +238,9 @@
       <v-container :fluid="chartColumns === 'full'" :class="['elevation-2 mt-1 mb-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
         <div class="d-flex justify-end mb-3">
           <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-            <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-            <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-            <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+            <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+            <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+            <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
           </v-btn-toggle>
         </div>
 
@@ -422,6 +425,7 @@
                   size="x-small"
                   icon
                   :title="`Remove ${card.teamName}`"
+                  :aria-label="`Remove ${card.teamName}`"
                   @click="selectedTeams = selectedTeams.filter(s => s !== card.slug)"
                 >
                   <v-icon size="14">mdi-close</v-icon>
@@ -448,9 +452,9 @@
       <v-container :fluid="chartColumns === 'full'" :class="['elevation-2 mt-1 mb-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
         <div class="d-flex justify-end mb-3">
           <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-            <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-            <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-            <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+            <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+            <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+            <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
           </v-btn-toggle>
         </div>
 
diff --git a/app/components/UserMetricsViewer.vue b/app/components/UserMetricsViewer.vue
index f38d4173..aa921eb0 100644
--- a/app/components/UserMetricsViewer.vue
+++ b/app/components/UserMetricsViewer.vue
@@ -134,9 +134,9 @@
     <v-container v-if="userMetrics.length > 0" :fluid="chartColumns === 'full'" :class="['elevation-2 mt-2 mb-2', chartColumns === 'full' ? 'px-0' : 'px-4']">
       <div class="d-flex justify-end mb-2">
         <v-btn-toggle v-model="chartColumns" density="compact" variant="outlined" mandatory>
-          <v-btn value="1" size="small" title="Single column"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
-          <v-btn value="2" size="small" title="Two columns"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
-          <v-btn value="full" size="small" title="Full width"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
+          <v-btn value="1" size="small" title="Single column" aria-label="Single column layout"><v-icon size="18">mdi-view-agenda</v-icon></v-btn>
+          <v-btn value="2" size="small" title="Two columns" aria-label="Two column layout"><v-icon size="18">mdi-view-grid</v-icon></v-btn>
+          <v-btn value="full" size="small" title="Full width" aria-label="Full width layout"><v-icon size="18">mdi-fullscreen</v-icon></v-btn>
         </v-btn-toggle>
       </div>
       <v-row class="mt-0 mb-2">
@@ -264,10 +264,12 @@
                   :variant="selectedUserLogin === item.login ? 'elevated' : 'flat'"
                   size="small"
                   style="cursor: pointer;"
-                  :title="selectedUserLogin === item.login ? 'Click to clear filter' : 'Click to filter charts'"
+                  :title="`Activity: ${getActivityLabel(item.total_active_days)} — ${item.total_active_days} active days. ${selectedUserLogin === item.login ? 'Click to clear filter' : 'Click to filter charts'}`"
+                  :aria-label="`Activity: ${getActivityLabel(item.total_active_days)} for ${item.login}, ${item.total_active_days} active days. ${selectedUserLogin === item.login ? 'Click to clear filter' : 'Click to filter charts'}`"
                   @click="toggleUserSelection(item.login)"
                 >
                   {{ item.login }}
+                  <span class="activity-band-label ml-1 text-caption">({{ getActivityLabel(item.total_active_days) }})</span>
                 </v-chip>
               </td>
               <td class="text-center">{{ item.total_active_days }}</td>
@@ -337,6 +339,7 @@
                   size="x-small"
                   variant="text"
                   :title="`View trend for ${item.login}`"
+                  :aria-label="`View trend for ${item.login}`"
                   @click="openUserTrend(item.login)"
                 >
                   <v-icon>mdi-chart-line</v-icon>
@@ -464,7 +467,7 @@
       <v-card>
         <v-card-title class="d-flex justify-space-between align-center">
           <span>Activity Trend — {{ trendLogin }}</span>
-          <v-btn icon variant="text" @click="trendDialog = false"><v-icon>mdi-close</v-icon></v-btn>
+          <v-btn icon variant="text" aria-label="Close activity trend dialog" @click="trendDialog = false"><v-icon>mdi-close</v-icon></v-btn>
         </v-card-title>
         <v-card-text>
           <div v-if="trendLoading" class="d-flex justify-center py-8">
@@ -861,6 +864,13 @@ export default defineComponent({
       return 'error';
     }
 
+    function getActivityLabel(activeDays: number): string {
+      if (activeDays >= 14) return 'High';
+      if (activeDays >= 7) return 'Medium';
+      if (activeDays >= 1) return 'Low';
+      return 'Inactive';
+    }
+
     function adoptionPhaseColor(phaseNumber: number): string {
       // Map GitHub's phase_number to a grey → green → blue → purple progression
       // so the chip color carries ordering at a glance. GitHub documents
@@ -1263,6 +1273,7 @@ export default defineComponent({
       tableHeaders,
       getAcceptanceRate,
       getActivityColor,
+      getActivityLabel,
       getTopIde,
       getTopLanguage,
       adoptionPhaseColor,
@@ -1324,4 +1335,3 @@ export default defineComponent({
   },
 });
 </script>
-
diff --git a/tests/a11y-components.spec.ts b/tests/a11y-components.spec.ts
new file mode 100644
index 00000000..5a351e0f
--- /dev/null
+++ b/tests/a11y-components.spec.ts
@@ -0,0 +1,55 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest';
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+const componentsDir = join(process.cwd(), 'app/components');
+
+function stripNonVisibleButtonContent(template: string): string {
+  return template
+    .replace(/<v-icon\b[\s\S]*?<\/v-icon>/g, '')
+    .replace(/<v-tooltip\b[\s\S]*?<\/v-tooltip>/g, '')
+    .replace(/<template\b[\s\S]*?<\/template>/g, '')
+    .replace(/<[^>]+>/g, '')
+    .replace(/{{[\s\S]*?}}/g, '')
+    .trim();
+}
+
+function findIconOnlyButtonsWithoutAriaLabel(source: string): string[] {
+  const failures: string[] = [];
+  const buttonPattern = /<v-btn(?![-\w])\b([^>]*?)(?:\/>|>([\s\S]*?)<\/v-btn>)/g;
+  for (const match of source.matchAll(buttonPattern)) {
+    const attrs = match[1] ?? '';
+    const body = match[2] ?? '';
+    const hasAriaLabel = /(?:^|\s):?aria-label=/.test(attrs);
+    const hasIconProp = /(?:^|\s):?icon(?:\s|=|$)/.test(attrs);
+    const hasIconChild = /<v-icon\b/.test(body);
+    const hasVisibleText = stripNonVisibleButtonContent(body).length > 0;
+
+    if ((hasIconProp || hasIconChild) && !hasVisibleText && !hasAriaLabel) {
+      failures.push(match[0].replace(/\s+/g, ' ').slice(0, 180));
+    }
+  }
+  return failures;
+}
+
+describe('component accessibility', () => {
+  it('gives every icon-only v-btn an aria-label', () => {
+    const failures = readdirSync(componentsDir)
+      .filter(file => file.endsWith('.vue'))
+      .flatMap((file) => {
+        const source = readFileSync(join(componentsDir, file), 'utf8');
+        return findIconOnlyButtonsWithoutAriaLabel(source).map(button => `${file}: ${button}`);
+      });
+
+    expect(failures).toEqual([]);
+  });
+
+  it('exposes user activity level as a non-color cue on login chips', () => {
+    const source = readFileSync(join(componentsDir, 'UserMetricsViewer.vue'), 'utf8');
+
+    expect(source).toContain('getActivityLabel(item.total_active_days)');
+    expect(source).toContain('Activity:');
+    expect(source).toContain('activity-band-label');
+  });
+});

From 5838c714d584bb8ed599dfde5f8887fa3ea9a359 Mon Sep 17 00:00:00 2001
From: Piotr Karpala <piotrkarpala@microsoft.com>
Date: Mon, 13 Jul 2026 23:51:12 -0400
Subject: [PATCH 2/2] fix(a11y test): loop-based tag stripper to satisfy CodeQL
 (#422)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bbf27d66-9aca-451b-85ee-3a32e0775d52
---
 tests/a11y-components.spec.ts | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/tests/a11y-components.spec.ts b/tests/a11y-components.spec.ts
index 5a351e0f..11775c76 100644
--- a/tests/a11y-components.spec.ts
+++ b/tests/a11y-components.spec.ts
@@ -6,13 +6,24 @@ import { join } from 'node:path';
 const componentsDir = join(process.cwd(), 'app/components');
 
 function stripNonVisibleButtonContent(template: string): string {
-  return template
-    .replace(/<v-icon\b[\s\S]*?<\/v-icon>/g, '')
-    .replace(/<v-tooltip\b[\s\S]*?<\/v-tooltip>/g, '')
-    .replace(/<template\b[\s\S]*?<\/template>/g, '')
-    .replace(/<[^>]+>/g, '')
-    .replace(/{{[\s\S]*?}}/g, '')
-    .trim();
+  let out = template;
+  const patterns = [
+    /<v-icon\b[\s\S]*?<\/v-icon>/g,
+    /<v-tooltip\b[\s\S]*?<\/v-tooltip>/g,
+    /<template\b[\s\S]*?<\/template>/g,
+    /<[^>]+>/g,
+    /{{[\s\S]*?}}/g,
+  ];
+
+  for (const pattern of patterns) {
+    let prev: string;
+    do {
+      prev = out;
+      out = out.replace(pattern, '');
+    } while (out !== prev);
+  }
+
+  return out.trim();
 }
 
 function findIconOnlyButtonsWithoutAriaLabel(source: string): string[] {