feat: add keybindingDescription exploration

[joshblack]

@ericwbailey observed that in IconButton's that use a tooltip and a keybinding hint that the computed label was including extra information. This seems due to the fact that we're constructing the keybinding hint using aria-hidden but this is not respected when aria-labelledby or aria-describedby is used.

This PR is an exploration into what it would look like to add a way to provide an appropriate description through keybindingDescription but it would be worth seeing if we can make this work with KeybindingHint directly.

Changelog

New

Changed

• Add conditional to when the loading describedby is provided in ButtonBase
• Update Tooltip so that only the inner context is pointed to by aria-labelledby or aria-describedby
• Add keybindingDescription to see what this would look like to provide an appropriate description for the keybindingHint

Removed

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2fa118d

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

[github-actions]

👋 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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.56 KB (-0.01% 🔽)
packages/react/dist/browser.umd.js	105 KB (+0.11% 🔺)

[ericwbailey]

A little more context, if it's helpful. This work is in response to https://github.com/github/accessibility/issues/8018, which was discovered with a usability testing session with TetraLogical.

There are two user-facing concerns we're trying to address:

• The lack of a pause between the button's accessible name/action (ex: "Save") and its companion description (ex: "Control S").
• Assistive technology will read glyphs literally, so content like ⇧ will be announced as "Upwards White Arrow Commercial".

This work addresses those concerns by allowing for visually maintaining the design, while also providing a mechanism for an author to override the auto-generated string with something that makes more sense for a user to hear.