Fix accessibility issues across SelectedRowPanel, GridHeader, and ColumnTitle components

app/columns/__tests__/setup.ts

@@ -7,6 +7,13 @@ Object.defineProperty(window, 'CSS', {
   },
 });
 
+// Mock ResizeObserver for @primer/react components
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
 // Mock react-markdown
 jest.mock('react-markdown', () => {
   return function MockMarkdown({ children }: { children: string }) {

app/components/ColumnTitle.tsx

@@ -34,7 +34,7 @@ export default function ColumnTitle({ title, index }: { title: string; index?: n
         <ActionMenu.Anchor>
           <IconButton
             variant="invisible"
-            aria-labelledby="Column menu"
+            aria-label={`Column menu for ${title}`}
             icon={KebabHorizontalIcon}
           />
         </ActionMenu.Anchor>

app/components/GridHeader.tsx

@@ -10,6 +10,7 @@ export function Search() {
       leadingVisual={SearchIcon}
       /*trailingAction={<IconButton variant="invisible" aria-labelledby="Clear search" icon={XCircleFillIcon} />}*/
       placeholder="Search..."
+      aria-label="Search grid content"
     />
   );
 }
@@ -30,7 +31,7 @@ export function GroupBy() {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button>
+      <ActionMenu.Button aria-label="Group by column">
         {groupBy ? (
           <>
             <Text sx={{ color: 'fg.muted', fontWeight: 'semibold' }}>Group by:</Text>
@@ -76,7 +77,7 @@ export function FilterBy() {
   }
   return (
     <ActionMenu>
-      <ActionMenu.Button>Filter</ActionMenu.Button>
+      <ActionMenu.Button aria-label="Filter by column">Filter</ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
         <ActionList>
           {filterableColumns.map((column, index) => (
@@ -143,6 +144,9 @@ export function GridHeader({ title, setShowNewColumnForm, count }: GridHeaderPro
                 cursor: 'pointer',
               },
             }}
+            aria-label="Go back to home"
+            role="button"
+            tabIndex={0}
           >
             <ArrowLeftIcon />
           </Box>

app/components/SelectedRowPanel.tsx

@@ -43,6 +43,7 @@ type Issue = {
 };
 function IssueDetails({ issue }: { issue: Issue }) {
   const [open, setOpen] = useState<boolean>(false);
+  const contentId = `issue-content-${issue.number}`;
 
   return (
     <Box sx={{ p: 3 }}>
@@ -58,6 +59,7 @@ function IssueDetails({ issue }: { issue: Issue }) {
           lineHeight: 1.33,
           mb: 3,
         }}
+        aria-label={`View issue ${issue.title} on GitHub`}
       >
         {issue.title}
         <Text sx={{ color: 'fg.muted' }}>(#{issue.number})</Text>
@@ -70,8 +72,11 @@ function IssueDetails({ issue }: { issue: Issue }) {
           borderRadius: 2,
           overflow: 'hidden',
         }}
+        role="region"
+        aria-labelledby={`issue-header-${issue.number}`}
       >
         <Box
+          id={`issue-header-${issue.number}`}
           sx={{
             px: 3,
             py: 2,
@@ -101,13 +106,18 @@ function IssueDetails({ issue }: { issue: Issue }) {
           }}
         >
           <div
+            id={contentId}
             className="markdownContainer"
             dangerouslySetInnerHTML={{ __html: marked.parse(issue.body) }}
+            role="region"
+            aria-label="Issue description"
           />
           {open ? (
             <IconButton
               icon={ChevronUpIcon}
-              aria-label="Show less"
+              aria-label="Collapse issue description"
+              aria-expanded={open}
+              aria-controls={contentId}
               onClick={() => setOpen(false)}
               sx={{
                 position: 'absolute',
@@ -119,7 +129,9 @@ function IssueDetails({ issue }: { issue: Issue }) {
           ) : (
             <IconButton
               icon={ChevronDownIcon}
-              aria-label="Show more"
+              aria-label="Expand issue description"
+              aria-expanded={open}
+              aria-controls={contentId}
               onClick={() => setOpen(true)}
               sx={{
                 position: 'absolute',
@@ -215,17 +227,19 @@ function ContextHeader({ title, next, previous, close }: HeaderProps) {
         backgroundColor: 'canvas.default',
         height: '48px',
       }}
+      role="banner"
+      aria-label="Selected row details"
     >
-      <Box sx={{ display: 'flex', gap: 0 }}>
+      <Box sx={{ display: 'flex', gap: 0 }} role="group" aria-label="Navigate between rows">
         <IconButton
-          aria-label="Previous"
+          aria-label="Go to previous row"
           size="small"
           variant="invisible"
           icon={ChevronUpIcon}
           onClick={previous}
         />
         <IconButton
-          aria-label="Next"
+          aria-label="Go to next row"
           size="small"
           variant="invisible"
           icon={ChevronDownIcon}
@@ -242,6 +256,8 @@ function ContextHeader({ title, next, previous, close }: HeaderProps) {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}
+        role="heading"
+        aria-level={1}
       >
         {title}
       </Box>
@@ -250,7 +266,7 @@ function ContextHeader({ title, next, previous, close }: HeaderProps) {
         icon={XIcon}
         size="small"
         variant="invisible"
-        aria-label="Close"
+        aria-label="Close row details panel"
         onClick={close}
       />
     </Box>
@@ -294,6 +310,8 @@ export default function SelectedRowPanel() {
         display: 'flex',
         flexDirection: 'column',
       }}
+      role="complementary"
+      aria-label="Row details panel"
     >
       <ContextHeader
         title={primaryCell.response as string}
@@ -310,6 +328,8 @@ export default function SelectedRowPanel() {
           display: 'flex',
           flexDirection: 'column',
         }}
+        role="main"
+        aria-label="Row content"
       >
         <ContextDetails primaryCell={primaryCell} />