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

[UnderlineNav2]: Always show at least 2 items in the overflow menu (A11y remediations) #2471

Merged
merged 2 commits into from
Oct 25, 2022

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Oct 24, 2022

Following up the accessibility sign-off review feedback (ref: comment), we need to make sure to have at least two items in the More menu when there is overflow. See @ericwbailey 's comment below for reasoning behind

The thing we are trying to avoid is having only one list item in the "More" nav. If a user cannot see the screen, they may be confused as to why a single list item is present, and mistakenly go looking for the other "missing" list content.

Storybook test link: https://primer-9af4b5b990-13348165.drafts.github.io/storybook/?path=/story/components-underlinenav--default-nav

Merge checklist

  • 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 Oct 24, 2022

🦋 Changeset detected

Latest commit: e139a04

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 Minor

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 Oct 24, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 78.12 KB (0%)
dist/browser.umd.js 78.77 KB (0%)

@broccolinisoup broccolinisoup temporarily deployed to github-pages October 24, 2022 02:04 Inactive
@broccolinisoup broccolinisoup marked this pull request as ready for review October 24, 2022 03:33
@broccolinisoup
Copy link
Member Author

👋🏼 @danielguillan Displaying at least two items in the More menu didn't bring any more complexity and I think it works quite nice. Could I please get your review on that? Looking forward to hearing your feedback 🙌🏼

Copy link
Contributor

@ericwbailey ericwbailey left a comment

Choose a reason for hiding this comment

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

I'm less versed in React than I care to admit, but I'm approving on this is overall desirable behavior from an assistive technology perspective.

@broccolinisoup broccolinisoup temporarily deployed to github-pages October 25, 2022 02:41 Inactive
@broccolinisoup broccolinisoup merged commit d085756 into introduce-disclosure-pattern Oct 25, 2022
@broccolinisoup broccolinisoup deleted the two-items-in-menu branch October 25, 2022 02:41
@broccolinisoup
Copy link
Member Author

@danielguillan I merged this PR into the feature branch. You can review the implementation including the rest of the a11y sign-off feedback in this PR

broccolinisoup added a commit that referenced this pull request Oct 26, 2022
…11y remediations) (#2471)

* Display at least two items in the menu

* add changeset
broccolinisoup added a commit that referenced this pull request Oct 26, 2022
* Disclosure pattern implementation

* use token name for colours instead of accessing them from theme

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

* code review feedback <3

* [UnderlineNav2]: Always show at least 2 items in the overflow menu (A11y remediations) (#2471)

* Display at least two items in the menu

* add changeset

* [UnderlineNav2]: Add visually hidden heading where `aria-label` is present (#2470)

* Add visually hidden heading

* add changeset and a test

* append 'navigation' to the aria-label string

* use prop for 'as'

* add changeset

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants