Feature Request: Accessibility (a11y) improvements for Screen Readers

[alinasrollahzadeh405-sudo]

Is your feature request related to a problem?

Hi @MHSanaei and the 3x-ui team,

First of all, thank you for this incredible panel and all the powerful features you continuously add. It is by far the best and most reliable panel available.

I wanted to suggest some minor Accessibility (a11y) enhancements to make the Web UI even more screen-reader friendly (for visually impaired users relying on tools like TalkBack/NVDA):

1. Mobile Navigation Drawer / Left Menu: In mobile view, when opening the side navigation menu, the screen reader focus doesn't automatically move to the newly opened drawer, and trap focus isn't applied. Managing focus state (aria-hidden on the main content when the drawer is open) would make navigating the mobile menu seamless.
2. Custom Dropdowns & Select Menus: Some custom dropdown elements currently lack standard ARIA attributes (like aria-expanded or proper role="listbox"). Adding these helps screen readers announce menu states correctly.
3. Checkboxes & Switches: Ensuring form controls have implicit or explicit <label> tags or aria-label attributes so their status (checked/unchecked) is clearly announced.
4. Icon-only Buttons: Adding aria-label to buttons that only contain icons (e.g., action buttons like copy, edit, delete, or QR code toggles).

These small standard HTML/ARIA tweaks would significantly improve the user experience for accessibility software without altering the visual design at all.

Thanks again for your hard work and dedication!

Describe the solution you'd like

Hi @MHSanaei and the 3x-ui team,

First of all, thank you for this incredible panel and all the powerful features you continuously add. It is by far the best and most reliable panel available.

I wanted to suggest some minor Accessibility (a11y) enhancements to make the Web UI even more screen-reader friendly (for visually impaired users relying on tools like TalkBack/NVDA):

1. Mobile Navigation Drawer / Left Menu: In mobile view, when opening the side navigation menu, the screen reader focus doesn't automatically move to the newly opened drawer, and trap focus isn't applied. Managing focus state (aria-hidden on the main content when the drawer is open) would make navigating the mobile menu seamless.
2. Custom Dropdowns & Select Menus: Some custom dropdown elements currently lack standard ARIA attributes (like aria-expanded or proper role="listbox"). Adding these helps screen readers announce menu states correctly.
3. Checkboxes & Switches: Ensuring form controls have implicit or explicit <label> tags or aria-label attributes so their status (checked/unchecked) is clearly announced.
4. Icon-only Buttons: Adding aria-label to buttons that only contain icons (e.g., action buttons like copy, edit, delete, or QR code toggles).

These small standard HTML/ARIA tweaks would significantly improve the user experience for accessibility software without altering the visual design at all.

Thanks again for your hard work and dedication!

Alternatives you've considered

Accessibility (a11y) improvements for Screen Readers

Concrete use case

No response

Mockups, screenshots, or examples

No response

Which parts of the panel would this affect?

No response

Are you willing to help?

• I'd like to implement this feature myself and open a PR.
• I can help test once a PR is open.

Before submitting

• I searched existing issues and this feature has not been requested.
• This feature request is written in English.

[github-actions]

Three of the four items are already implemented on current main; one is partly open, and one needs a specific example before it can be acted on.

Already in place, confirmed in source:

• eslint-plugin-jsx-a11y (recommended ruleset) runs over every .tsx file on each lint pass — frontend/eslint.config.js:48-55, with only jsx-a11y/no-autofocus disabled. The two suppressions in the tree are narrow and documented, e.g. frontend/src/pages/nodes/NodeList.tsx:471.
• Icon-only buttons (item 4): row actions, copy/QR/download and regenerate buttons carry aria-label — frontend/src/pages/inbounds/list/RowActions.tsx:72,80, frontend/src/pages/clients/ClientsPage.tsx:760-772, frontend/src/pages/nodes/NodeList.tsx:249-260, frontend/src/pages/hosts/HostList.tsx:81-90, frontend/src/pages/inbounds/qr/QrPanel.tsx:100-109, plus the copy/QR controls in ClientInfoModal.tsx and InboundInfoModal.tsx.
• Form controls (item 3): FormField generates an id with useId(), injects it into the wrapped control and sets Form.Item htmlFor, producing a real <label for> — frontend/src/components/form/rhf/FormField.tsx:51-53,66,78-80. Settings rows label their switch via aria-labelledby pointing at the row title — frontend/src/components/ui/SettingListItem.tsx:21-25. The checked/unchecked announcement itself comes from Ant Design's Switch/Checkbox.
• Custom clickable elements use role="button" plus tabIndex and the shared activateOnKey helper (frontend/src/utils/a11y.ts:3), with aria-expanded on disclosure chevrons — frontend/src/pages/nodes/NodeList.tsx:478-485.

Two gaps in the mobile drawer (item 1) are real and confirmed:

1. The drawer has no accessible name. frontend/src/layouts/AppSidebar.tsx:309-321 renders <Drawer> with closable={false}, styles.header set to display: 'none', and neither title nor aria-label, so the dialog is announced without a name. An aria-label on the Drawer would fix it; note that a new i18n key must be added to all 13 files in internal/web/translation/ per CLAUDE.md.
2. There is no element left to restore focus to when the drawer closes. The trigger is conditionally unmounted while the drawer is open — {!drawerOpen && (<button className="drawer-handle" …>)} at frontend/src/layouts/AppSidebar.tsx:369-378. Keeping that button mounted (hidden with CSS) and giving it aria-expanded would address both focus return and state announcement.

On aria-hidden/inert for the main content: nothing in frontend/src sets inert (grep across the tree). Whether it is needed depends on the focus containment Ant Design's own Drawer performs, which I could not verify in this checkout because node_modules is not installed, so I am not asserting either way.

Item 2 I could not reproduce. Every dropdown surface I found routes through Ant Design's Select / Dropdown / AutoComplete, which supply their own role and aria-expanded; I found no hand-rolled dropdown or listbox in frontend/src. To act on it, please provide:

1. The exact page and control that announces incorrectly (for example "Inbounds -> protocol select").
2. The screen reader and browser (NVDA/Firefox, TalkBack/Chrome), and what it announces versus what you expected.

Related: #5486 requested the same labeling work and is what produced most of the coverage listed above. This report is narrower, so it stays open for the drawer items rather than being closed as a duplicate. @MHSanaei for a decision on those.

This reply was generated automatically; a maintainer may follow up.

[alinasrollahzadeh405-sudo]

TalkBack/Chrome. The issue isn't about incorrect announcements. Rather, the main problem is the failure to focus on the left-hand menu (inbounds, clients, hosts, etc.). I thank you all.
Another issue is that when selecting items from dropdown menus (such as protocol, flow, language, etc.), it is not possible to focus on the available options—except by swiping left and right, which is very time-consuming. Thanks again to everyone!

[alinasrollahzadeh405-sudo]

Furthermore, after focusing via a swipe gesture, TalkBack fails to recognize options like VLESS, VMess, etc.—even within other dropdown menus—as selectable items, forcing us to rely on a sighted person for assistance! Please address this issue. 3x-ui is the only panel that gives me the flexibility to define rules, configure specific routing for particular scenarios, and so on!

[hoabba3i-dev]

Hello,

I've found an issue with the WireGuard protocol.

The Host field does not work correctly. It completely ignores the address we enter and always uses the panel's own address instead.

For example, even if we specify a different host in the WireGuard configuration, the generated configuration still contains the panel address rather than the host we provided.

Could you please check and fix this issue?

Thank you.