mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-12 06:10:58 +00:00
* feat(a11y): label list, toolbar & dashboard actions for screen readers Phase 1 of #5486 (Android TalkBack support). Icon-only controls across the management surfaces previously announced only their untranslated icon name (e.g. "edit", "ellipsis") or nothing at all. - Add aria-label to icon-only row-action and toolbar buttons across inbounds, clients, groups, hosts, nodes and xray (outbounds/routing/dns/balancers) lists, plus the dashboard cards. - Make clickable bare icons and AntD Card actions keyboard-operable via role/tabIndex + Enter/Space (new activateOnKey helper); convert mobile dropdown triggers to buttons so they open from the keyboard. - Fix the sidebar hamburger's mislabeled aria-label (was the dashboard label) and translate previously-hardcoded outbound menu labels. New i18n keys in all 13 locales: sort, menu.openMenu, pages.xray.outbound.moveToTop. * feat(a11y): label modal, QR and copy/download controls for screen readers Phase 2 of #5486. Modal and overlay controls relied on tooltips (not a reliable accessible name) or were bare clickable icons with no keyboard or screen-reader support. - Add aria-label to copy/QR/download/info icon buttons in the inbound and client info modals, sub-links modal, QR panel, backup/log modals, and to the bare search/select inputs of the attach/detach client modals. - Make click-to-copy QR codes and the IP-log refresh/clear, geofile reload and log refresh icons keyboard-operable (role/tabIndex + Enter/Space) with translated labels. - Label the 2FA code input; drop the QrPanel download-image string fallback now that the key exists. New i18n key in all 13 locales: downloadImage. * feat(a11y): label form fields and shared form components for screen readers Phase 3 of #5486. Form controls and shared form widgets were largely unlabelled, and several remove controls were not keyboard-operable. - SettingListItem now ties its title to the control via aria-labelledby, giving accessible names to the ~90 settings-tab inputs at once. - InputAddon gains button semantics (role/tabIndex/Enter+Space) and an ariaLabel prop when used as an interactive remove control. - Sparkline charts expose a role="img" summary of their latest values. - Add aria-label to add/remove/regenerate icon buttons and bare inputs/selects across inbound, client and xray (dns/routing/balancer/ outbound) forms; make clickable remove icons keyboard-operable; mark decorative help/target icons aria-hidden; label the JSON editor, date-time clear button, header-map remove, notification select-all and remark token chips. New i18n keys in all 13 locales: regenerate, jsonEditor, pages.xray.balancer.{costMatch,costValue,costRegexp}. * chore(a11y): add eslint-plugin-jsx-a11y harness and fix flagged interactions Phase 4 of #5486. Adds eslint-plugin-jsx-a11y (recommended ruleset, scoped to .tsx) so screen-reader/keyboard regressions fail lint. - Make the mobile node-card header a proper keyboard disclosure (role=button, aria-expanded, Enter/Space activation that ignores clicks on the nested action buttons) and drop the now-redundant stop-propagation click handlers the linter flagged on card-action wrappers in the node, client and inbound mobile cards. - Disable jsx-a11y/no-autofocus: the autofocus on the login field and modal primary inputs is intentional focus management that helps screen-reader and keyboard users land on the right control. make lint passes with the a11y ruleset enforced. * feat(a11y): cover remaining deferred spots (settings tabs, sockopt, API docs) Completes the panel sweep for #5486 by labelling the spots previously left out of phases 1-4: - NotifyTimeField (Telegram notifications): the mode, interval, unit and custom-cron inputs now carry aria-labels. - The Sockopt toggle in transport options. - Settings category tabs in icons-only (mobile) mode now expose the tab name as the icon's aria-label instead of the raw icon name. - The Swagger API-docs view is wrapped in a labelled region landmark. New i18n keys in all 13 locales: pages.settings.notifyTime.{interval,unit}. * feat(a11y): label shared xray form components and remark field Code review surfaced frontend/src/lib/xray/forms/ — shared form components used by the host and inbound JSON forms — which the initial audit missed. - FinalMaskForm (TCP/UDP final-mask editor): label the icon-only add and regenerate buttons and make all six remove icons keyboard-operable (role/tabIndex/Enter+Space); adds useTranslation to its sub-components. - CustomSockoptList: the remove icon is now keyboard-operable. - SniffingFields: aria-label on the otherwise label-less destOverride select. - RemarkTemplateField: aria-label on the remark-variable picker button. New i18n key in all 13 locales: pages.inbounds.sniffingDestOverride. * feat(a11y): label client info modal and WireGuard config block After rebasing onto the WireGuard client-config feature, re-apply the ClientInfoModal copy/QR/IP-log aria-labels (the modal was restructured upstream, so the original labels did not carry over) and label the new ConfigBlock component's copy/download/QR actions. ConfigBlock's action wrapper keeps its stop-propagation handler (a non-interactive guard for the Collapse header) under a scoped jsx-a11y exception. * fix(frontend): let npm install jsx-a11y under ESLint 10 eslint-plugin-jsx-a11y@6.10.2 declares a peer range that stops at ESLint 9, but the panel is on ESLint 10, so `npm ci` aborts with ERESOLVE even though the plugin runs fine on ESLint 10 with flat config. Add an npm override so jsx-a11y accepts the project's ESLint version. This keeps normal peer resolution (recharts' react-is peer still auto-installs) — no global legacy-peer-deps and no manual react-is pin needed. * fix(a11y): size mobile row triggers and move node expand role to chevron Address automated review on #5652: - add size="small" to the inbound/client/node mobile-card "more" dropdown triggers so they match the adjacent small Switch and the established desktop RowActions pattern. - move the node card-head disclosure semantics (role/tabIndex/aria-expanded/ keyboard) onto the chevron affordance so the expand control is no longer a role="button" wrapping the Switch, info button and dropdown. Mouse click-anywhere-to-expand is preserved on the header div.
This commit is contained in:
nima1024m
@@ -34,7 +34,12 @@ export default function SniffingFields({ name, form, enableLabel }: SniffingFiel
|
||||
{enabled && (
|
||||
<>
|
||||
<Form.Item name={[...name, 'destOverride']} wrapperCol={{ md: { span: 14, offset: 8 } }}>
|
||||
<Select mode="multiple" className="sniffing-options" options={DEST_OPTIONS} />
|
||||
<Select
|
||||
mode="multiple"
|
||||
className="sniffing-options"
|
||||
aria-label={t('pages.inbounds.sniffingDestOverride')}
|
||||
options={DEST_OPTIONS}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('pages.inbounds.sniffingMetadataOnly')}
|
||||
|
||||
@@ -3,6 +3,8 @@ import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { NamePath } from 'antd/es/form/interface';
|
||||
|
||||
import { activateOnKey } from '@/utils/a11y';
|
||||
|
||||
// Editor for sockopt.customSockopt — a list of raw setsockopt() options. Each
|
||||
// entry is rendered as a titled group of labeled fields (system / level / opt /
|
||||
// type / value) instead of one cramped inline row, so it reads like the rest of
|
||||
@@ -49,7 +51,11 @@ export default function CustomSockoptList({
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
style={{ marginInlineStart: 8 }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={() => remove(field.name)}
|
||||
onKeyDown={activateOnKey(() => remove(field.name))}
|
||||
/>
|
||||
</Divider>
|
||||
<Form.Item label="System" name={[field.name, 'system']}>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { AutoComplete, Button, Divider, Form, Input, InputNumber, Select, Space, Switch } from 'antd';
|
||||
import { DeleteOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { FormInstance } from 'antd/es/form';
|
||||
import type { NamePath } from 'antd/es/form/interface';
|
||||
|
||||
import { RandomUtil } from '@/utils';
|
||||
import { activateOnKey } from '@/utils/a11y';
|
||||
import { OutboundProtocols, UTLS_FINGERPRINT } from '@/schemas/primitives';
|
||||
|
||||
const UTLS_FINGERPRINT_OPTIONS = Object.values(UTLS_FINGERPRINT).map((value) => ({ value, label: value }));
|
||||
@@ -224,6 +226,7 @@ export default function FinalMaskForm({ name, network, protocol, form, showAll =
|
||||
}
|
||||
|
||||
function TcpMasksList({ base, form }: { base: (string | number)[]; form: FormInstance }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.List name={[...base, 'tcp']}>
|
||||
{(fields, { add, remove }) => (
|
||||
@@ -233,6 +236,7 @@ function TcpMasksList({ base, form }: { base: (string | number)[]; form: FormIns
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => add({ type: 'fragment', settings: defaultTcpMaskSettings('fragment') })}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -265,12 +269,20 @@ function TcpMaskItem({
|
||||
// type change). All Form.Item `name=` use RELATIVE paths within the
|
||||
// outer Form.List context.
|
||||
const absolutePath = [...listPath, fieldName];
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Divider style={{ margin: 0 }}>
|
||||
TCP Mask {displayIndex}
|
||||
<DeleteOutlined className="danger-icon" onClick={onRemove} />
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={onRemove}
|
||||
onKeyDown={activateOnKey(onRemove)}
|
||||
/>
|
||||
</Divider>
|
||||
|
||||
<Form.Item label="Type" name={[fieldName, 'type']}>
|
||||
@@ -415,12 +427,13 @@ function FragmentRangeList({
|
||||
validator?: (rule: unknown, value: unknown) => Promise<void>;
|
||||
minItems?: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.List name={listName}>
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Form.Item label={label}>
|
||||
<Button type="primary" size="small" icon={<PlusOutlined />} onClick={() => add('')} />
|
||||
<Button type="primary" size="small" icon={<PlusOutlined />} aria-label={t('add')} onClick={() => add('')} />
|
||||
</Form.Item>
|
||||
{fields.map((field, idx) => (
|
||||
<Form.Item
|
||||
@@ -432,7 +445,16 @@ function FragmentRangeList({
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
addonAfter={fields.length > minItems
|
||||
? <DeleteOutlined className="danger-icon" onClick={() => remove(field.name)} />
|
||||
? (
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={() => remove(field.name)}
|
||||
onKeyDown={activateOnKey(() => remove(field.name))}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -475,6 +497,7 @@ function HeaderCustomGroups({
|
||||
form: FormInstance;
|
||||
absoluteSettingsPath: (string | number)[];
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
{(['clients', 'servers'] as const).map((groupKey) => (
|
||||
@@ -486,6 +509,7 @@ function HeaderCustomGroups({
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => addGroup([defaultClientServerItem()])}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -493,7 +517,14 @@ function HeaderCustomGroups({
|
||||
<div key={group.key}>
|
||||
<Divider style={{ margin: 0 }}>
|
||||
{groupKey === 'clients' ? 'Clients' : 'Servers'} Group {gi + 1}
|
||||
<DeleteOutlined className="danger-icon" onClick={() => removeGroup(group.name)} />
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={() => removeGroup(group.name)}
|
||||
onKeyDown={activateOnKey(() => removeGroup(group.name))}
|
||||
/>
|
||||
</Divider>
|
||||
<Form.List name={[group.name]}>
|
||||
{(items, { add: addItem, remove: removeItem }) => (
|
||||
@@ -502,6 +533,7 @@ function HeaderCustomGroups({
|
||||
<Button
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => addItem(defaultClientServerItem())}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -531,6 +563,7 @@ function HeaderCustomGroups({
|
||||
function UdpMasksList({
|
||||
base, form, isHysteria, isWireguard, network,
|
||||
}: { base: (string | number)[]; form: FormInstance; isHysteria: boolean; isWireguard: boolean; network: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Form.List name={[...base, 'udp']}>
|
||||
{(fields, { add, remove }) => (
|
||||
@@ -540,6 +573,7 @@ function UdpMasksList({
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => {
|
||||
const def = isHysteria || isWireguard ? 'salamander' : 'mkcp-legacy';
|
||||
add({ type: def, settings: defaultUdpMaskSettings(def) });
|
||||
@@ -578,6 +612,7 @@ function UdpMaskItem({
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const absolutePath = [...listPath, fieldName];
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onTypeChange = (v: string) => {
|
||||
form.setFieldValue([...absolutePath, 'settings'], defaultUdpMaskSettings(v));
|
||||
@@ -605,7 +640,14 @@ function UdpMaskItem({
|
||||
<div>
|
||||
<Divider style={{ margin: 0 }}>
|
||||
UDP Mask {displayIndex}
|
||||
<DeleteOutlined className="danger-icon" onClick={onRemove} />
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={onRemove}
|
||||
onKeyDown={activateOnKey(onRemove)}
|
||||
/>
|
||||
</Divider>
|
||||
|
||||
<Form.Item label="Type" name={[fieldName, 'type']}>
|
||||
@@ -735,6 +777,7 @@ function SalamanderUdpMaskSettings({
|
||||
form: FormInstance;
|
||||
absolutePath: (string | number)[];
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const packetSizePath = [...absolutePath, 'settings', 'packetSize'];
|
||||
const packetSize = Form.useWatch(packetSizePath, { form, preserve: true });
|
||||
const mode = typeof packetSize === 'string' && packetSize.trim() !== '' ? 'gecko' : 'salamander';
|
||||
@@ -776,6 +819,7 @@ function SalamanderUdpMaskSettings({
|
||||
</Form.Item>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
aria-label={t('regenerate')}
|
||||
onClick={() => form.setFieldValue(
|
||||
[...absolutePath, 'settings', 'password'],
|
||||
RandomUtil.randomLowerAndNum(16),
|
||||
@@ -840,6 +884,7 @@ function UdpHeaderCustom({
|
||||
form: FormInstance;
|
||||
absoluteSettingsPath: (string | number)[];
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
{(['client', 'server'] as const).map((groupKey) => (
|
||||
@@ -851,6 +896,7 @@ function UdpHeaderCustom({
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => add(defaultUdpClientServerItem())}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -858,7 +904,14 @@ function UdpHeaderCustom({
|
||||
<div key={item.key}>
|
||||
<Divider style={{ margin: 0 }}>
|
||||
{groupKey === 'client' ? 'Client' : 'Server'} {ci + 1}
|
||||
<DeleteOutlined className="danger-icon" onClick={() => remove(item.name)} />
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={() => remove(item.name)}
|
||||
onKeyDown={activateOnKey(() => remove(item.name))}
|
||||
/>
|
||||
</Divider>
|
||||
<ItemEditor
|
||||
fieldName={item.name}
|
||||
@@ -883,6 +936,7 @@ function NoiseItems({
|
||||
form: FormInstance;
|
||||
absoluteSettingsPath: (string | number)[];
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Form.Item label="Reset" name={[udpFieldName, 'settings', 'reset']}>
|
||||
@@ -896,6 +950,7 @@ function NoiseItems({
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
aria-label={t('add')}
|
||||
onClick={() => add(defaultNoiseItem())}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -903,7 +958,14 @@ function NoiseItems({
|
||||
<div key={item.key}>
|
||||
<Divider style={{ margin: 0 }}>
|
||||
Noise {ni + 1}
|
||||
<DeleteOutlined className="danger-icon" onClick={() => remove(item.name)} />
|
||||
<DeleteOutlined
|
||||
className="danger-icon"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t('remove')}
|
||||
onClick={() => remove(item.name)}
|
||||
onKeyDown={activateOnKey(() => remove(item.name))}
|
||||
/>
|
||||
</Divider>
|
||||
<ItemEditor
|
||||
fieldName={item.name}
|
||||
@@ -930,6 +992,7 @@ function ItemEditor({
|
||||
delayMode?: 'number' | 'string';
|
||||
onRemove?: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const onTypeChange = (v: string) => {
|
||||
if (v === 'base64') {
|
||||
form.setFieldValue([...absoluteItemPath, 'packet'], RandomUtil.randomBase64());
|
||||
@@ -1005,6 +1068,7 @@ function ItemEditor({
|
||||
</Form.Item>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
aria-label={t('regenerate')}
|
||||
onClick={() => form.setFieldValue([...absoluteItemPath, 'packet'], RandomUtil.randomBase64())}
|
||||
/>
|
||||
</Space.Compact>
|
||||
|
||||
Reference in New Issue
Block a user