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

Fix keyboard functionality with deferred loading in ActionMenu #2059

Merged
merged 4 commits into from
Jun 8, 2023

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Jun 5, 2023

What are you trying to accomplish?

This PR addresses the keyboard accessibility issues described in https://github.com/github/primer/issues/2245.

Screenshots

See the issue linked above for a "before" video.

After:

action_menu_keyboard_deferred_loading.mov

Integration

This change does not require any changes to production.

List the issues that this change affects.

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

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.

What approach did you choose and why?

I removed our handling of the focusout event and replaced it with code that handles events from the <include-fragment-element> to focus the first element after deferred content has loaded.

Anything you want to highlight for special attention from reviewers?

I discovered the issue was that we were improperly handling the focusout event by using it to close the popover. This code was part of the original component built by the a11y team, so I fear I may have removed important functionality. Removing it however does not cause any tests to fail, so I assume we're good, but I need someone familiar with that old code to examine this PR carefully.

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

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Jun 5, 2023

🦋 Changeset detected

Latest commit: 1658de2

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

@github-actions github-actions bot added the javascript Pull requests that update Javascript code label Jun 5, 2023
@camertron camertron temporarily deployed to preview June 5, 2023 18:02 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages June 5, 2023 18:06 — with GitHub Actions Inactive
@camertron camertron marked this pull request as ready for review June 5, 2023 18:16
@camertron camertron requested review from a team, jonrohan, langermank and keithamus and removed request for jonrohan June 5, 2023 18:16
@camertron camertron merged commit bf60d7d into main Jun 8, 2023
@camertron camertron deleted the fix_action_menu_deferred_loading branch June 8, 2023 21:24
@primer-css primer-css mentioned this pull request Jun 8, 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants