Skip to content

staging: horsea - #3118

Open
zeroedin wants to merge 4 commits into
mainfrom
staging/horsea
Open

staging: horsea#3118
zeroedin wants to merge 4 commits into
mainfrom
staging/horsea

Conversation

@zeroedin

@zeroedin zeroedin commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Staging: horsea release

Testing Instructions

Notes to Reviewers

* fix(alert): added `close-label` for localization

* docs(alert): localization demo

* fix(alert): need explict attribute name

* fix(alert): use newer accesssible-label not depreated property
@changeset-bot

changeset-bot Bot commented Jul 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f5a2f43

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rhds/elements Minor

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

@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

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

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

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@qodo-for-redhat-ux

Copy link
Copy Markdown

PR Summary by Qodo

rh-alert: add localized close button label via close-label attribute

✨ Enhancement 📝 Documentation ⚙️ Configuration changes 🕐 10-20 Minutes

Grey Divider

AI Description

• Add close-label attribute to localize the `` close button label.
• Wire the close button to use accessible-label instead of the previous label API.
• Add an RTL Hebrew i18n demo and a changeset for the minor release.
Diagram

graph TD
  Demo["Demo/consumer HTML"] --> Attr["close-label attr"] --> Alert["rh-alert"] --> Btn["rh-button (close)"]
  Changeset["Changeset note"] --> Alert
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Expose a close-button slot (consumer provides its own button)
  • ➕ Maximum flexibility for localization and custom behavior/styling
  • ➕ Avoids adding more one-off attributes over time
  • ➖ More complex API surface and documentation
  • ➖ Higher risk of inconsistent UX/accessibility across consumers
  • ➖ Potentially breaking/behavior-changing for existing dismissable alerts
2. Rely on automatic i18n via `lang` without an explicit label
  • ➕ No new public API to maintain
  • ➕ Consumers only set lang/dir
  • ➖ Does not actually localize the close button text/ARIA label without a translation source
  • ➖ Still requires an override mechanism for real-world localization

Recommendation: The current close-label attribute is the best tradeoff: it’s simple, backward-compatible, and directly enables localization of the close control’s accessible name. A close-button slot could be considered later if broader customization needs emerge.

Files changed (3) +35 / -1

Enhancement (1) +4 / -1
rh-alert.tsAdd 'close-label' attribute and bind to close button accessible label +4/-1

Add 'close-label' attribute and bind to close button accessible label

• Adds a 'closeLabel' property mapped to the 'close-label' attribute with a default of "Close". Updates the internal close 'rh-button' to use 'accessible-label' derived from 'closeLabel'.

elements/rh-alert/rh-alert.ts

Documentation (1) +26 / -0
i18n.htmlAdd RTL Hebrew localization demo for 'rh-alert' close label +26/-0

Add RTL Hebrew localization demo for 'rh-alert' close label

• Adds a demo page showing alerts in Hebrew with 'dir="rtl"' and a localized close button label. Imports 'rh-alert' and 'rh-button' for the demo rendering.

elements/rh-alert/demo/i18n.html

Other (1) +5 / -0
clear-llamas-hang.mdAdd changeset for 'rh-alert' close-label localization +5/-0

Add changeset for 'rh-alert' close-label localization

• Introduces a changeset marking a minor '@rhds/elements' release. Documents the new '<rh-alert>' 'close-label' attribute for localized close button labeling.

.changeset/clear-llamas-hang.md

@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Size Change: +310 B (+0.1%)

Total Size: 323 kB

📦 View Changed
Filename Size Change
elements/rh-alert/rh-alert.js 5.59 kB +64 B (+1.16%)
elements/rh-footer/rh-footer-universal.js 5.94 kB +241 B (+4.23%)
elements/rh-footer/rh-footer.js 7.45 kB +5 B (+0.07%)
ℹ️ View Unchanged
Filename Size
elements.js 838 B
elements/rh-accordion/context.js 162 B
elements/rh-accordion/rh-accordion-header.js 3.33 kB
elements/rh-accordion/rh-accordion-panel.js 2.03 kB
elements/rh-accordion/rh-accordion.js 3.67 kB
elements/rh-announcement/rh-announcement.js 2.84 kB
elements/rh-audio-player/rh-audio-player-about.js 2.28 kB
elements/rh-audio-player/rh-audio-player-rate-stepper.js 2.07 kB
elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.78 kB
elements/rh-audio-player/rh-audio-player-subscribe.js 1.9 kB
elements/rh-audio-player/rh-audio-player.js 13.2 kB
elements/rh-audio-player/rh-cue.js 2.32 kB
elements/rh-audio-player/rh-transcript.js 3.38 kB
elements/rh-avatar/random-pattern-controller.js 2.72 kB
elements/rh-avatar/rh-avatar.js 3.45 kB
elements/rh-back-to-top/rh-back-to-top.js 2.79 kB
elements/rh-badge/rh-badge.js 2.05 kB
elements/rh-blockquote/rh-blockquote.js 1.93 kB
elements/rh-breadcrumb/rh-breadcrumb.js 2.34 kB
elements/rh-button-group/rh-button-group.js 937 B
elements/rh-button/rh-button.js 4.15 kB
elements/rh-card/rh-card.js 3.46 kB
elements/rh-chip/context.js 165 B
elements/rh-chip/rh-chip-group.js 1.98 kB
elements/rh-chip/rh-chip.js 2.45 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 9.21 kB
elements/rh-cta/rh-cta.js 3.83 kB
elements/rh-dialog/rh-dialog.js 5.04 kB
elements/rh-dialog/yt-api.js 617 B
elements/rh-disclosure/rh-disclosure.js 3.41 kB
elements/rh-footer/rh-footer-block.js 1.11 kB
elements/rh-footer/rh-footer-copyright.js 649 B
elements/rh-footer/rh-footer-links.js 1.65 kB
elements/rh-footer/rh-footer-social-link.js 1.24 kB
elements/rh-health-index/rh-health-index.js 2.48 kB
elements/rh-icon/rh-icon.js 2.98 kB
elements/rh-icon/ssr.js 181 B
elements/rh-jump-links/context.js 179 B
elements/rh-jump-links/rh-jump-link.js 2.04 kB
elements/rh-jump-links/rh-jump-links-list.js 1.67 kB
elements/rh-jump-links/rh-jump-links.js 3.01 kB
elements/rh-menu-dropdown/rh-menu-dropdown.js 4.61 kB
elements/rh-menu/rh-menu-item-group.js 941 B
elements/rh-menu/rh-menu-item.js 2.52 kB
elements/rh-menu/rh-menu.js 2.04 kB
elements/rh-navigation-link/rh-navigation-link.js 2.21 kB
elements/rh-navigation-primary/context.js 176 B
elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.48 kB
elements/rh-navigation-primary/rh-navigation-primary-item.js 4.22 kB
elements/rh-navigation-primary/rh-navigation-primary.js 10.1 kB
elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 3.15 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 2.02 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 2.01 kB
elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 828 B
elements/rh-navigation-secondary/rh-navigation-secondary.js 6.32 kB
elements/rh-navigation-secondary/test/fixtures.js 769 B
elements/rh-navigation-vertical/rh-navigation-vertical-list.js 2.62 kB
elements/rh-navigation-vertical/rh-navigation-vertical.js 1.65 kB
elements/rh-pagination/rh-pagination.js 6.51 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-readtime/rh-readtime.js 2.93 kB
elements/rh-scheme-dropdown/rh-scheme-dropdown.js 3.79 kB
elements/rh-scheme-toggle/rh-scheme-toggle.js 2.85 kB
elements/rh-select/rh-option-group.js 1.6 kB
elements/rh-select/rh-option.js 2.39 kB
elements/rh-select/rh-select.js 9.46 kB
elements/rh-site-status/rh-site-status.js 2.51 kB
elements/rh-skeleton/rh-skeleton.js 742 B
elements/rh-skip-link/rh-skip-link.js 1.42 kB
elements/rh-spinner/rh-spinner.js 1.71 kB
elements/rh-stat/rh-stat.js 2.71 kB
elements/rh-subnav/rh-subnav.js 3.26 kB
elements/rh-surface/rh-surface.js 865 B
elements/rh-surface/test/elements.js 763 B
elements/rh-switch/rh-switch.js 3.25 kB
elements/rh-table/rh-sort-button.js 1.88 kB
elements/rh-table/rh-table.js 3.27 kB
elements/rh-tabs/context.js 223 B
elements/rh-tabs/rh-tab-panel.js 1.19 kB
elements/rh-tabs/rh-tab.js 4 kB
elements/rh-tabs/rh-tabs.js 4.82 kB
elements/rh-tag/rh-tag.js 3.32 kB
elements/rh-tile/rh-tile-group.js 1.97 kB
elements/rh-tile/rh-tile.js 5.09 kB
elements/rh-timestamp/rh-timestamp.js 1.33 kB
elements/rh-tooltip/rh-tooltip.js 3.4 kB
elements/rh-video-embed/rh-video-embed.js 5.45 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 223 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 207 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 180 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 182 B
react/rh-menu-dropdown/rh-menu-dropdown.js 198 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 182 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 210 B
react/rh-navigation-primary/rh-navigation-primary.js 189 B
react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 227 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 209 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-readtime/rh-readtime.js 175 B
react/rh-scheme-dropdown/rh-scheme-dropdown.js 203 B
react/rh-scheme-toggle/rh-scheme-toggle.js 200 B
react/rh-select/rh-option-group.js 187 B
react/rh-select/rh-option.js 177 B
react/rh-select/rh-select.js 204 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 185 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 184 B
react/rh-tag/rh-tag.js 171 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-adopt-directive.js 2.02 kB
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.89 kB
uxdot/uxdot-example.js 1.14 kB
uxdot/uxdot-feedback.js 979 B
uxdot/uxdot-header.js 886 B
uxdot/uxdot-knob-attribute.js 3.73 kB
uxdot/uxdot-masthead.js 1.47 kB
uxdot/uxdot-pattern-ssr-controller-client.js 386 B
uxdot/uxdot-pattern-ssr-controller-server.js 1.71 kB
uxdot/uxdot-pattern-ssr-controller.js 213 B
uxdot/uxdot-pattern.js 2.37 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 2.08 kB

