Improve badge accessibility and fix icon-only rendering
Add warning when text parameter is missing and icon_only is true. Hide icons from screen readers when badge has both icon and text. Fix bug where icon_only didn't actually hide text visually. Update Lookbook preview to demonstrate correct usage.
Changelog: changed
What does this MR do and why?
Improves accessibility for the Pajamas::BadgeComponent by:
- Adding a warning when
icon_only: trueis used without thetextparameter - the text becomes thearia-labelfor screen readers - Hiding icons from screen readers when badge has both icon and text by setting
aria_label=""on the icon - Fixing bug where
icon_only: truedidn't actually hide the text visually - Updating Lookbook preview example to demonstrate correct icon-only usage
Why: Icon-only badges need accessible labels for screen readers. The text parameter provides this label, so it must be required when icon_only: true.
No existing instances are impacted because a codebase search found zero usages of icon_only: true in application code. The parameter exists in the API but has never been used outside of test specs (which already provide the required text parameter). This means the validation and bug fix only affect future usage.
References
Relates to gitlab-org/gitlab-services/design.gitlab.com#3197
Usage guidelines updated in gitlab-org/gitlab-services/design.gitlab.com!5370
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
|
|
Preview in Lookbook: http://127.0.0.1:3000/rails/lookbook/inspect/pajamas/badge/
Toggle icon_only to see the badge with only an icon and proper aria-label.
How to set up and validate locally
- Start Lookbook locally
- Navigate to http://127.0.0.1:3000/rails/lookbook/inspect/pajamas/badge/
- Toggle
icon_onlytotrueand verify:- Text is hidden visually
- Badge has
role="img"andaria-labelwith the text value
- Try creating a badge with
icon_only: truebut notextparameter - should raiseArgumentError
Non breaking changes
This MR logs a warning (not an error) when icon_only: true is used without a text parameter. Existing code will continue to work, but developers will be alerted to add proper accessibility labels.
Impact: No migrations needed. Search of the codebase shows no existing usages of icon_only: true in application code (only in test specs, which already provide text).
Migration path:
# Before (will log a warning)
render Pajamas::BadgeComponent.new(icon: 'calendar', icon_only: true)
# After
render Pajamas::BadgeComponent.new(icon: 'calendar', icon_only: true, text: 'Due date')
The text should describe what the metadata represents, not just the icon name.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.



