Add dynamic aria-labels to issue select fields

.jules/palette.md

@@ -17,3 +17,7 @@
 
 **Learning:** When placing interactive elements (like `Select` or `Button`) inside data tables, relying solely on column headers is insufficient for screen reader users navigating by control. A simple "Edit" or "Select" announcement lacks context.
 **Action:** Pass the row entity's name (e.g., user name) to the interactive component and use it in a dynamic `aria-label` (e.g., "Change role for John Doe").
+
+## 2025-05-21 - [Dynamic Accessible Names for Select Triggers]
+**Learning:** Shadcn UI `SelectTrigger` with a static `aria-label` overrides the screen reader announcement of the selected value. This leaves users knowing "Select Status" but not the *current* status.
+**Action:** Use a dynamic `aria-label` that includes the current value (e.g., `aria-label={`Status: ${valueLabel}`}`) to provide full context.

src/components/issues/fields/ConsistencySelect.tsx

@@ -41,7 +41,7 @@ export function ConsistencySelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label="Select Consistency"
+        aria-label={`Consistency: ${CONSISTENCY_CONFIG[value].label}`}
         data-testid={testId}
       >
         <SelectValue>

src/components/issues/fields/PrioritySelect.tsx

@@ -37,7 +37,7 @@ export function PrioritySelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label="Select Priority"
+        aria-label={`Priority: ${PRIORITY_CONFIG[value].label}`}
         data-testid={testId}
       >
         <SelectValue>

src/components/issues/fields/SelectFields.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { StatusSelect } from "./StatusSelect";
+import { SeveritySelect } from "./SeveritySelect";
+import { PrioritySelect } from "./PrioritySelect";
+import { ConsistencySelect } from "./ConsistencySelect";
+
+describe("SelectFields Accessibility", () => {
+  describe("StatusSelect", () => {
+    it("has a dynamic accessible name including the value", () => {
+      render(
+        <StatusSelect
+          value="in_progress"
+          onValueChange={vi.fn()}
+        />
+      );
+
+      const trigger = screen.getByTestId("issue-status-select");
+      expect(trigger).toHaveAttribute("aria-label", "Status: In Progress");
+    });
+  });
+
+  describe("SeveritySelect", () => {
+    it("has a dynamic accessible name including the value", () => {
+      render(
+        <SeveritySelect
+          value="major"
+          onValueChange={vi.fn()}
+        />
+      );
+
+      const trigger = screen.getByTestId("issue-severity-select");
+      expect(trigger).toHaveAttribute("aria-label", "Severity: Major");
+    });
+  });
+
+  describe("PrioritySelect", () => {
+    it("has a dynamic accessible name including the value", () => {
+      render(
+        <PrioritySelect
+          value="high"
+          onValueChange={vi.fn()}
+        />
+      );
+
+      const trigger = screen.getByTestId("issue-priority-select");
+      expect(trigger).toHaveAttribute("aria-label", "Priority: High");
+    });
+  });
+
+  describe("ConsistencySelect", () => {
+    it("has a dynamic accessible name including the value", () => {
+      render(
+        <ConsistencySelect
+          value="frequent"
+          onValueChange={vi.fn()}
+        />
+      );
+
+      const trigger = screen.getByTestId("issue-consistency-select");
+      expect(trigger).toHaveAttribute("aria-label", "Consistency: Frequent");
+    });
+  });
+});

src/components/issues/fields/SeveritySelect.tsx

@@ -42,7 +42,7 @@ export function SeveritySelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label="Select Severity"
+        aria-label={`Severity: ${SEVERITY_CONFIG[value].label}`}
         data-testid={testId}
       >
         <SelectValue>

src/components/issues/fields/StatusSelect.tsx

@@ -44,7 +44,7 @@ export function StatusSelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label="Select Status"
+        aria-label={`Status: ${STATUS_CONFIG[value].label}`}
         data-testid="issue-status-select"
       >
         <SelectValue>