Skip to content

docs(button-group): add docs around role="group" and role="toolbar"#2842

Open
adamjohnson wants to merge 3 commits intostaging/eeveefrom
docs/button-group/add-a11y-docs
Open

docs(button-group): add docs around role="group" and role="toolbar"#2842
adamjohnson wants to merge 3 commits intostaging/eeveefrom
docs/button-group/add-a11y-docs

Conversation

@adamjohnson
Copy link
Collaborator

@adamjohnson adamjohnson commented Feb 24, 2026

What I did

  1. Added docs surrounding role="group" and role="toolbar" to the <rh-button-group> Accessibility page.
  2. Closes [docs] <rh-button-group>: add accessibility docs #2769.

Testing Instructions

  1. Go to the Accessibility page for <rh-button-group> in the DP.
  2. Verify spelling, grammar, clarity, order.
  3. Verify content is accurate in regards to accessibility.
  4. Like an subscribe.

@adamjohnson adamjohnson added this to the 2026/Q1 — Eevee release milestone Feb 24, 2026
@adamjohnson adamjohnson self-assigned this Feb 24, 2026
@adamjohnson adamjohnson added the docs Improvements or additions to documentation label Feb 24, 2026
@changeset-bot
Copy link

changeset-bot bot commented Feb 24, 2026

⚠️ No Changeset found

Latest commit: 6b4cf92

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

@netlify
Copy link

netlify bot commented Feb 24, 2026

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit 6b4cf92
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/699f5e4f6224280008bc424e
😎 Deploy Preview https://deploy-preview-2842--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@adamjohnson adamjohnson linked an issue Feb 24, 2026 that may be closed by this pull request
@github-actions
Copy link
Contributor

github-actions bot commented Feb 24, 2026

Documentation Health

Module Score
rh-button-group/rh-button-group.js 68/100 ⚠️ 68%
Overall 68/100 ⚠️ 68%
rh-button-group (RhButtonGroup) — 68/100 ⚠️
Category Score
Element description 8/25
Attribute documentation 20/20
Slot documentation 10/15 ⚠️
CSS documentation 10/15 ⚠️
Event documentation 15/15
Demos 5/10 ⚠️

Recommendations:

  1. rh-button-group: describe purpose and context using words like 'for', 'when', 'provides', 'allows' (Element description, +5 pts)
  2. rh-button-group: use RFC 2119 keywords (MUST, SHOULD, AVOID) to clarify requirements (Element description, +5 pts)
  3. rh-button-group: mention accessibility considerations for slot content (Slot documentation, +5 pts)
  4. rh-button-group: reference design tokens or theme considerations in CSS descriptions (CSS documentation, +5 pts)
  5. rh-button-group: add descriptions to demos (Demos, +5 pts)

@github-actions
Copy link
Contributor

github-actions bot commented Feb 24, 2026

Size Change: +193 B (+0.07%)

Total Size: 261 kB

