fix(ButtonGroup): add toolbar interactions for role toolbar #5200

francinelucca · 2024-10-31T16:59:47Z

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

Introduces an accessibility improvement to ButtonGroup by adding correct toolbar interactions (navigate with left/right arrow instead of tab) when supplied role="toolbar".

Changelog

New

Test file and tests for ButtonGroup
Added ButtonGroup "As Toolbar" story
Added e2e test for new ButtonGroup "As Toolbar" story
Snapshots for new story

Changed

Export ButtonGroup as PolymorphicForwardRefComponent<'div', ButtonGroupProps>
Update ButtonGroup to use focusZone with left/right arrow when role="toolbar" is supplied.

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

Testing & Reviewing

Test deployed As Toolbar story, notice keyboard interaction. Compare to other ButtonGroup stories (these should have normal tab keyboard navigation)

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-10-31T16:59:50Z

🦋 Changeset detected

Latest commit: e8782e2

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 · 2024-10-31T17:00:19Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2024-10-31T17:02:53Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.57 KB (+0.08% 🔺)
packages/react/dist/browser.umd.js	98.87 KB (+0.07% 🔺)

francinelucca · 2024-10-31T17:05:25Z

packages/react/src/ButtonGroup/ButtonGroup.tsx

      {...rest}
    >
      {children}
    </StyledButtonGroup>
  )
-})
+}) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>


Had to add this because the tests where complaining about types when trying to spread ({...props}) of type ButtonGroupProps 🤷🏽‍♀️

…-a-role--does-not-convey-its-purpose' of github.com:primer/react into francinelucca/3423-prcbuttongroup-group-container-lacks-a-role--does-not-convey-its-purpose

primer-integration · 2024-10-31T17:24:29Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/349486

primer-integration · 2024-10-31T17:37:08Z

🟢 golden-jobs completed with status success.

github-actions · 2024-11-01T22:06:00Z

Uh oh! @francinelucca, the image you shared is missing helpful alt text. Check #5200 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

…ainer-lacks-a-role--does-not-convey-its-purpose

joshblack · 2024-11-07T16:57:38Z

packages/react/src/ButtonGroup/ButtonGroup.tsx

+  /**
+   * Settings to apply to the Focus Zone on the ButtonGroup container component. This is only used when role="toolbar" is supplied.
+   */
+  focusZoneSettings?: Partial<FocusZoneHookSettings>


Would there be a way to capture relevant settings people might do as props on the component, instead? Just to avoid coupling this to focusZoneSettings if we want to refactor down the line.

We could potentially forgo the focusZoneSettings prop since this is well scoped for only applying if role="toolbar" is true. Since the expectations are clear on how role="toolbar" should operate with keyboard, I think it's okay if consumers aren't able to pass their own settings.

I'm thinking if they truly needed to utilize their own settings, they could just apply their own useFocusZone outside of the component, as it should replace the one that already exists, but I haven't tested so I'm not sure if it's true 😅

Did a quick test and Tyler's right, useFocusZone in outer component will override behavior, removed focusZoneSettings here e8782e2. Thanks for the suggestion both!

TylerJDev · 2024-11-07T21:25:37Z

