Skip to content

frontend: ReleaseNotesModal: Make scrollable region focusable - #7290

Open
Saloni3494 wants to merge 1 commit into
kubernetes-sigs:mainfrom
Saloni3494:fix-7185-releasenotesmodal-a11y
Open

frontend: ReleaseNotesModal: Make scrollable region focusable#7290
Saloni3494 wants to merge 1 commit into
kubernetes-sigs:mainfrom
Saloni3494:fix-7185-releasenotesmodal-a11y

Conversation

@Saloni3494

Copy link
Copy Markdown

Summary

This PR fixes #7185 by ensuring the scrollable region inside the ReleaseNotesModal is accessible via keyboard navigation. By adding tabIndex={0} to the <DialogContent> component, screen readers and keyboard-only users can now properly focus and scroll through the release notes.

Related Issue

Fixes #7185

Changes

  • frontend/src/components/common/ReleaseNotes/ReleaseNotesModal.tsx
    • Appended tabIndex={0} to DialogContent.

Steps to Test

  1. Start Storybook: npm run frontend:storybook
  2. Navigate to common/ReleaseNotes/ReleaseNotesModal -> Show.
  3. Open the Accessibility addon tab and observe that the scrollable-region-focusable violation no longer appears.
  4. Using your keyboard, press Tab to navigate to the scrollable content area and use the arrow keys to scroll.

Notes for the Reviewer

  • Clean branch off main, no conflicts.
  • Adheres to standard React accessibility guidelines (JSX-a11y) for scrollable regions without interactive children.

This change adds tabIndex={0} to the DialogContent in ReleaseNotesModal.tsx. This fixes an accessibility issue where the scrollable region of the modal was not focusable by keyboard navigation, ensuring screen readers can access the content.
@kubernetes-prow

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Saloni3494
Once this PR has been reviewed and has the lgtm label, please assign vyncent-t for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubernetes-prow kubernetes-prow Bot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Aug 16, 2026
@kubernetes-prow
kubernetes-prow Bot requested review from gambtho and yolossn August 16, 2026 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files.

Projects

None yet

1 participant