Filename Size Change
./elements/rh-button-group/rh-button-group.js 872 B +193 B (+28.42%) 🚨
ℹ️ View Unchanged
Filename Size
./elements.js 640 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.71 kB
./elements/rh-accordion/rh-accordion-panel.js 1.27 kB
./elements/rh-accordion/rh-accordion.js 3.35 kB
./elements/rh-alert/rh-alert.js 5.09 kB
./elements/rh-announcement/rh-announcement.js 2.18 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.83 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.47 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.41 kB
./elements/rh-audio-player/rh-audio-player.js 12.4 kB
./elements/rh-audio-player/rh-cue.js 1.95 kB
./elements/rh-audio-player/rh-transcript.js 2.68 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 3.01 kB
./elements/rh-back-to-top/rh-back-to-top.js 1.98 kB
./elements/rh-badge/rh-badge.js 1.62 kB
./elements/rh-blockquote/rh-blockquote.js 1.38 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.67 kB
./elements/rh-button/rh-button.js 3.36 kB
./elements/rh-card/rh-card.js 3.13 kB
./elements/rh-chip/context.js 165 B
./elements/rh-chip/rh-chip-group.js 1.58 kB
./elements/rh-chip/rh-chip.js 2.06 kB
./elements/rh-code-block/prism.css.js 667 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 8.71 kB
./elements/rh-cta/rh-cta.js 3.72 kB
./elements/rh-dialog/rh-dialog.js 4.72 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-disclosure/rh-disclosure.js 2.53 kB
./elements/rh-footer/rh-footer-block.js 714 B
./elements/rh-footer/rh-footer-copyright.js 357 B
./elements/rh-footer/rh-footer-links.js 1.1 kB
./elements/rh-footer/rh-footer-social-link.js 1.03 kB
./elements/rh-footer/rh-footer-universal.js 3.99 kB
./elements/rh-footer/rh-footer.js 4.67 kB
./elements/rh-health-index/rh-health-index.js 2.11 kB
./elements/rh-icon/rh-icon.js 2.52 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-jump-links/context.js 179 B
./elements/rh-jump-links/rh-jump-link.js 1.48 kB
./elements/rh-jump-links/rh-jump-links-list.js 1.17 kB
./elements/rh-jump-links/rh-jump-links.js 2.38 kB
./elements/rh-menu-dropdown/rh-menu-dropdown.js 4.12 kB
./elements/rh-menu/rh-menu-item-group.js 614 B
./elements/rh-menu/rh-menu-item.js 2.21 kB
./elements/rh-menu/rh-menu.js 1.6 kB
./elements/rh-navigation-link/rh-navigation-link.js 1.87 kB
./elements/rh-navigation-primary/context.js 176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js 3.46 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js 534 B
./elements/rh-navigation-primary/rh-navigation-primary.js 7.67 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.31 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.68 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.23 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-navigation-vertical/rh-navigation-vertical-list.js 2.24 kB
./elements/rh-navigation-vertical/rh-navigation-vertical.js 1.54 kB
./elements/rh-pagination/rh-pagination.js 5.82 kB
./elements/rh-progress-stepper/context.js 187 B
./elements/rh-progress-stepper/rh-progress-step.js 3.02 kB
./elements/rh-progress-stepper/rh-progress-stepper.js 4.78 kB
./elements/rh-scheme-toggle/rh-scheme-toggle.js 1.91 kB
./elements/rh-site-status/rh-site-status.js 2.44 kB
./elements/rh-skeleton/rh-skeleton.js 677 B
./elements/rh-skip-link/rh-skip-link.js 1.33 kB
./elements/rh-spinner/rh-spinner.js 1.31 kB
./elements/rh-stat/rh-stat.js 2.05 kB
./elements/rh-subnav/rh-subnav.js 2.98 kB
./elements/rh-surface/rh-surface.js 911 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-switch/rh-switch.js 2.83 kB
./elements/rh-table/rh-sort-button.js 1.39 kB
./elements/rh-table/rh-table.js 2.81 kB
./elements/rh-tabs/context.js 226 B
./elements/rh-tabs/rh-tab-panel.js 1 kB
./elements/rh-tabs/rh-tab.js 3.01 kB
./elements/rh-tabs/rh-tabs.js 3.65 kB
./elements/rh-tag/rh-tag.js 2.96 kB
./elements/rh-tile/rh-tile-group.js 1.78 kB
./elements/rh-tile/rh-tile.js 4.71 kB
./elements/rh-timestamp/rh-timestamp.js 991 B
./elements/rh-tooltip/rh-tooltip.js 3.18 kB
./elements/rh-video-embed/rh-video-embed.js 4.64 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 591 B
./lib/context/headings/provider.js 1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js 1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.18 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.37 kB
./lib/ScreenSizeController.js 876 B
./lib/ssr-controller.js 201 B
./lib/themable.js 549 B
./react/lib/color-palettes.js 97 B
./react/lib/context/headings/consumer.js 103 B
./react/lib/context/headings/provider.js 105 B
./react/lib/elements/rh-context-demo/rh-context-demo.js 186 B
./react/lib/elements/rh-context-picker/rh-context-picker.js 189 B
./react/lib/functions.js 92 B
./react/lib/I18nController.js 97 B
./react/lib/ScreenSizeController.js 102 B
./react/lib/ssr-controller.js 97 B
./react/lib/themable.js 91 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 202 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-announcement/rh-announcement.js 189 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 199 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 187 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button-group/rh-button-group.js 184 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-chip/rh-chip-group.js 182 B
./react/rh-chip/rh-chip.js 187 B
./react/rh-code-block/rh-code-block.js 193 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-disclosure/rh-disclosure.js 192 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 195 B
./react/rh-jump-links/rh-jump-link.js 183 B
./react/rh-jump-links/rh-jump-links-list.js 189 B
./react/rh-jump-links/rh-jump-links.js 195 B
./react/rh-menu-dropdown/rh-menu-dropdown.js 185 B
./react/rh-menu/rh-menu-item-group.js 190 B
./react/rh-menu/rh-menu-item.js 181 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-link/rh-navigation-link.js 186 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js 205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js 198 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js 199 B
./react/rh-navigation-primary/rh-navigation-primary.js 189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-navigation-vertical/rh-navigation-vertical-list.js 198 B
./react/rh-navigation-vertical/rh-navigation-vertical.js 189 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-progress-stepper/rh-progress-step.js 196 B
./react/rh-progress-stepper/rh-progress-stepper.js 186 B
./react/rh-scheme-toggle/rh-scheme-toggle.js 183 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skeleton/rh-skeleton.js 176 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 174 B
./react/rh-table/rh-sort-button.js 200 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 181 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/ssr-failure-recoverable.js 658 B
./uxdot/uxdot-best-practice.js 812 B
./uxdot/uxdot-copy-button.js 1.24 kB
./uxdot/uxdot-copy-permalink.js 1.14 kB
./uxdot/uxdot-demo.js 2.76 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 983 B
./uxdot/uxdot-header.js 886 B
./uxdot/uxdot-knob-attribute.js 3.73 kB
./uxdot/uxdot-masthead.js 1.45 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 1.24 kB
./uxdot/uxdot-pattern-ssr-controller-server.js 1.71 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.39 kB
./uxdot/uxdot-repo-status-checklist.js 1.39 kB
./uxdot/uxdot-repo-status-list.js 1.24 kB
./uxdot/uxdot-repo.js 867 B
./uxdot/uxdot-sidenav.js 2.04 kB
./uxdot/uxdot-spacer-tokens-table.js 2.45 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

@adamjohnson adamjohnson moved this to Review 🔍 in Red Hat Design System Feb 24, 2026
@adamjohnson adamjohnson marked this pull request as ready for review February 24, 2026 21:02
Copy link
Member

@bennypowers bennypowers left a comment

Choose a reason for hiding this comment

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

This ought to be summarized (with rfc2119 keywords) in the jsdoc

Copy link
Member

Choose a reason for hiding this comment

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

this has to go in the appropriate places on public apis like slots and attr, or in the element description, otherwise it won't make it into the final manifest

see #2738 for examples

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to documentation

Projects

Status: Review 🔍

Development

Successfully merging this pull request may close these issues.

[docs] <rh-button-group>: add accessibility docs

2 participants