compressed-size-action

@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Documentation Health

Module Score
rh-alert/rh-alert.js 171/190 90%
rh-footer/rh-footer-universal.js 83/100 83%
rh-footer/rh-footer.js 95/100 95%
Overall 349/390 89%
AlertCloseEvent — 76/90 ✅
Category Score
Element description 11/25 ⚠️
Attribute documentation 20/20
Slot documentation 15/15
CSS documentation 15/15
Event documentation 15/15
Demos 0/0
rh-alert (RhAlert) — 95/100 ✅
Category Score
Element description 25/25
Attribute documentation 20/20
Slot documentation 15/15
CSS documentation 10/15 ⚠️
Event documentation 15/15
Demos 10/10
rh-footer-universal (RhFooterUniversal) — 83/100 ✅
Category Score
Element description 23/25
Attribute documentation 20/20
Slot documentation 15/15
CSS documentation 10/15 ⚠️
Event documentation 15/15
Demos 0/10
rh-footer (RhFooter) — 95/100 ✅
Category Score
Element description 25/25
Attribute documentation 20/20
Slot documentation 15/15
CSS documentation 10/15 ⚠️
Event documentation 15/15
Demos 10/10

Recommendations:

  1. AlertCloseEvent: use RFC 2119 keywords (MUST, SHOULD, AVOID) to clarify requirements (Element description, +5 pts)
  2. rh-alert: reference design tokens or theme considerations in CSS descriptions (CSS documentation, +5 pts)
  3. rh-footer-universal: reference design tokens or theme considerations in CSS descriptions (CSS documentation, +5 pts)
  4. rh-footer-universal: add at least one demo with a URL (Demos, +5 pts)
  5. rh-footer-universal: add demos with descriptions (Demos, +5 pts)

@qodo-for-redhat-ux

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)

Grey Divider


Remediation recommended

