From e6e735d2668f7383acc45bdb7cc7dc183e7a73a8 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Tue, 14 Jul 2026 18:11:01 +0800
Subject: [PATCH 1/2] fix(a11y): add missing scope, aria-label, tabIndex and
 remove conflicting aria-hidden

- Add scope='col' and scope='row' to <th> elements in differentials comparison table
- Add aria-label to <table> in differentials and favourites pages
- Add aria-label to two unlabelled <nav> elements in favourites-library-nav
- Add tabIndex={-1} to SourcePreviewPopover surface for focus fallback
- Remove aria-hidden='true' from mode-action-popup description span
  referenced by aria-describedby (conflicting attributes)
---
 .../favourites-command-library-page.tsx          |  2 +-
 .../favourites-library-nav.tsx                   |  7 +++++--
 .../clinical-dashboard/mode-action-popup.tsx     |  1 -
 .../source-preview-popover.tsx                   |  1 +
 .../differential-presentation-workflow-page.tsx  | 16 +++++++++++++---
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx
index 3c85e179e..094daf00f 100644
--- a/src/components/clinical-dashboard/favourites-command-library-page.tsx
+++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx
@@ -584,7 +584,7 @@ function FavouritesTable({
       </div>
 
       <div className="hidden overflow-x-auto sm:block">
-        <table className="min-w-[36rem] w-full border-collapse text-left">
+        <table aria-label="Saved favourites" className="min-w-[36rem] w-full border-collapse text-left">
           <thead>
             <tr className="h-10 border-b border-[color:var(--border)] bg-[color:var(--surface)] text-2xs font-semibold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
               <th scope="col" className="min-w-[12rem] px-3">
diff --git a/src/components/clinical-dashboard/favourites-library-nav.tsx b/src/components/clinical-dashboard/favourites-library-nav.tsx
index b95b9eaf9..4c67b509a 100644
--- a/src/components/clinical-dashboard/favourites-library-nav.tsx
+++ b/src/components/clinical-dashboard/favourites-library-nav.tsx
@@ -260,7 +260,10 @@ export function FavouritesSidebar({
           <Heart className="h-4 w-4 group-hover:hidden group-focus-visible:hidden" aria-hidden />
           <PanelLeftOpen className="hidden h-4 w-4 group-hover:block group-focus-visible:block" aria-hidden />
         </button>
-        <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto px-2 pb-2">
+        <nav
+          aria-label="Favourites library"
+          className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto px-2 pb-2"
+        >
           {sections.map((section, sectionIndex) => (
             <span key={section.id} className="contents">
               {sectionIndex > 0 ? <span className="my-1 h-px w-8 bg-[color:var(--border)]" aria-hidden /> : null}
@@ -317,7 +320,7 @@ export function FavouritesSidebar({
           <PanelLeftClose className="h-4 w-4" aria-hidden />
         </button>
       </div>
-      <nav className="grid gap-5">
+      <nav aria-label="Favourites sections" className="grid gap-5">
         {sections.map((section) => (
           <section key={section.id}>
             <h3 className="mb-2 text-2xs font-semibold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx
index 5323a7959..979291305 100644
--- a/src/components/clinical-dashboard/mode-action-popup.tsx
+++ b/src/components/clinical-dashboard/mode-action-popup.tsx
@@ -648,7 +648,6 @@ export function ModeActionPopup({
                   {item.description ? (
                     <span
                       id={descriptionId}
-                      aria-hidden="true"
                       className="mt-0.5 block truncate text-xs font-medium text-[color:var(--text-soft)]"
                     >
                       {item.description}
diff --git a/src/components/clinical-dashboard/source-preview-popover.tsx b/src/components/clinical-dashboard/source-preview-popover.tsx
index 48aebc8c8..4fb155257 100644
--- a/src/components/clinical-dashboard/source-preview-popover.tsx
+++ b/src/components/clinical-dashboard/source-preview-popover.tsx
@@ -164,6 +164,7 @@ export function SourcePreviewPopover({
   return createPortal(
     <div
       ref={surfaceRef}
+      tabIndex={-1}
       role="dialog"
       aria-modal="false"
       aria-label={title}
diff --git a/src/components/differentials/differential-presentation-workflow-page.tsx b/src/components/differentials/differential-presentation-workflow-page.tsx
index 31f4849a8..744472e4c 100644
--- a/src/components/differentials/differential-presentation-workflow-page.tsx
+++ b/src/components/differentials/differential-presentation-workflow-page.tsx
@@ -219,10 +219,16 @@ function DesktopComparisonTable({
         data-testid="differential-comparison-scroll"
         className="polished-scroll overflow-x-auto rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-soft)]"
       >
-        <table className="min-w-[84rem] border-separate border-spacing-0 text-left">
+        <table
+          aria-label="Differential comparison"
+          className="min-w-[84rem] border-separate border-spacing-0 text-left"
+        >
           <thead>
             <tr>
-              <th className="sticky left-0 z-10 w-[10.75rem] border-b border-r border-[color:var(--border)] bg-[color:var(--clinical-chat-table-header)] px-3.5 py-3 align-top text-xs font-extrabold uppercase text-[color:var(--text-muted)]">
+              <th
+                scope="col"
+                className="sticky left-0 z-10 w-[10.75rem] border-b border-r border-[color:var(--border)] bg-[color:var(--clinical-chat-table-header)] px-3.5 py-3 align-top text-xs font-extrabold uppercase text-[color:var(--text-muted)]"
+              >
                 Criteria
                 <span className="mt-1.5 block text-2xs font-bold normal-case text-[color:var(--text-muted)]">
                   Reorder
@@ -230,6 +236,7 @@ function DesktopComparisonTable({
               </th>
               {candidates.map((candidate) => (
                 <th
+                  scope="col"
                   key={candidate.record.slug}
                   className={cn(
                     "w-[8.5rem] border-b border-r border-[color:var(--border)] bg-[color:var(--clinical-chat-table-header)] p-0 align-top",
@@ -244,7 +251,10 @@ function DesktopComparisonTable({
           <tbody>
             {workflow.criteria.map((criterion) => (
               <tr key={criterion.id} className={rowTone[criterion.tone]}>
-                <th className="sticky left-0 z-10 w-[10.75rem] border-b border-r border-[color:var(--border)] bg-inherit px-3.5 py-3 align-top">
+                <th
+                  scope="row"
+                  className="sticky left-0 z-10 w-[10.75rem] border-b border-r border-[color:var(--border)] bg-inherit px-3.5 py-3 align-top"
+                >
                   <CriteriaLabel criterion={criterion} />
                 </th>
                 {candidates.map((candidate) => (

From 9f880853ea7d268186d982f4623b71f46e77d3dc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 14 Jul 2026 14:04:38 +0000
Subject: [PATCH 2/2] fix(a11y): keep mode-action menuitem names label-only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removing aria-hidden from description spans correctly fixed the
aria-describedby conflict, but visible description text then joined the
accessible name (e.g. "Scope Limit answers…"). Set aria-label to the
item label so names stay exact-match stable for Scope/Upload PDF queries.

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/components/clinical-dashboard/mode-action-popup.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx
index 979291305..01238863f 100644
--- a/src/components/clinical-dashboard/mode-action-popup.tsx
+++ b/src/components/clinical-dashboard/mode-action-popup.tsx
@@ -597,9 +597,10 @@ export function ModeActionPopup({
   const integratedDownOffsetClass = integratedChipRow ? "top-[calc(100%+3.65rem)]" : "top-[calc(100%+0.875rem)]";
 
   // Shared, presentation-agnostic action list — the same rows render inside the
-  // desktop popover and the phone/tablet sheet. Each row's accessible name is its
-  // `label`; the secondary description is exposed via aria-describedby (kept out of
-  // the name so exact-match tests like "Scope"/"Upload PDF" hold).
+  // desktop popover and the phone/tablet sheet. Each row's accessible name is set
+  // via aria-label to the `label` only; the visible secondary description is linked
+  // with aria-describedby (and must not use aria-hidden, which conflicts with it).
+  // That keeps exact-match queries like "Scope"/"Upload PDF" stable.
   function renderActionRows() {
     return (
       <div
@@ -619,6 +620,7 @@ export function ModeActionPopup({
                 ref={(element) => assignActionRef(element, index)}
                 type="button"
                 role="menuitem"
+                aria-label={item.label}
                 aria-describedby={descriptionId}
                 onKeyDown={(event) => handleItemKeyDown(event, index)}
                 onClick={() => runActionAndClose(item.id)}