ActionBar: Make aria-label mandatory

[pksjce]

Closes # (Didn't create an issue)

Voiceover announcement was wonky without a mandatory aria-label on the ActionBar component.

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

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]

🦋 Changeset detected

Latest commit: c3ea83a

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]

size-limit report 📦

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

[broccolinisoup]

Looks good!

One thing we did for UnderlineNav is to add a runtime check for aria-label as well along with TS required notation. We might consider a similar practise here.

[TylerJDev]

I'm wondering if we might want to also add aria-labelledby as an option, being that you'd be required to use one of the two, but not both, nor none.

[pksjce]

@TylerJDev - Like this?

react/packages/react/src/Button/types.ts

Line 19 in 0a8aff8

type ButtonA11yProps =

?

I like it! Is it common that aria-labelledby will be required for a component like this?

[TylerJDev]

@TylerJDev - Like this?

Yup, exactly!

Is it common that aria-labelledby will be required for a component like this?

It may not be as common, but could be the better option if the context for the ActionBar already exists on the page. I think the most common use case of this will be when there's a heading above the ActionBar that references the content underneath (similarly to how the CommentBox has the "Add a comment" heading above its toolbar).