Skip to content
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

Lots of a11y fixes for NavList, round 2 #1943

Merged
merged 38 commits into from
May 2, 2023
Merged

Lots of a11y fixes for NavList, round 2 #1943

merged 38 commits into from
May 2, 2023

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Apr 11, 2023 •
edited
Loading

Description

Fixes https://github.com/github/primer/issues/1120

This PR contains the following a11y fixes for ActionList and NavList:

  1. Moves the "show more" item outside its group.
  2. Converts the "show more" item into a button (currently a <div>).
  3. Improves the text of "show more" items in previews to be more descriptive.
  4. Removes an arg from the docs that's no longer used.
  5. Attaches aria-labels to the <nav> element in all previews.
  6. Raises an error if an aria-label is not provided.
  7. Groups are now required to have headings.
  8. Groups are labelled by headings and described by subtitles.
  9. Added support for top-level items. Markup now dynamically changes depending on whether top-level items are present or the list contains only groups.
  10. Added support for a top-level heading slot that will render an <h2> by default. Group headings render as <h3>s by default.

Integration

Does this change require any updates to code in production?

  1. Any usages of NavLists that currently do not pass an aria-label will need to do so.
  2. The usages of NavList on the repo, org, and user settings pages that have 1-item groups should use top-level items instead.
  3. Any NavList that is preceded by a heading should incorporate that heading into the component using the new top-level heading slot.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews

@changeset-bot
Copy link

changeset-bot bot commented Apr 11, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: b78a13f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

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

@camertron camertron temporarily deployed to preview April 11, 2023 03:44 — with GitHub Actions Inactive
@github-actions github-actions bot added javascript Pull requests that update Javascript code ruby Pull requests that update Ruby code labels Apr 11, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 11, 2023 •
edited
Loading

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

@camertron camertron temporarily deployed to preview April 11, 2023 17:02 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 11, 2023 17:20 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 11, 2023 17:26 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 12, 2023 21:43 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 21, 2023 18:08 — with GitHub Actions Inactive
@github-actions github-actions bot added the css Pull requests that update CSS code label Apr 21, 2023
@camertron camertron temporarily deployed to preview April 21, 2023 18:37 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 21, 2023 18:41 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 21, 2023 20:21 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 21, 2023 20:25 — with GitHub Actions Inactive
@camertron camertron marked this pull request as ready for review April 21, 2023 20:26
@camertron camertron requested a review from a team as a code owner April 21, 2023 20:26
@camertron camertron temporarily deployed to preview April 27, 2023 23:06 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 27, 2023 23:11 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 28, 2023 18:06 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 28, 2023 18:10 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 28, 2023 18:15 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 28, 2023 20:28 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 28, 2023 20:32 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview April 28, 2023 21:04 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages April 28, 2023 21:08 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview May 1, 2023 21:00 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages May 1, 2023 21:05 — with GitHub Actions Inactive
@camertron camertron merged commit 40912f6 into main May 2, 2023
@camertron camertron deleted the nav_list_a11y_round2 branch May 2, 2023 17:54
@primer-css primer-css mentioned this pull request May 2, 2023
Merged
@strackoverflow strackoverflow mentioned this pull request Oct 24, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank langermank approved these changes

@jonrohan jonrohan Awaiting requested review from jonrohan

Assignees
No one assigned
Labels
css Pull requests that update CSS code javascript Pull requests that update Javascript code patch release ruby Pull requests that update Ruby code
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@camertron @jonrohan @langermank