Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
thatblindgeye opened this issue Mar 18, 2024 · 4 comments · May be fixed by #11740 or #11741
Open

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

thatblindgeye opened this issue Mar 18, 2024 · 4 comments · May be fixed by #11740 or #11741
Assignees
@Mash707
Labels
A11y

Comments

@thatblindgeye
Copy link
Contributor

Describe the enhancement or change
Examples where the page section component is being used (with the <section> element) should be updated to provide an aria-labelledby (if a visible text heading exists in the section) or aria-label (if no visible text heading exists). Context can be found in the following comment chain: patternfly/patternfly-org#3880 (comment)

Completing thia and the React counterpart will go towards adding in verbiage from the following commit in the Page a11y docs

Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?

Any other information?
@github-project-automation github-project-automation bot moved this to Needs triage in PatternFly Issues Mar 18, 2024
@thatblindgeye thatblindgeye mentioned this issue Mar 18, 2024
Merged
@tlabaj tlabaj moved this from Needs triage to Backlog in PatternFly Issues Mar 20, 2024
@tlabaj tlabaj added this to the Prioritized Backlog milestone Mar 20, 2024
@kmcfaul kmcfaul removed the Tech debt label Oct 25, 2024
@tlabaj tlabaj removed this from the Prioritized Backlog milestone Nov 21, 2024
@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@github-actions github-actions bot added the Stale label Jan 26, 2025
@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@github-actions github-actions bot added the Stale label Mar 30, 2025
@Mash707
Copy link
Contributor

Mash707 commented Apr 2, 2025

@thatblindgeye I went through the discussion. From what I understand is that we need to add aria-label to PageSection component. For example - <PageSection isWidthLimited isCenterAligned aria-label = "Width limited content section">

patternfly-react/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx

Lines 71 to 82 in 4ea82f7

<PageSection isWidthLimited isCenterAligned>
<Card>
<CardBody>
When a width limited page section is wider than the value of
<code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
<br />
<br />
The content in this example is placed in a card to better illustrate how the section behaves when it is
centered. A card is not required to center a page section.
</CardBody>
</Card>
</PageSection>

Currently I have not gone through all examples to see where aria-lablelledby can be used.

@thatblindgeye
Copy link
Contributor Author

Instances where aria-labelledby can be used may be more rare than aria-label for sure, but that'd be fine if that is the case. Really just keeping an eye out for whether there's a heading level that labels a section.

@Mash707 Mash707 linked a pull request Apr 3, 2025 that will close this issue
Open
@Mash707 Mash707 linked a pull request Apr 4, 2025 that will close this issue
Open
@thatblindgeye thatblindgeye moved this from Backlog to PR Review in PatternFly Issues Apr 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Mash707 Mash707

Labels
A11y
Projects
PatternFly Issues
Status: PR Review
Milestone
No milestone
4 participants
@tlabaj @kmcfaul @thatblindgeye @Mash707