Uh oh!
There was an error while loading. Please reload this page.
PageHeader: Address dom order issues (screen reader experience feedback from sign-off) - #4358
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: 7bb732d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
broccolinisouptemporarily deployed
to
github-pages
March 6, 2024 01:27 — with 
GitHub Actions
Inactive
Contributor
size-limit report 📦
|
broccolinisouptemporarily deployed
to
github-pages
March 6, 2024 02:30 — with GitHub Actions
Inactive
11 tasks
broccolinisoup
marked this pull request as ready for review
March 6, 2024 05:32
mperrotti
approved these changes
Mar 6, 2024
joshblack
approved these changes
Mar 6, 2024
broccolinisouptemporarily deployed
to
github-pages
March 27, 2024 02:50 — with GitHub Actions
Inactive
broccolinisouptemporarily deployed
to
github-pages
May 10, 2024 00:43 — with GitHub Actions
Inactive
broccolinisouptemporarily deployed
to
github-pages
May 17, 2024 01:17 — with GitHub Actions
Inactive
…eed ternary instead of Nullish coalescing
broccolinisouptemporarily deployed
to
github-pages
May 17, 2024 01:51 — with GitHub Actions
Inactive
broccolinisouptemporarily deployed
to
github-pages
May 17, 2024 02:18 — with GitHub Actions
Inactive
broccolinisouptemporarily deployed
to
github-pages
May 17, 2024 04:36 — with GitHub Actions
Inactive
khiga8 pushed a commit
that referenced
this pull request
May 31, 2024
…ck from sign-off) (#4358) * Update layout styles so that all interactive elements come after the title * Add PageHeder.Breadcrumbs sub component * remove shapshot check on jest * test(vrt): update snapshots * test(vrt): update snapshots * make the interactive element in the heading check a warning not error * add pageheader story for screen reader tes * add links * add onclick events to the buttons * add a placeholder for file content example * test(vrt): update snapshots * elements losing context when viewport is narrrow - keep the same text for buttons in all viewports * fix linting * test(vrt): update snapshots * hide the overflow menu in narrow since we show it on the context area * accomodate different format sx prop for font size * when no fontsize is specified css var returns as an empty string so need ternary instead of Nullish coalescing * temporary fix on navlist --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
13 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Copied from #3816 (due to merge conflicts)
As a part of addressing accessibility sign-off review comments https://github.com/github/primer/issues/1115#issuecomment-1499501472, this PR updates the stories to ensure the order of the elements are the following;
PageHeader.TitleContextArea(all elements)PageHeader.LeadingActionPageHeader.TrailingActionPageHeader.Actionsinstead of
ContextArea(all elements)PageHeader.LeadingActionPageHeader.TitlePageHeader.TrailingActionPageHeader.ActionsThe motivation behind is to make sure the actions on the page that are displayed above or before the main heading (Context area actions and leading action) should come after the main title (
PageHeader.Title). With this way, we make sure screen reader users who navigate through heading menus don't miss any actions.While we updated the dom order in the stories and this is how we will recommend to order the elements, we made sure everything, visually stays the same. (Leveraging CSS grid layout)
sign-off review comment reference
Changelog
New
Changed
Removed
Rollout strategy
This is technically a breaking change but PageHeader is still a draft component, so we are good to realise this as a patch. There is one instance at github/github to be updated and I'll list the commit here to be included in the release PR.
Testing & Reviewing
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.