Skip to content

Conversation

@iansan5653
Copy link
Contributor

This is a few minor fixes for the SelectPanel component:

  1. Change the header and footer sections to use semantic header and footer elements. These elements will now get the HeaderAsNonLandmark and FooterAsNonLandmark roles, meaning that they are semantically the header and footer of the dialog without being the header and footer of the entire page.
  2. Add aria-modal="true" to the SelectPanel dialog. When open, the dialog is the only thing on the page that can be interacted with. Clicking outside causes the dialog to close. Thus, it is a modal.
  3. Make the SelectPanel footer padding consistent with the header padding. This not only looks better (items align to a grid), it also saves a tiny bit of vertical space.

Screenshots

Before

Screenshot of the selectpanel before. The footer padding is much larger than the header padding.

After

Screenshot of the selectpanel after the change. The footer padding is consistent with the header padding.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@iansan5653 iansan5653 requested review from a team and colebemis September 12, 2022 19:57
@changeset-bot
Copy link

changeset-bot bot commented Sep 12, 2022

🦋 Changeset detected

Latest commit: ffe6c0e

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

This PR includes changesets to release 1 package
Name Type
@primer/react 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
Copy link
Contributor

github-actions bot commented Sep 12, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 76.33 KB (+0.02% 🔺)
dist/browser.umd.js 76.95 KB (+0.02% 🔺)

@iansan5653 iansan5653 temporarily deployed to github-pages September 12, 2022 20:03 Inactive
@iansan5653 iansan5653 temporarily deployed to github-pages September 12, 2022 20:26 Inactive
@iansan5653
Copy link
Contributor Author

Closing this for now since it's minor changes and will conflict with #2338. We can revisit later.

@iansan5653 iansan5653 closed this Sep 15, 2022
@joshblack joshblack deleted the selectpanel-tweaks branch January 19, 2023 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants