Fix accessibility issues across SelectedRowPanel, GridHeader, and ColumnTitle components

[Copilot]

This PR addresses several critical accessibility issues that were preventing screen reader users and keyboard-only users from effectively navigating and understanding the application interface.

Issues Fixed

1. Incorrect ARIA Usage in ColumnTitle Component

The column menu button was using aria-labelledby="Column menu" but no element with that ID existed, causing screen readers to announce nothing useful.

Before:

<IconButton
  variant="invisible"
  aria-labelledby="Column menu"  // ❌ References non-existent element
  icon={KebabHorizontalIcon}
/>

After:

<IconButton
  variant="invisible"
  aria-label={`Column menu for ${title}`}  // ✅ Provides contextual label
  icon={KebabHorizontalIcon}
/>

2. Missing Labels in GridHeader Component

Multiple interactive elements lacked proper accessibility labels:

• Search input had only placeholder text (not accessible to screen readers)
• Back navigation button had no accessible name
• Action menu buttons lacked context about their purpose

Improvements:

• Added aria-label="Search grid content" to search input
• Enhanced back button with aria-label="Go back to home", role="button", and tabIndex={0}
• Added descriptive labels to ActionMenu buttons for "Group by column" and "Filter by column"

3. Poor Semantic Structure in SelectedRowPanel Component

The row details panel lacked proper semantic structure and accessible interaction patterns:

Collapsible Content Enhancement:

• Added aria-expanded and aria-controls attributes to expand/collapse buttons
• Implemented unique IDs to properly associate controls with content regions
• Enhanced button labels from generic "Show more/less" to descriptive "Expand/Collapse issue description"

Semantic Structure Addition:

• Added role="complementary" with aria-label="Row details panel" to main container
• Implemented role="banner" for header and role="main" for content area
• Added role="region" with proper labeling for issue content sections
• Enhanced navigation with role="group" and contextual labels like "Navigate between rows"
• Added proper heading structure with role="heading" and aria-level={1}

Impact

These changes significantly improve the accessibility of the application for:

• Screen reader users: All interactive elements now have clear, contextual labels
• Keyboard-only users: Proper focus management and semantic structure
• Users with cognitive disabilities: Better content organization and clearer interaction patterns

Technical Details

• All existing tests continue to pass (43/43 successful)
• No visual changes to the UI
• Follows WCAG 2.1 guidelines for proper ARIA usage and semantic structure
• Added ResizeObserver mock to test setup for better Primer React component testing support

The changes are minimal and surgical, focusing specifically on accessibility without disrupting existing functionality or visual design.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[skylar-anderson]

cursor review

[cursor]

✅ Bugbot reviewed your changes and found no bugs!

---

Bugbot free trial expires on August 18, 2025
Learn more in the Cursor dashboard.