1. Docs omit close-label 🐞 Bug ⚙ Maintainability
Description
This PR introduces a new public close-label attribute on <rh-alert>, but
elements/rh-alert/README.md still lists only dismissable as a supported attribute, making the
published API documentation incomplete. This reduces discoverability of the localization feature
that the changeset and new demo are explicitly adding.
Code

elements/rh-alert/rh-alert.ts[R175-176]

+  /** Accessible label for the close button, used for localization. */
+  @property({ attribute: 'close-label' }) closeLabel = 'Close';
Relevance

●●● Strong

Team often accepts API/doc completeness updates (e.g., document new public API in #2308; rh-alert
README updated in #2886).

PR-#2308
PR-#2886

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The PR adds and publicly announces close-label, but the README’s attribute list is now incomplete,
which is a documentation regression introduced by the new API.

elements/rh-alert/rh-alert.ts[175-176]
.changeset/clear-llamas-hang.md[1-5]
elements/rh-alert/demo/i18n.html[1-21]
elements/rh-alert/README.md[18-26]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`<rh-alert>` now supports a new public `close-label` attribute (for localizing the close button’s accessible name), but the component README still enumerates only `dismissable` under “attributes”. This leaves the docs incorrect/incomplete for the newly shipped API.

### Issue Context
- The changeset announces the new API.
- `rh-alert.ts` implements it and the new demo uses it.
- `elements/rh-alert/README.md` does not mention `close-label` at all.

### Fix
- Update `elements/rh-alert/README.md` “attributes” section to include:
 - `close-label` (string)
 - purpose: accessible label for the dismiss/close button
 - default: `Close`
 - note: only relevant when `dismissable` is enabled (i.e., when the close button is rendered).
- (Optional) add a short usage snippet demonstrating localization (can reference the demo content).

### Fix Focus Areas
- elements/rh-alert/README.md[18-26]
- elements/rh-alert/rh-alert.ts[175-176]
- .changeset/clear-llamas-hang.md[1-5]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

To customize comments, go to the Qodo configuration screen, or learn more in the docs.

Qodo Logo

Comment on lines +175 to +176
/** Accessible label for the close button, used for localization. */
@property({ attribute: 'close-label' }) closeLabel = 'Close';

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Remediation recommended

1. Docs omit close-label 🐞 Bug ⚙ Maintainability

This PR introduces a new public close-label attribute on <rh-alert>, but
elements/rh-alert/README.md still lists only dismissable as a supported attribute, making the
published API documentation incomplete. This reduces discoverability of the localization feature
that the changeset and new demo are explicitly adding.
Agent Prompt
### Issue description
`<rh-alert>` now supports a new public `close-label` attribute (for localizing the close button’s accessible name), but the component README still enumerates only `dismissable` under “attributes”. This leaves the docs incorrect/incomplete for the newly shipped API.

### Issue Context
- The changeset announces the new API.
- `rh-alert.ts` implements it and the new demo uses it.
- `elements/rh-alert/README.md` does not mention `close-label` at all.

### Fix
- Update `elements/rh-alert/README.md` “attributes” section to include:
  - `close-label` (string)
  - purpose: accessible label for the dismiss/close button
  - default: `Close`
  - note: only relevant when `dismissable` is enabled (i.e., when the close button is rendered).
- (Optional) add a short usage snippet demonstrating localization (can reference the demo content).

### Fix Focus Areas
- elements/rh-alert/README.md[18-26]
- elements/rh-alert/rh-alert.ts[175-176]
- .changeset/clear-llamas-hang.md[1-5]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

* fix(footer): point RHDC domains to `www` and use `/en` in default slotted content

* fix(footer): simplify global logo anchor accessible name

* feat(footer): add a `logoHref` prop to the universal footer red hat logo

* chore(footer): add changesets

* test(footer): update RHDC URL to `https://www.redhat.com/en`

* docs(footer): update slot and part docs to point to redhat.com/en

* fix(footer): guard against empty `logo-href` attributes and provide a fallback

* test(footer): add tests for various states of `logo-href`

* test(footer): update RHDC url in test assertion

Mostly for the benefit of AI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

2 participants