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

docs(AnchoredOverlay): add role, aria-label and aria-modal to stories #5184

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Oct 28, 2024

Closes https://github.com/github/primer/issues/3450

Following strategy used in #5175, add proper role to AnchoredOverlay stories.

Changelog

New

  • Added role="dialog", aria-label and aria-modal=true to AnchoredOverlay stories via overlayProps

Changed

  • Modify hovercard in AnchoredOverlay stories to have more than one focus stop
  • Modify AnchoredOverlay stories to have focusZone disabled so that the focus can be navigated through tabs instead of arrows.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Docs only update

Testing & Reviewing

Test deployed storybook AnchoredOverlay stories. Verify:

  • Role dialog
  • aria-model true
  • Focus inside overlay on open
  • Focus trap behavior
  • Ability to close on escape

Merge checklist

Copy link

changeset-bot bot commented Oct 28, 2024

⚠️ No Changeset found

Latest commit: 2f0992b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@francinelucca francinelucca added staff Author is a staff member component: AnchoredOverlay docs Documentation skip changeset This change does not need a changelog labels Oct 28, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5184 October 28, 2024 23:33 Inactive
Copy link
Contributor

github-actions bot commented Oct 28, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 97.19 KB (0%)
packages/react/dist/browser.umd.js 97.58 KB (0%)

@francinelucca francinelucca marked this pull request as ready for review October 28, 2024 23:40
@francinelucca francinelucca requested a review from a team as a code owner October 28, 2024 23:40
Copy link
Contributor

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

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

Only thing I could add is if we can add aria-label to the examples that have role="dialog" similar to #5186? Other than that, LGTM! 🚀

@francinelucca francinelucca changed the title docs(AnchoredOverlay): add role and aria-modal to stories docs(AnchoredOverlay): add role, aria-label and aria-modal to stories Oct 29, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5184 October 29, 2024 18:51 Inactive
…ed-overlay-at-the-end-of-the-document-causing-content-ordermeaningful-sequence-failure
Copy link
Contributor

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

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

:shipit:

@francinelucca francinelucca added this pull request to the merge queue Oct 30, 2024
Merged via the queue into main with commit 45ca56b Oct 30, 2024
43 checks passed
@francinelucca francinelucca deleted the francinelucca/3450-prcanchoredoverlay-rendered-overlay-at-the-end-of-the-document-causing-content-ordermeaningful-sequence-failure branch October 30, 2024 19:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: AnchoredOverlay docs Documentation skip changeset This change does not need a changelog staff Author is a staff member status: review needed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants