tju-yxq opened a new pull request, #6202:
URL: https://github.com/apache/rocketmq-dashboard/pull/6202
### Which Issue(s) This PR Fixes
- Fixes #6201
### Brief Description
Mounts every antd toast portal into a live region so toast text is announced
to screen readers, without touching a single call site:
- **`web/src/utils/toastLiveRegions.ts`** (new): lazily creates one
body-level container per toast kind, carrying `role="status"` +
`aria-live="polite"`. Idempotent — every call returns the same element. Polite
is deliberate: toasts are non-emergency confirmations, so they queue behind
what the reader is already saying instead of interrupting; the expiry of a
toast is not announced, which is the desired behaviour.
- **`web/src/StudioApp.tsx`**: wires all three toast paths into those
containers — the static singletons via `message.config({ getContainer })` /
`notification.config({ getContainer })` in a mount effect, and the
`App.useApp()` instances via the `message` / `notification` config props on
antd's `<App>` (the app shell already wraps the tree in `<AntdApp>`).
- The regions are created before any toast can fire, because a live region
that appears in the same DOM update as its content is not reliably announced.
Antd positions the notices itself, so the visual behaviour is unchanged.
No call-site changes: the 60+ files using static `message`, the 13 using
`App.useApp()`, and the 31 using `notification` all become announced through
the two containers.
### How Did You Test This Change?
```
cd web && npx vitest run src/utils/toastLiveRegions.test.tsx
Test Files 1 passed (1)
Tests 3 passed (3)
# exactly one polite status region per toast kind (attributes +
idempotence)
# static singleton toasts render inside the message/notification live
regions
# App.useApp() toasts render inside the live regions through the App
config props
cd web && npx eslint src/utils/toastLiveRegions.ts
src/utils/toastLiveRegions.test.tsx src/StudioApp.tsx --max-warnings=0
(no output — clean)
cd web && npx tsc --noEmit
(no output — exit 0)
# toast-heavy page suites still pass (toasts render unchanged, just
re-parented):
cd web && npx vitest run src/pages/ops/__tests__/SystemAlertsPage.test.tsx
src/components/__tests__/QueueBrowser.test.tsx
Tests 28 passed (28)
```
### Checklist
- [x] One coherent change; unrelated modifications are not bundled in (one
concern — toast feedback must reach screen readers — one helper, its wiring,
its tests)
- [x] Commit subject follows Conventional Commits
- [x] Tests added or updated for non-trivial changes, test methods named
`...Test` (new suite covering region creation semantics and both toast paths
end-to-end)
- [x] New UI text has both Chinese and English entries under `web/src/i18n/`
(no new UI text — attributes and containers only)
- [x] Architecture constraints stay green (no Java changes)
- [x] New source files carry the ASF license header (`toastLiveRegions.ts`
and its test included)
- [ ] Documentation touched where behaviour changed (no visual behaviour
change; screen-reader announcement is the behaviour)
--
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]
