Skip to content

Conversation

Copy link
Contributor

Copilot AI commented May 25, 2025

Issue

The scrollable content area in the "About" tab was not accessible via keyboard navigation, as outlined in issue #7280. This prevented keyboard users from accessing important information displayed in the scrollable region.

Changes

This PR adds proper keyboard accessibility to the scrollable content in the About tab panel by:

  1. Adding tabIndex={0} to the scrollable container to make it keyboard focusable
  2. Adding aria-label to describe the content area for screen readers
  3. Updating tests to accommodate these changes

These changes ensure that users relying on keyboard navigation can now access all information within the About tab panel, following WCAG 2.1.1 success criteria (Keyboard) and in alignment with the best practices outlined in our accessibility documentation.

<div 
  className="msla-panel-content-container" 
  tabIndex={0} 
  aria-label={intl.formatMessage({
    defaultMessage: 'Scrollable content',
    id: 'panelScrollable',
    description: 'Accessible label for the scrollable content area in the panel'
  })}
>

Fixes #7280.


💡 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.

Copilot AI changed the title [WIP] Elements that have scrollable content under the "About" tab is not accessible by keyboard. Add keyboard accessibility for scrollable content in About tab May 25, 2025
Copilot AI requested a review from hartra344 May 25, 2025 21:24
@hartra344 hartra344 changed the title Add keyboard accessibility for scrollable content in About tab fix(a11y): Add keyboard accessibility for scrollable content in About tab May 26, 2025
@hartra344 hartra344 added the risk:low Low risk change with minimal impact label May 26, 2025
@hartra344
Copy link
Collaborator

This has broken the end to end tests, can you run those tests find the errors and fix them?

Copy link
Contributor Author

Copilot AI commented May 27, 2025

This has broken the end to end tests, can you run those tests find the errors and fix them?

I've fixed the issue that was causing end-to-end tests to fail. The problem was a mismatch between the string ID used in the panel component (DxykM0) and the ID defined in the strings.json file (panelScrollable). I've updated the code to use the correct ID that matches the strings file. This should resolve the test failures.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

risk:low Low risk change with minimal impact

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Elements that have scrollable content under the "About" tab is not accessible by keyboard.

2 participants