btlqql opened a new pull request, #4680:
URL: https://github.com/apache/rocketmq-dashboard/pull/4680
<!-- Base branch: `rocketmq-studio`, the RocketMQ Studio trunk. -->
### Brief Description
`MiniBar` (the throughput sparkline) built its `aria-label` from hard-coded
Chinese literals —
`web/src/components/MiniBar.tsx:29` (`'暂无趋势数据'`) and `:47` (``
`趋势数据：${data.join('、')}` ``) —
so the only caller that does not pass an explicit `label`
(`web/src/pages/home/dashboard.tsx:337`, the dashboard's Trend column)
exposed a Chinese accessible
name to assistive technology while the UI was in English, using the
ideographic comma as the
separator in both languages.
Both strings now come from the catalog (`charts.noTrendData`,
`charts.trendData`) and the value
separator follows the active language (`、` for `zh`, `, ` for `en`); an
explicit `label` prop still
wins. The empty-state `<span>` also gains `role="img"` so its label is
actually exposed — previously
the attribute sat on a generic element where assistive technology ignores it.
### How Did You Test This Change?
New cases in `web/src/components/__tests__/MiniBar.test.tsx` render the
component inside
`LangProvider` with the UI language taken from `LANGUAGE_STORAGE_KEY` and
assert the rendered
`aria-label`.
The red below is the new test file against the **unmodified** `MiniBar.tsx`
/ `translations.ts`
(the only other modified file is the test itself). Run with the
repository-local vitest binary
(`vitest 4.1.10`, the `^4.1.10` pinned in `web/package.json`) rather than
`npx vitest`, which would
resolve a different major:
```
$ .\node_modules\.bin\vitest.cmd run
"src/components/__tests__/MiniBar.test.tsx"
RUN v4.1.10 D:/Projects/pr-fixes/rmq-btl-wt/a4-scout/web
❯ src/components/__tests__/MiniBar.test.tsx (6 tests | 2 failed) 239ms
✓ renders zero values without a visible bar 176ms
✓ keeps positive values visible without turning zero into traffic 9ms
...
FAIL src/components/__tests__/MiniBar.test.tsx > MiniBar accessible trend
labels > describes the trend in the active language
AssertionError: expected '趋势数据：1、2、3' to be 'Trend: 1, 2, 3' // Object.is
equality
Expected: "Trend: 1, 2, 3"
Received: "趋势数据：1、2、3"
FAIL src/components/__tests__/MiniBar.test.tsx > MiniBar accessible trend
labels > describes an empty trend in the active language
TestingLibraryElementError: Unable to find an accessible element with the
role "img"
<body>
<div>
<span
aria-label="暂无趋势数据"
style="color: rgb(140, 140, 140);"
>
—
</span>
</div>
</body>
Test Files 1 failed (1)
Tests 2 failed | 4 passed (6)
```
After the fix (green):
```
$ .\node_modules\.bin\vitest.cmd run
"src/components/__tests__/MiniBar.test.tsx"
RUN v4.1.10 D:/Projects/pr-fixes/rmq-btl-wt/a4-scout/web
✓ src/components/__tests__/MiniBar.test.tsx (6 tests) 227ms
Test Files 1 passed (1)
Tests 6 passed (6)
```
Neighbouring suites and static checks:
```
$ .\node_modules\.bin\vitest.cmd run src/components src/i18n
Test Files 13 passed (13)
Tests 101 passed (101)
$ npx tsc -b
(no output, exit 0)
$ npx eslint src/components/MiniBar.tsx
src/components/__tests__/MiniBar.test.tsx src/i18n/translations.ts
(no output, exit 0)
```
### Checklist
- [x] One coherent change; unrelated modifications are not bundled in
- [x] Commit subject follows Conventional Commits (`fix:`)
- [x] Tests added or updated for non-trivial changes, test methods named
`...Test`
- [x] New UI text has both Chinese and English entries under `web/src/i18n/`
(`charts.noTrendData`, `charts.trendData`)
- [x] Architecture constraints stay green (`mvn test` runs the ArchUnit
checks; no server file is touched)
- [x] New source files carry the ASF license header (no new files)
- [x] Documentation touched where behaviour changed (no user-visible
contract change: the sparkline keeps its `label` prop and its rendering; only
the fallback accessible name is localized)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