packages/react/src/ButtonGroup/ButtonGroup.tsx

  forwardRef,
 ) {
  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
+
+  useFocusZone({


Could we add focusOutBehavior: 'wrap' to the object so that it wraps when you arrow the first/last item?

Done in e8782e2! Thanks so much for the suggestion 🙏🏼

…3-prcbuttongroup-group-container-lacks-a-role--does-not-convey-its-purpose

siddharthkp · 2024-11-08T11:07:46Z

Probably a noob question, but do we anticipate any overlap with ActionBar, which is also a role="toolbar" with buttons and does that change our recommendation?

Both options have no usage till now, ButtonGroup with role=toolbar has 0 instances, experimental/ActionBar also has 0 instances

siddharthkp

Implementation looks good!

TylerJDev

Looks great ✨

francinelucca · 2024-11-08T17:20:59Z

Probably a noob question, but do we anticipate any overlap with ActionBar, which is also a role="toolbar" with buttons and does that change our recommendation?

I think it's fine to have both functionalities in the codebase, we're not making toolbar the default behavior for ButtonGroup but want to support accessibility-wise if that were the use case on the consumer end. ActionBar renders differently than ButtonGroup so I see how there could be valid use cases for both as toolbars depending on what the consumer is trying to do/convey. It also seems like the future of ActionBar on primer is uncertain (see https://github.slack.com/archives/GACAW0NPM/p1730231906392899) so I think we're good to move forward.

Tagging @primer/design-reviewers in case there's any thoughts

fix(ButtonGroup): add toolbar interactions for role toolbar

f959845

francinelucca added staff Author is a staff member component: ButtonGroup status: wip labels Oct 31, 2024

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 31, 2024

Create slow-news-love.md

d904746

francinelucca temporarily deployed to github-pages October 31, 2024 17:03 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5200 October 31, 2024 17:03 Inactive

francinelucca commented Oct 31, 2024

View reviewed changes

francinelucca added 2 commits October 31, 2024 13:10

fix(ButtonGroup): remove unusued import

2309a2d

Merge branch 'francinelucca/3423-prcbuttongroup-group-container-lacks…

ccbe993

…-a-role--does-not-convey-its-purpose' of github.com:primer/react into francinelucca/3423-prcbuttongroup-group-container-lacks-a-role--does-not-convey-its-purpose

francinelucca temporarily deployed to github-pages October 31, 2024 17:12 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5200 October 31, 2024 17:13 Inactive

francinelucca added the update snapshots label Oct 31, 2024

test(vrt): update snapshots

b51c79a

github-actions bot removed the update snapshots label Oct 31, 2024

primer bot temporarily deployed to github-pages October 31, 2024 17:32 Inactive

github-actions bot temporarily deployed to storybook-preview-5200 October 31, 2024 17:32 Inactive

francinelucca mentioned this pull request Nov 1, 2024

docs(ButtonGroup): add guidance around toolbar role primer/design#888

Merged

francinelucca closed this Nov 1, 2024

francinelucca reopened this Nov 1, 2024

francinelucca temporarily deployed to github-pages November 1, 2024 22:08 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5200 November 1, 2024 22:09 Inactive

francinelucca removed the status: wip label Nov 4, 2024

francinelucca added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh status: review needed labels Nov 4, 2024

Merge branch 'main' into francinelucca/3423-prcbuttongroup-group-cont…

fb53032

…ainer-lacks-a-role--does-not-convey-its-purpose

francinelucca marked this pull request as ready for review November 4, 2024 21:33

francinelucca requested review from a team as code owners November 4, 2024 21:33

francinelucca requested review from emilybrick and keithamus November 4, 2024 21:33

francinelucca temporarily deployed to github-pages November 4, 2024 21:35 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5200 November 4, 2024 21:36 Inactive

joshblack reviewed Nov 7, 2024

View reviewed changes

TylerJDev reviewed Nov 7, 2024

View reviewed changes

Merge branch 'main' of github.com:primer/react into francinelucca/342…

7bd33b6

…3-prcbuttongroup-group-container-lacks-a-role--does-not-convey-its-purpose

francinelucca temporarily deployed to github-pages November 8, 2024 03:14 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5200 November 8, 2024 03:14 Inactive

fix(ButtonGroup): remove focusZoneSettings prop

e8782e2

francinelucca requested review from TylerJDev and joshblack November 8, 2024 03:26

francinelucca deployed to github-pages November 8, 2024 03:28 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5200 November 8, 2024 03:29 View deployment

siddharthkp approved these changes Nov 8, 2024

View reviewed changes

TylerJDev approved these changes Nov 8, 2024

View reviewed changes

langermank approved these changes Nov 8, 2024

View reviewed changes

francinelucca added this pull request to the merge queue Nov 8, 2024

Merged via the queue into main with commit b28e6b2 Nov 8, 2024
43 checks passed

francinelucca deleted the francinelucca/3423-prcbuttongroup-group-container-lacks-a-role--does-not-convey-its-purpose branch November 8, 2024 17:49

primer bot mentioned this pull request Nov 8, 2024

Release tracking (37.4.0) #5239

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ButtonGroup): add toolbar interactions for role toolbar #5200

fix(ButtonGroup): add toolbar interactions for role toolbar #5200

francinelucca commented Oct 31, 2024 •

edited

Loading

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 •

edited

Loading

francinelucca Oct 31, 2024

primer-integration bot commented Oct 31, 2024

primer-integration bot commented Oct 31, 2024

github-actions bot commented Nov 1, 2024

joshblack Nov 7, 2024

TylerJDev Nov 7, 2024

francinelucca Nov 8, 2024

TylerJDev Nov 7, 2024

francinelucca Nov 8, 2024

siddharthkp commented Nov 8, 2024 •

edited

Loading

siddharthkp left a comment

TylerJDev left a comment

francinelucca commented Nov 8, 2024

fix(ButtonGroup): add toolbar interactions for role toolbar #5200

fix(ButtonGroup): add toolbar interactions for role toolbar #5200

Conversation

francinelucca commented Oct 31, 2024 • edited Loading

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Oct 31, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 • edited Loading

size-limit report 📦

francinelucca Oct 31, 2024

Choose a reason for hiding this comment

primer-integration bot commented Oct 31, 2024

primer-integration bot commented Oct 31, 2024

github-actions bot commented Nov 1, 2024

joshblack Nov 7, 2024

Choose a reason for hiding this comment

TylerJDev Nov 7, 2024

Choose a reason for hiding this comment

francinelucca Nov 8, 2024

Choose a reason for hiding this comment

TylerJDev Nov 7, 2024

Choose a reason for hiding this comment

francinelucca Nov 8, 2024

Choose a reason for hiding this comment

siddharthkp commented Nov 8, 2024 • edited Loading

siddharthkp left a comment

Choose a reason for hiding this comment

TylerJDev left a comment

Choose a reason for hiding this comment

francinelucca commented Nov 8, 2024

francinelucca commented Oct 31, 2024 •

edited

Loading

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

siddharthkp commented Nov 8, 2024 •

edited

Loading