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.

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

Several ActionMenu a11y fixes #2260

Merged
merged 14 commits into from
Sep 29, 2023
Merged

Several ActionMenu a11y fixes #2260

merged 14 commits into from
Sep 29, 2023

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Sep 27, 2023

What are you trying to accomplish?

This PR fixes the following ActionMenu issues:

  1. Hides the menu when focus leaves the component.
  2. Focuses on the first list item when the menu is activated with the mouse.
  3. Allows disabling list items while still permitting them to be focused with the keyboard.

This PR also contains a significant refactoring of ActionMenu's event handling logic and test helpers.

Depends on github/clipboard-copy-element#71

Screenshots

Focusing the first item. Notice the focus ring moves to the second item, indicating the first item was previously focused even though the focus ring does not appear.

focus_first_item.mov

Disabled items can be focused but not activated

disabled_items.mov

Menu closes on focus out

focus_out.mov

Integration

No changes necessary in production.

List the issues that this change affects.

Closes https://github.com/github/primer/issues/2661
Closes #2253
Closes https://github.com/github/primer/issues/2421

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

Accessibility

  • No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@changeset-bot
Copy link

changeset-bot bot commented Sep 27, 2023

🦋 Changeset detected

Latest commit: 3d746cd

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 September 27, 2023 20:45 — 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 Sep 27, 2023
@camertron camertron temporarily deployed to preview September 27, 2023 23:22 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview September 28, 2023 04:09 — with GitHub Actions Inactive
@camertron
Copy link
Contributor Author

camertron commented Sep 28, 2023

NOTE: there will be a few failing system tests until github/clipboard-copy-element#71 is merged, published, and bumped in this PR.

Done

Copy link
Member

@keithamus keithamus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The refactor makes the changes here a little difficult to follow but considering there are new tests and the existing tests pass, I'll trust that this hasn't regressed any behaviour.

@camertron camertron merged commit b584a6b into main Sep 29, 2023
28 checks passed
@camertron camertron deleted the action_menu_close_on_focusout branch September 29, 2023 20:41
@camertron camertron temporarily deployed to preview September 29, 2023 20:41 — with GitHub Actions Inactive
@primer primer bot mentioned this pull request Sep 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javascript Pull requests that update Javascript code patch release ruby Pull requests that update Ruby code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ActionMenu keyboard navigation: pressing space key on focused menu item should trigger the action
2 participants