mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-11-10 15:15:00 +03:00
Alireza Ahmadi
1bdb517b88
Ant Design's Spin wraps its content in aria-live="polite", so every WebSocket tick on the dashboard, inbounds, clients and nodes pages was announced, and only the changed number was read, with no label. Pass aria-live="off" on every Spin that wraps content; aria-busy still signals loading. Each vital tile is now a group named by its metric, so "47.2 %" is read as CPU. rc-select renders each tag's remove "x" as an aria-hidden span with no tabIndex, so screen-reader users could only Backspace the last value away, never remove one SNI or inbound from the middle. selectTagRender swaps in a real button named "Remove <value>" and moves focus to the next tag after removal. It is applied to every tags/multiple Select. maxTagCount="responsive" is dropped because it hid selected inbounds behind "+N", where no screen reader could reach them. Two oxlint rules (antd-a11y/spin-content-not-live and antd-a11y/select-tag-remove) keep new code from regressing either fix.
14 lines
683 B
TypeScript
14 lines
683 B
TypeScript
import { Select, Spin } from 'antd';
|
|
|
|
declare const loading: boolean;
|
|
declare const rest: Record<string, unknown>;
|
|
declare function tagRender(): null;
|
|
declare function Other(props: { mode: string; children?: unknown }): null;
|
|
|
|
export const QuietPage = () => <Spin spinning={loading} aria-live="off"><span>42%</span></Spin>;
|
|
export const Indicator = () => <Spin size="large" />;
|
|
export const Single = () => <Select aria-label="Protocol" />;
|
|
export const Tags = () => <Select mode="tags" aria-label="SNI" tagRender={tagRender} />;
|
|
export const Forwarded = () => <Select mode="tags" aria-label="SNI" {...rest} />;
|
|
export const NotAntd = () => <Other mode="tags"><span>x</span></Other>;
|