diff --git a/app/columns/__tests__/setup.ts b/app/columns/__tests__/setup.ts index 6a1ea5e..67ca436 100644 --- a/app/columns/__tests__/setup.ts +++ b/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 }) { diff --git a/app/components/ColumnTitle.tsx b/app/components/ColumnTitle.tsx index 33eb8ba..ed2c482 100644 --- a/app/components/ColumnTitle.tsx +++ b/app/components/ColumnTitle.tsx @@ -34,7 +34,7 @@ export default function ColumnTitle({ title, index }: { title: string; index?: n diff --git a/app/components/GridHeader.tsx b/app/components/GridHeader.tsx index 22387fa..c172928 100644 --- a/app/components/GridHeader.tsx +++ b/app/components/GridHeader.tsx @@ -10,6 +10,7 @@ export function Search() { leadingVisual={SearchIcon} /*trailingAction={}*/ placeholder="Search..." + aria-label="Search grid content" /> ); } @@ -30,7 +31,7 @@ export function GroupBy() { return ( - + {groupBy ? ( <> Group by: @@ -76,7 +77,7 @@ export function FilterBy() { } return ( - Filter + Filter {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} > diff --git a/app/components/SelectedRowPanel.tsx b/app/components/SelectedRowPanel.tsx index 229f656..660f82c 100644 --- a/app/components/SelectedRowPanel.tsx +++ b/app/components/SelectedRowPanel.tsx @@ -43,6 +43,7 @@ type Issue = { }; function IssueDetails({ issue }: { issue: Issue }) { const [open, setOpen] = useState(false); + const contentId = `issue-content-${issue.number}`; return ( @@ -58,6 +59,7 @@ function IssueDetails({ issue }: { issue: Issue }) { lineHeight: 1.33, mb: 3, }} + aria-label={`View issue ${issue.title} on GitHub`} > {issue.title} (#{issue.number}) @@ -70,8 +72,11 @@ function IssueDetails({ issue }: { issue: Issue }) { borderRadius: 2, overflow: 'hidden', }} + role="region" + aria-labelledby={`issue-header-${issue.number}`} >
{open ? ( setOpen(false)} sx={{ position: 'absolute', @@ -119,7 +129,9 @@ function IssueDetails({ issue }: { issue: Issue }) { ) : ( 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" > - + {title} @@ -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} /> @@ -294,6 +310,8 @@ export default function SelectedRowPanel() { display: 'flex', flexDirection: 'column', }} + role="complementary" + aria-label="Row details panel" >