Skip to content

[Studio] Improve StatusBadge accessibility with semantic aria-label - #663

Open
zhaohai666 wants to merge 1 commit into
apache:rocketmq-studiofrom
zhaohai666:pr-fe-05-statusbadge-a11y
Open

[Studio] Improve StatusBadge accessibility with semantic aria-label#663
zhaohai666 wants to merge 1 commit into
apache:rocketmq-studiofrom
zhaohai666:pr-fe-05-statusbadge-a11y

Conversation

@zhaohai666

Copy link
Copy Markdown

Summary

Improve StatusBadge accessibility by adding a semantic prefix to the
aria-label attribute.

Before: aria-label={label} (e.g. "在线")
After: aria-label={状态:${label}} (e.g. "状态:在线")

This helps screen reader users understand the widget's purpose before
hearing the status value, aligning with WCAG 2.1 guidelines for
informative status indicators.

Test plan

  • Inspect StatusBadge element: aria-label should start with "状态:"
  • Screen reader should announce "状态:在线" instead of just "在线"

…refix

Add "状态:" prefix to aria-label so screen readers announce the widget
purpose before the status value, aligning with WCAG guidelines.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant