(rocketmq-dashboard) branch rocketmq-studio updated: fix: localize status badge accessible names (#627)

[lizhimin]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new d1b5043a fix: localize status badge accessible names (#627)
d1b5043a is described below

commit d1b5043a300e1665e235f42e7d53bb10a4cfd48c
Author: yx9o <yangx_s...@163.com>
AuthorDate: Tue Jul 28 20:55:23 2026 +0800

    fix: localize status badge accessible names (#627)
---
 web/src/components/StatusBadge.tsx                |  2 +-
 web/src/components/__tests__/StatusBadge.test.tsx | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/components/StatusBadge.tsx 
b/web/src/components/StatusBadge.tsx
index 1a38781f..d3b5682e 100644
--- a/web/src/components/StatusBadge.tsx
+++ b/web/src/components/StatusBadge.tsx
@@ -32,7 +32,7 @@ const StatusBadge = ({ status, text, showDot = true }: 
StatusBadgeProps) => {
   const config = STATUS_MAP[status] || STATUS_MAP.offline;
   const label = text || t(config.labelKey);
   return (
-    <Space size={4} role="status" aria-label={`状态：${label}`}>
+    <Space size={4} role="status" aria-label={label}>
       {showDot && <Badge color={config.dot} aria-hidden="true" />}
       <Text style={{ color: config.color, fontSize: 13 }}>{label}</Text>
     </Space>
diff --git a/web/src/components/__tests__/StatusBadge.test.tsx 
b/web/src/components/__tests__/StatusBadge.test.tsx
index 07f08c7e..b9c280fd 100644
--- a/web/src/components/__tests__/StatusBadge.test.tsx
+++ b/web/src/components/__tests__/StatusBadge.test.tsx
@@ -15,14 +15,19 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
+import { afterEach, describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import StatusBadge from '../StatusBadge';
 import { LangProvider } from '../../i18n/LangContext';
+import { LANGUAGE_STORAGE_KEY } from '../../i18n/languagePreference';
 
 const renderWithLang = (ui: React.ReactElement) => 
render(<LangProvider>{ui}</LangProvider>);
 
 describe('StatusBadge', () => {
+  afterEach(() => {
+    localStorage.clear();
+  });
+
   it('renders the translated label for a known status in Chinese', () => {
     renderWithLang(<StatusBadge status="healthy" />);
     // theme.healthy in zh is '运行中'
@@ -74,4 +79,12 @@ describe('StatusBadge', () => {
     const statusEl = container.querySelector('[role="status"]');
     expect(statusEl).toBeInTheDocument();
   });
+
+  it('uses the translated status as its accessible name', () => {
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, 'en');
+
+    renderWithLang(<StatusBadge status="healthy" />);
+
+    expect(screen.getByRole('status')).toHaveAccessibleName('Healthy');
+  });
 });