PageHeader: Address dom order issues (screen reader experience feedback from sign-off) #4358
Conversation
This file contains 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
🦋 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 |
broccolinisoup
changed the title
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
size-limit report 📦
|
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
11 tasks
mperrotti
approved these changes
Mar 6, 2024
joshblack
approved these changes
Mar 6, 2024
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…eed ternary instead of Nullish coalescing
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
broccolinisoup
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Merged
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.