Skip to content

Add accessible names to page section examples#8262

Open
Judel777 wants to merge 1 commit intopatternfly:mainfrom
Judel777:feat/page-section-accessible-labels
Open

Add accessible names to page section examples#8262
Judel777 wants to merge 1 commit intopatternfly:mainfrom
Judel777:feat/page-section-accessible-labels

Conversation

@Judel777
Copy link
Copy Markdown

@Judel777 Judel777 commented Mar 29, 2026 •
edited by coderabbitai bot
Loading

Fixes #6431

Summary

  • add accessible names to page section examples in the Page component docs and demos
  • use aria-labelledby when a visible heading exists
  • use aria-label for example sections without visible headings

Summary by CodeRabbit

  • Bug Fixes
    • Improved accessibility of page sections with explicit ARIA labels and labeling relationships. Screen reader users can now better navigate and understand the structure and purpose of page sections through proper semantic markup.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 29, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 782c28f1-53d1-4a03-8f48-5eacd8d20e47

📥 Commits

Reviewing files that changed from the base of the PR and between af40892 and 7913a74.

📒 Files selected for processing (3)
  • src/patternfly/components/Page/examples/Page.md
  • src/patternfly/demos/Page/examples/Page.md
  • src/patternfly/demos/Page/page-template-title.hbs

Walkthrough

Updates Page component examples and templates to add ARIA attributes for accessibility. Changes introduce aria-label and aria-labelledby attributes to page-main-section components across documentation examples and demo templates to improve semantic accessibility and section identification.

Changes

Cohort / File(s) Summary
Component Examples
src/patternfly/components/Page/examples/Page.md		 Added aria-label attributes to multiple page-main-section instances across various variants (secondary, fill/no-fill, padding, aligned/limited-width, dock).
Demo Examples & Templates
src/patternfly/demos/Page/examples/Page.md, src/patternfly/demos/Page/page-template-title.hbs		 Enhanced accessibility in centered section demo with aria-labelledby linking to heading id and explicit aria-label attributes; updated template to connect main section with title via aria-labelledby and id.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • kmcfaul
  • srambach
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and directly describes the main change: adding accessible names (aria-label/aria-labelledby) to page section examples, which aligns with the changeset's core objective.
Linked Issues check ✅ Passed The PR implements all requirements from issue #6431: aria-labelledby added where visible headings exist, aria-label added where no visible headings exist, and examples updated across files.
Out of Scope Changes check ✅ Passed All changes are directly scoped to adding accessible names (aria-label/aria-labelledby) to page section examples as specified in issue #6431; no unrelated modifications are present.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Mar 29, 2026 •
edited
Loading

Preview: https://pf-pr-8262.surge.sh

A11y report: https://pf-pr-8262-a11y.surge.sh

@mcoker mcoker requested a review from thatblindgeye March 30, 2026 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@thatblindgeye thatblindgeye Awaiting requested review from thatblindgeye

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Page - update examples to provide aria-label/labelledby to page sections

2 participants

@Judel777 @patternfly-build