fix(frontend): make the panel usable with screen readers (#6907)

* fix(frontend): make the panel usable with screen readers

* fix(frontend): keep mobile tab names and the inbound expiry hint

Review of #6907 found two gaps in the screen-reader pass:

- On phone-width screens catTabLabel renders only the icon and names the
  tab by putting aria-label on it, but callers now pass that icon with
  aria-hidden for the desktop label, so every Settings, Xray and Host
  category tab lost its name under TalkBack. catTabLabel now clears
  aria-hidden on the icon it uses as the name.
- DateTimePicker forwarded id and aria-label but not aria-describedby,
  so the inbound expiry hint ("leave blank to never expire") was never
  attached. It now forwards it on both the Gregorian and Jalali input.

frontend/src/pages/clients/BulkAttachInboundsModal.tsx

@@ -111,6 +111,7 @@ export default function BulkAttachInboundsModal({
               onChange={setTargetIds}
               options={targetOptions}
               placeholder={t('pages.clients.attachToInboundsTargets')}
+              aria-label={t('pages.clients.attachToInboundsTargets')}
               showSearch={{ optionFilterProp: 'label' }}
               autoFocus
             />

frontend/src/pages/clients/BulkDetachInboundsModal.tsx

@@ -111,6 +111,7 @@ export default function BulkDetachInboundsModal({
               onChange={setTargetIds}
               options={targetOptions}
               placeholder={t('pages.clients.detachFromInboundsTargets')}
+              aria-label={t('pages.clients.detachFromInboundsTargets')}
               showSearch={{ optionFilterProp: 'label' }}
               autoFocus
             />

frontend/src/pages/clients/ClientBulkAddModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   AutoComplete,
@@ -82,6 +82,7 @@ export default function ClientBulkAddModal({
   onSaved,
 }: ClientBulkAddModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const { bulkCreate } = useClients({ list: false });
 
@@ -254,13 +255,18 @@ export default function ClientBulkAddModal({
       >
         <FormProvider {...methods}>
           <Form colon={false} labelCol={{ sm: { span: 8 } }} wrapperCol={{ sm: { span: 14 } }}>
-            <Form.Item label={t('pages.clients.attachedInbounds')} required>
+            <Form.Item
+              label={t('pages.clients.attachedInbounds')}
+              required
+              htmlFor={`${uid}-inbounds`}
+            >
               <SelectAllClearButtons
                 options={inboundOptions}
                 value={inboundIds}
                 onChange={(v) => methods.setValue('inboundIds', v)}
               />
               <Select
+                id={`${uid}-inbounds`}
                 mode="multiple"
                 value={inboundIds}
                 onChange={(v) => methods.setValue('inboundIds', v)}
@@ -323,16 +329,17 @@ export default function ClientBulkAddModal({
               </FormField>
             )}
 
-            <Form.Item label={t('pages.clients.subId')}>
+            <Form.Item label={t('pages.clients.subId')} htmlFor={`${uid}-sub-id`}>
               <Space.Compact style={{ display: 'flex' }}>
                 <Input
+                  id={`${uid}-sub-id`}
                   value={subId}
                   onChange={(e) => methods.setValue('subId', e.target.value)}
                   style={{ flex: 1 }}
                 />
                 <Button
                   aria-label={t('regenerate')}
-                  icon={<ReloadOutlined />}
+                  icon={<ReloadOutlined aria-hidden />}
                   onClick={() => methods.setValue('subId', RandomUtil.randomLowerAndNum(16))}
                 />
               </Space.Compact>
@@ -376,10 +383,11 @@ export default function ClientBulkAddModal({
               </FormField>
             )}
 
-            <Form.Item label={t('pages.clients.limitIp')}>
+            <Form.Item label={t('pages.clients.limitIp')} htmlFor={`${uid}-limit-ip`}>
               <Tooltip title={limitIpNotice || undefined}>
                 <span style={{ display: 'inline-flex' }}>
                   <InputNumber
+                    id={`${uid}-limit-ip`}
                     value={limitIp}
                     min={0}
                     disabled={limitIpDisabled}
@@ -399,8 +407,9 @@ export default function ClientBulkAddModal({
               <InputNumber min={0} step={1} />
             </FormField>
 
-            <Form.Item label={t('pages.clients.delayedStart')}>
+            <Form.Item label={t('pages.clients.delayedStart')} htmlFor={`${uid}-delayed-start`}>
               <Switch
+                id={`${uid}-delayed-start`}
                 checked={delayedStart}
                 onClick={() => {
                   setDelayedStart(!delayedStart);
@@ -410,16 +419,18 @@ export default function ClientBulkAddModal({
             </Form.Item>
 
             {delayedStart ? (
-              <Form.Item label={t('pages.clients.expireDays')}>
+              <Form.Item label={t('pages.clients.expireDays')} htmlFor={`${uid}-expire-days`}>
                 <InputNumber
+                  id={`${uid}-expire-days`}
                   value={delayedExpireDays}
                   min={0}
                   onChange={(v) => methods.setValue('expiryTime', -86400000 * (Number(v) || 0))}
                 />
               </Form.Item>
             ) : (
-              <Form.Item label={t('pages.inbounds.expireDate')}>
+              <Form.Item label={t('pages.inbounds.expireDate')} htmlFor={`${uid}-expiry`}>
                 <DateTimePicker
+                  id={`${uid}-expiry`}
                   value={expiryDate}
                   onChange={(next) => methods.setValue('expiryTime', next ? next.valueOf() : 0)}
                 />

frontend/src/pages/clients/ClientFormModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   AutoComplete,
@@ -256,6 +256,7 @@ export default function ClientFormModal({
   onOpenChange,
 }: ClientFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const isEdit = mode === 'edit';
 
@@ -820,7 +821,7 @@ export default function ClientFormModal({
                 <Button
                   color="danger"
                   variant="filled"
-                  icon={<RetweetOutlined />}
+                  icon={<RetweetOutlined aria-hidden />}
                   loading={resetting}
                 >
                   {t('pages.inbounds.resetTraffic')}
@@ -848,9 +849,14 @@ export default function ClientFormModal({
                     <>
                       <Row gutter={16}>
                         <Col xs={24} md={12}>
-                          <Form.Item label={t('pages.clients.email')} required>
+                          <Form.Item
+                            label={t('pages.clients.email')}
+                            required
+                            htmlFor={`${uid}-email`}
+                          >
                             <Space.Compact style={{ display: 'flex' }}>
                               <Input
+                                id={`${uid}-email`}
                                 value={email}
                                 placeholder={t('pages.clients.email')}
                                 style={{ flex: 1 }}
@@ -859,7 +865,7 @@ export default function ClientFormModal({
                               {!isEdit && (
                                 <Button
                                   aria-label={t('regenerate')}
-                                  icon={<ReloadOutlined />}
+                                  icon={<ReloadOutlined aria-hidden />}
                                   onClick={() =>
                                     methods.setValue('email', RandomUtil.randomLowerAndNum(12))
                                   }
@@ -880,6 +886,7 @@ export default function ClientFormModal({
                         </Col>
                         <Col xs={24} md={12}>
                           <Form.Item
+                            htmlFor={`${uid}-limit-ip`}
                             label={t('pages.clients.limitIp')}
                             tooltip={t('pages.clients.limitIpDesc')}
                           >
@@ -887,6 +894,8 @@ export default function ClientFormModal({
                               <span style={{ display: 'flex', width: '100%' }}>
                                 <Space.Compact style={{ display: 'flex', flex: 1 }}>
                                   <InputNumber
+                                    id={`${uid}-limit-ip`}
+                                    aria-describedby={`${uid}-limit-ip-hint`}
                                     value={limitIp}
                                     min={0}
                                     disabled={limitIpDisabled}
@@ -900,7 +909,7 @@ export default function ClientFormModal({
                                     <Tooltip title={t('pages.clients.ipLog')}>
                                       <Button
                                         aria-label={t('pages.clients.ipLog')}
-                                        icon={<EyeOutlined />}
+                                        icon={<EyeOutlined aria-hidden />}
                                         loading={ipsLoading}
                                         onClick={openIpsModal}
                                       >
@@ -911,15 +920,21 @@ export default function ClientFormModal({
                                 </Space.Compact>
                               </span>
                             </Tooltip>
+                            <span id={`${uid}-limit-ip-hint`} hidden>
+                              {t('pages.clients.limitIpDesc')}
+                            </span>
                           </Form.Item>
                         </Col>
                         <Col xs={24} md={12}>
                           <Form.Item
+                            htmlFor={`${uid}-limit-hwid`}
                             label={t('pages.clients.limitHwid')}
                             tooltip={t('pages.clients.limitHwidDesc')}
                           >
                             <Space.Compact style={{ display: 'flex' }}>
                               <InputNumber
+                                id={`${uid}-limit-hwid`}
+                                aria-describedby={`${uid}-limit-hwid-hint`}
                                 value={limitHwid}
                                 min={0}
                                 style={{ flex: 1 }}
@@ -929,7 +944,7 @@ export default function ClientFormModal({
                                 <Tooltip title={t('pages.clients.hwidLog')}>
                                   <Button
                                     aria-label={t('pages.clients.hwidLog')}
-                                    icon={<EyeOutlined />}
+                                    icon={<EyeOutlined aria-hidden />}
                                     loading={hwidsLoading}
                                     onClick={openHwidsModal}
                                   >
@@ -938,6 +953,9 @@ export default function ClientFormModal({
                                 </Tooltip>
                               )}
                             </Space.Compact>
+                            <span id={`${uid}-limit-hwid-hint`} hidden>
+                              {t('pages.clients.limitHwidDesc')}
+                            </span>
                           </Form.Item>
                         </Col>
                       </Row>
@@ -953,8 +971,12 @@ export default function ClientFormModal({
                               <InputNumber min={0} style={{ width: '100%' }} />
                             </FormField>
                           ) : (
-                            <Form.Item label={t('pages.clients.expiryTime')}>
+                            <Form.Item
+                              label={t('pages.clients.expiryTime')}
+                              htmlFor={`${uid}-expiry`}
+                            >
                               <DateTimePicker
+                                id={`${uid}-expiry`}
                                 value={expiryDayjs}
                                 onChange={(d) =>
                                   methods.setValue('expiryDate', d ? d.valueOf() : 0)
@@ -964,8 +986,12 @@ export default function ClientFormModal({
                           )}
                         </Col>
                         <Col xs={12} md={6}>
-                          <Form.Item label={t('pages.clients.delayedStart')}>
+                          <Form.Item
+                            label={t('pages.clients.delayedStart')}
+                            htmlFor={`${uid}-delayed-start`}
+                          >
                             <Switch
+                              id={`${uid}-delayed-start`}
                               checked={delayedStart}
                               onChange={(v) => {
                                 methods.setValue('delayedStart', v);
@@ -1062,13 +1088,18 @@ export default function ClientFormModal({
                         </Row>
                       )}
 
-                      <Form.Item label={t('pages.clients.attachedInbounds')} required={!isEdit}>
+                      <Form.Item
+                        label={t('pages.clients.attachedInbounds')}
+                        required={!isEdit}
+                        htmlFor={`${uid}-inbounds`}
+                      >
                         <SelectAllClearButtons
                           options={inboundOptions}
                           value={inboundIds}
                           onChange={(v) => methods.setValue('inboundIds', v)}
                         />
                         <Select
+                          id={`${uid}-inbounds`}
                           mode="multiple"
                           value={inboundIds}
                           onChange={(v) => methods.setValue('inboundIds', v)}
@@ -1102,77 +1133,96 @@ export default function ClientFormModal({
                   label: t('pages.clients.tabCredentials'),
                   children: (
                     <>
-                      <Form.Item label={t('pages.clients.uuid')}>
+                      <Form.Item label={t('pages.clients.uuid')} htmlFor={`${uid}-uuid`}>
                         <Space.Compact style={{ display: 'flex' }}>
                           <Input
+                            id={`${uid}-uuid`}
                             value={uuid}
                             style={{ flex: 1 }}
                             onChange={(e) => methods.setValue('uuid', e.target.value)}
                           />
                           <Button
                             aria-label={t('regenerate')}
-                            icon={<ReloadOutlined />}
+                            icon={<ReloadOutlined aria-hidden />}
                             onClick={() => methods.setValue('uuid', RandomUtil.randomUUID())}
                           />
                         </Space.Compact>
                       </Form.Item>
 
                       <Form.Item
+                        htmlFor={`${uid}-password`}
                         label={t('pages.clients.password')}
                         tooltip={t('pages.clients.passwordDesc')}
                       >
                         <Space.Compact style={{ display: 'flex' }}>
                           <Input
+                            id={`${uid}-password`}
+                            aria-describedby={`${uid}-password-hint`}
                             value={password}
                             style={{ flex: 1 }}
                             onChange={(e) => methods.setValue('password', e.target.value)}
                           />
                           <Button
                             aria-label={t('regenerate')}
-                            icon={<ReloadOutlined />}
+                            icon={<ReloadOutlined aria-hidden />}
                             onClick={regeneratePassword}
                           />
                         </Space.Compact>
+                        <span id={`${uid}-password-hint`} hidden>
+                          {t('pages.clients.passwordDesc')}
+                        </span>
                       </Form.Item>
 
                       <Form.Item
+                        htmlFor={`${uid}-sub-id`}
                         label={t('pages.clients.subId')}
                         tooltip={t('pages.clients.subIdDesc')}
                       >
                         <Space.Compact style={{ display: 'flex' }}>
                           <Input
+                            id={`${uid}-sub-id`}
+                            aria-describedby={`${uid}-sub-id-hint`}
                             value={subId}
                             style={{ flex: 1 }}
                             onChange={(e) => methods.setValue('subId', e.target.value)}
                           />
                           <Button
                             aria-label={t('regenerate')}
-                            icon={<ReloadOutlined />}
+                            icon={<ReloadOutlined aria-hidden />}
                             onClick={() =>
                               methods.setValue('subId', RandomUtil.randomLowerAndNum(16))
                             }
                           />
                         </Space.Compact>
+                        <span id={`${uid}-sub-id-hint`} hidden>
+                          {t('pages.clients.subIdDesc')}
+                        </span>
                       </Form.Item>
 
                       <Form.Item
+                        htmlFor={`${uid}-auth`}
                         label={t('pages.clients.hysteriaAuth')}
                         tooltip={t('pages.clients.hysteriaAuthDesc')}
                       >
                         <Space.Compact style={{ display: 'flex' }}>
                           <Input
+                            id={`${uid}-auth`}
+                            aria-describedby={`${uid}-auth-hint`}
                             value={auth}
                             style={{ flex: 1 }}
                             onChange={(e) => methods.setValue('auth', e.target.value)}
                           />
                           <Button
                             aria-label={t('regenerate')}
-                            icon={<ReloadOutlined />}
+                            icon={<ReloadOutlined aria-hidden />}
                             onClick={() =>
                               methods.setValue('auth', RandomUtil.randomLowerAndNum(16))
                             }
                           />
                         </Space.Compact>
+                        <span id={`${uid}-auth-hint`} hidden>
+                          {t('pages.clients.hysteriaAuthDesc')}
+                        </span>
                       </Form.Item>
 
                       {showFlow && (
@@ -1195,6 +1245,7 @@ export default function ClientFormModal({
                       {(showWireguard || showAmneziawg) && (
                         <>
                           <Form.Item
+                            htmlFor={`${uid}-wg-private-key`}
                             label={t(
                               showAmneziawg
                                 ? 'pages.clients.amneziaWgPrivateKey'
@@ -1203,6 +1254,7 @@ export default function ClientFormModal({
                           >
                             <Space.Compact style={{ display: 'flex' }}>
                               <Input
+                                id={`${uid}-wg-private-key`}
                                 value={wgPrivateKey}
                                 style={{ flex: 1 }}
                                 onChange={(e) => {
@@ -1216,7 +1268,7 @@ export default function ClientFormModal({
                               />
                               <Button
                                 aria-label={t('regenerate')}
-                                icon={<ReloadOutlined />}
+                                icon={<ReloadOutlined aria-hidden />}
                                 onClick={regenerateWireguardKeys}
                               />
                             </Space.Compact>
@@ -1232,6 +1284,7 @@ export default function ClientFormModal({
                             <Input disabled />
                           </FormField>
                           <Form.Item
+                            htmlFor={`${uid}-wg-psk`}
                             label={t(
                               showAmneziawg
                                 ? 'pages.clients.amneziaWgPreSharedKey'
@@ -1240,11 +1293,11 @@ export default function ClientFormModal({
                           >
                             <Space.Compact style={{ display: 'flex' }}>
                               <FormField name="wgPreSharedKey" noStyle>
-                                <Input style={{ flex: 1 }} />
+                                <Input id={`${uid}-wg-psk`} style={{ flex: 1 }} />
                               </FormField>
                               <Button
                                 aria-label={t('regenerate')}
-                                icon={<ReloadOutlined />}
+                                icon={<ReloadOutlined aria-hidden />}
                                 onClick={regenerateWireguardPresharedKey}
                               />
                             </Space.Compact>
@@ -1305,18 +1358,20 @@ export default function ClientFormModal({
                       {showMtproto && (
                         <>
                           <Form.Item
+                            htmlFor={`${uid}-mtproto-secret`}
                             label={t('pages.clients.mtprotoSecret')}
                             extra={t('pages.clients.mtprotoSecretHint')}
                           >
                             <Space.Compact style={{ display: 'flex' }}>
                               <Input
+                                id={`${uid}-mtproto-secret`}
                                 value={secret}
                                 style={{ flex: 1 }}
                                 onChange={(e) => methods.setValue('secret', e.target.value)}
                               />
                               <Button
                                 aria-label={t('regenerate')}
-                                icon={<ReloadOutlined />}
+                                icon={<ReloadOutlined aria-hidden />}
                                 onClick={regenerateMtprotoSecret}
                               />
                             </Space.Compact>
@@ -1344,7 +1399,7 @@ export default function ClientFormModal({
 
                       <Button
                         type="primary"
-                        icon={<PlusOutlined />}
+                        icon={<PlusOutlined aria-hidden />}
                         onClick={() => addExternalLinkRow('link')}
                       >
                         {t('pages.clients.addExternalLink')}
@@ -1364,7 +1419,7 @@ export default function ClientFormModal({
                                     valueProp="checked"
                                     noStyle
                                   >
-                                    <Switch size="small" />
+                                    <Switch size="small" aria-label={t('enable')} />
                                   </FormField>
                                   <span>{t('enable')}</span>
                                 </div>
@@ -1378,7 +1433,7 @@ export default function ClientFormModal({
                                   <Button
                                     aria-label={t('delete')}
                                     danger
-                                    icon={<DeleteOutlined />}
+                                    icon={<DeleteOutlined aria-hidden />}
                                     onClick={() => removeExternalLink(index)}
                                   />
                                 </Tooltip>
@@ -1398,6 +1453,7 @@ export default function ClientFormModal({
                                     const hasSpecificExpiry = Number(expiryField.value) > 0;
                                     return (
                                       <DateTimePicker
+                                        aria-label={t('pages.clients.expiryTime')}
                                         value={displayedExpiry > 0 ? dayjs(displayedExpiry) : null}
                                         onChange={(v) => expiryField.onChange(v ? v.valueOf() : 0)}
                                         placeholder={t('pages.inbounds.leaveBlankToNeverExpire')}
@@ -1415,7 +1471,7 @@ export default function ClientFormModal({
 
                       <Button
                         type="primary"
-                        icon={<PlusOutlined />}
+                        icon={<PlusOutlined aria-hidden />}
                         onClick={() => addExternalLinkRow('subscription')}
                       >
                         {t('pages.clients.addExternalSubscription')}
@@ -1435,7 +1491,7 @@ export default function ClientFormModal({
                                     valueProp="checked"
                                     noStyle
                                   >
-                                    <Switch size="small" />
+                                    <Switch size="small" aria-label={t('enable')} />
                                   </FormField>
                                   <span>{t('enable')}</span>
                                 </div>
@@ -1449,7 +1505,7 @@ export default function ClientFormModal({
                                   <Button
                                     aria-label={t('delete')}
                                     danger
-                                    icon={<DeleteOutlined />}
+                                    icon={<DeleteOutlined aria-hidden />}
                                     onClick={() => removeExternalLink(index)}
                                   />
                                 </Tooltip>
@@ -1475,6 +1531,7 @@ export default function ClientFormModal({
                                     const hasSpecificExpiry = Number(expiryField.value) > 0;
                                     return (
                                       <DateTimePicker
+                                        aria-label={t('pages.clients.expiryTime')}
                                         value={displayedExpiry > 0 ? dayjs(displayedExpiry) : null}
                                         onChange={(v) => expiryField.onChange(v ? v.valueOf() : 0)}
                                         placeholder={t('pages.inbounds.leaveBlankToNeverExpire')}
@@ -1515,7 +1572,12 @@ export default function ClientFormModal({
         zIndex={CLIENT_IP_LOG_MODAL_Z_INDEX}
         onCancel={() => setIpsModalOpen(false)}
         footer={[
-          <Button key="refresh" icon={<ReloadOutlined />} loading={ipsLoading} onClick={loadIps}>
+          <Button
+            key="refresh"
+            icon={<ReloadOutlined aria-hidden />}
+            loading={ipsLoading}
+            onClick={loadIps}
+          >
             {t('refresh')}
           </Button>,
           <Button

frontend/src/pages/clients/ClientInfoModal.tsx

@@ -350,7 +350,7 @@ export default function ClientInfoModal({
                       <Button
                         size="small"
                         type="text"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyValue(client.subId!)}
                       />
@@ -365,7 +365,7 @@ export default function ClientInfoModal({
                       <Button
                         size="small"
                         type="text"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyValue(client.uuid!)}
                       />
@@ -380,7 +380,7 @@ export default function ClientInfoModal({
                       <Button
                         size="small"
                         type="text"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyValue(client.password!)}
                       />
@@ -395,7 +395,7 @@ export default function ClientInfoModal({
                       <Button
                         size="small"
                         type="text"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyValue(client.auth!)}
                       />
@@ -457,7 +457,7 @@ export default function ClientInfoModal({
                   <td>
                     <Button
                       size="small"
-                      icon={<EyeOutlined />}
+                      icon={<EyeOutlined aria-hidden />}
                       aria-label={t('pages.clients.ipLog')}
                       loading={ipsLoading}
                       onClick={openIpsModal}
@@ -489,7 +489,7 @@ export default function ClientInfoModal({
                   <td>
                     <Button
                       size="small"
-                      icon={<EyeOutlined />}
+                      icon={<EyeOutlined aria-hidden />}
                       aria-label={t('pages.clients.hwidLog')}
                       loading={hwidsLoading}
                       onClick={openHwidsModal}
@@ -591,7 +591,7 @@ export default function ClientInfoModal({
                     <Tooltip title={t('copy')}>
                       <Button
                         size="small"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyValue(subLink)}
                       />
@@ -599,7 +599,7 @@ export default function ClientInfoModal({
                     <Tooltip title={t('download')}>
                       <Button
                         size="small"
-                        icon={<DownloadOutlined />}
+                        icon={<DownloadOutlined aria-hidden />}
                         aria-label={t('download')}
                         loading={downloadingFormat === 'standard'}
                         disabled={downloadingFormat !== null}
@@ -621,7 +621,7 @@ export default function ClientInfoModal({
                       <Tooltip title={t('pages.clients.qrCode')}>
                         <Button
                           size="small"
-                          icon={<QrcodeOutlined />}
+                          icon={<QrcodeOutlined aria-hidden />}
                           aria-label={t('pages.clients.qrCode')}
                         />
                       </Tooltip>
@@ -646,7 +646,7 @@ export default function ClientInfoModal({
                       <Tooltip title={t('copy')}>
                         <Button
                           size="small"
-                          icon={<CopyOutlined />}
+                          icon={<CopyOutlined aria-hidden />}
                           aria-label={t('copy')}
                           onClick={() => copyValue(subJsonLink)}
                         />
@@ -654,7 +654,7 @@ export default function ClientInfoModal({
                       <Tooltip title={t('download')}>
                         <Button
                           size="small"
-                          icon={<DownloadOutlined />}
+                          icon={<DownloadOutlined aria-hidden />}
                           aria-label={t('download')}
                           loading={downloadingFormat === 'json'}
                           disabled={downloadingFormat !== null}
@@ -676,7 +676,7 @@ export default function ClientInfoModal({
                         <Tooltip title={t('pages.clients.qrCode')}>
                           <Button
                             size="small"
-                            icon={<QrcodeOutlined />}
+                            icon={<QrcodeOutlined aria-hidden />}
                             aria-label={t('pages.clients.qrCode')}
                           />
                         </Tooltip>
@@ -704,7 +704,7 @@ export default function ClientInfoModal({
                       <Tooltip title={t('copy')}>
                         <Button
                           size="small"
-                          icon={<CopyOutlined />}
+                          icon={<CopyOutlined aria-hidden />}
                           aria-label={t('copy')}
                           onClick={() => copyValue(subClashLink)}
                         />
@@ -712,7 +712,7 @@ export default function ClientInfoModal({
                       <Tooltip title={t('download')}>
                         <Button
                           size="small"
-                          icon={<DownloadOutlined />}
+                          icon={<DownloadOutlined aria-hidden />}
                           aria-label={t('download')}
                           loading={downloadingFormat === 'clash'}
                           disabled={downloadingFormat !== null}
@@ -734,7 +734,7 @@ export default function ClientInfoModal({
                         <Tooltip title={t('pages.clients.qrCode')}>
                           <Button
                             size="small"
-                            icon={<QrcodeOutlined />}
+                            icon={<QrcodeOutlined aria-hidden />}
                             aria-label={t('pages.clients.qrCode')}
                           />
                         </Tooltip>
@@ -768,7 +768,7 @@ export default function ClientInfoModal({
                         <Tooltip title={t('copy')}>
                           <Button
                             size="small"
-                            icon={<CopyOutlined />}
+                            icon={<CopyOutlined aria-hidden />}
                             aria-label={t('copy')}
                             onClick={() => copyValue(link)}
                           />
@@ -783,7 +783,7 @@ export default function ClientInfoModal({
                             <Tooltip title={t('pages.clients.qrCode')}>
                               <Button
                                 size="small"
-                                icon={<QrcodeOutlined />}
+                                icon={<QrcodeOutlined aria-hidden />}
                                 aria-label={t('pages.clients.qrCode')}
                               />
                             </Tooltip>
@@ -853,7 +853,12 @@ export default function ClientInfoModal({
         width={440}
         onCancel={() => setIpsModalOpen(false)}
         footer={[
-          <Button key="refresh" icon={<ReloadOutlined />} loading={ipsLoading} onClick={loadIps}>
+          <Button
+            key="refresh"
+            icon={<ReloadOutlined aria-hidden />}
+            loading={ipsLoading}
+            onClick={loadIps}
+          >
             {t('refresh')}
           </Button>,
           <Button

frontend/src/pages/clients/ClientsPage.tsx

@@ -113,7 +113,7 @@ function UngroupIcon() {
         height: '1em',
       }}
     >
-      <TagsOutlined />
+      <TagsOutlined aria-hidden />
       <span
         aria-hidden="true"
         style={{
@@ -1081,6 +1081,7 @@ export default function ClientsPage() {
             checked={!!record.enable}
             size="small"
             loading={togglingEmail === record.email}
+            aria-label={t('pages.clients.enabled')}
             onChange={(next) => onToggleEnable(record, next)}
           />
         ),
@@ -1140,16 +1141,20 @@ export default function ClientsPage() {
         render: (_v, record) => {
           if (!record.group) return <Typography.Text type="secondary">—</Typography.Text>;
           const isActive = filters.groups.includes(record.group);
+          const filterByGroup = () => {
+            if (!isActive) setFilters({ ...filters, groups: [...filters.groups, record.group!] });
+          };
           return (
             <Tag
               color="geekblue"
               style={{ margin: 0, cursor: 'pointer', opacity: isActive ? 0.6 : 1 }}
+              role="button"
+              tabIndex={0}
               onClick={(e) => {
                 e.stopPropagation();
-                if (!isActive) {
-                  setFilters({ ...filters, groups: [...filters.groups, record.group!] });
-                }
+                filterByGroup();
               }}
+              onKeyDown={activateOnKey(filterByGroup)}
             >
               {record.group}
             </Tag>
@@ -1327,7 +1332,7 @@ export default function ClientsPage() {
                           <SummaryStat
                             title={t('clients')}
                             value={summary.total}
-                            prefix={<TeamOutlined />}
+                            prefix={<TeamOutlined aria-hidden />}
                             onSelect={() => selectBucket(null)}
                           />
                         </Col>
@@ -1393,7 +1398,7 @@ export default function ClientsPage() {
                           {selectedRowKeys.length === 0 ? (
                             <Button
                               type="primary"
-                              icon={<PlusOutlined />}
+                              icon={<PlusOutlined aria-hidden />}
                               onClick={onAdd}
                               aria-label={t('pages.clients.addClients')}
                             >
@@ -1418,20 +1423,20 @@ export default function ClientsPage() {
                                   ? [
                                       {
                                         key: 'attach',
-                                        icon: <UsergroupAddOutlined />,
+                                        icon: <UsergroupAddOutlined aria-hidden />,
                                         label: t('pages.clients.attach'),
                                         onClick: () => setBulkAttachOpen(true),
                                       },
                                       {
                                         key: 'detach',
-                                        icon: <UsergroupDeleteOutlined />,
+                                        icon: <UsergroupDeleteOutlined aria-hidden />,
                                         label: t('pages.clients.detach'),
                                         danger: true,
                                         onClick: () => setBulkDetachOpen(true),
                                       },
                                       {
                                         key: 'addToGroup',
-                                        icon: <TagsOutlined />,
+                                        icon: <TagsOutlined aria-hidden />,
                                         label: t('pages.clients.addToGroup'),
                                         onClick: () => setBulkGroupOpen(true),
                                       },
@@ -1445,26 +1450,26 @@ export default function ClientsPage() {
                                       { type: 'divider' as const },
                                       {
                                         key: 'enable',
-                                        icon: <CheckCircleOutlined />,
+                                        icon: <CheckCircleOutlined aria-hidden />,
                                         label: t('pages.clients.enable'),
                                         onClick: () => onBulkSetEnable(true),
                                       },
                                       {
                                         key: 'disable',
-                                        icon: <StopOutlined />,
+                                        icon: <StopOutlined aria-hidden />,
                                         label: t('pages.clients.disable'),
                                         danger: true,
                                         onClick: () => onBulkSetEnable(false),
                                       },
                                       {
                                         key: 'adjust',
-                                        icon: <ClockCircleOutlined />,
+                                        icon: <ClockCircleOutlined aria-hidden />,
                                         label: t('pages.clients.adjust'),
                                         onClick: () => setBulkAdjustOpen(true),
                                       },
                                       {
                                         key: 'subLinks',
-                                        icon: <LinkOutlined />,
+                                        icon: <LinkOutlined aria-hidden />,
                                         label: t('pages.clients.subLinks'),
                                         onClick: () => setSubLinksOpen(true),
                                       },
@@ -1472,39 +1477,39 @@ export default function ClientsPage() {
                                   : [
                                       {
                                         key: 'bulk',
-                                        icon: <UsergroupAddOutlined />,
+                                        icon: <UsergroupAddOutlined aria-hidden />,
                                         label: t('pages.clients.bulk'),
                                         onClick: () => setBulkAddOpen(true),
                                       },
                                       {
                                         key: 'export',
-                                        icon: <DownloadOutlined />,
+                                        icon: <DownloadOutlined aria-hidden />,
                                         label: t('pages.clients.exportClients'),
                                         onClick: onExportClients,
                                       },
                                       {
                                         key: 'import',
-                                        icon: <UploadOutlined />,
+                                        icon: <UploadOutlined aria-hidden />,
                                         label: t('pages.clients.importClients'),
                                         onClick: onImportClients,
                                       },
                                       {
                                         key: 'resetAll',
-                                        icon: <RetweetOutlined />,
+                                        icon: <RetweetOutlined aria-hidden />,
                                         label: t('pages.clients.resetAllTraffics'),
                                         onClick: onResetAllTraffics,
                                       },
                                       { type: 'divider' as const },
                                       {
                                         key: 'delDepleted',
-                                        icon: <RestOutlined />,
+                                        icon: <RestOutlined aria-hidden />,
                                         label: t('pages.clients.delDepleted'),
                                         danger: true,
                                         onClick: onDelDepleted,
                                       },
                                       {
                                         key: 'delOrphans',
-                                        icon: <DisconnectOutlined />,
+                                        icon: <DisconnectOutlined aria-hidden />,
                                         label: t('pages.clients.delOrphans'),
                                         danger: true,
                                         onClick: onDeleteOrphans,
@@ -1512,14 +1517,14 @@ export default function ClientsPage() {
                                     ],
                             }}
                           >
-                            <Button icon={<MoreOutlined />} aria-label={t('more')}>
+                            <Button icon={<MoreOutlined aria-hidden />} aria-label={t('more')}>
                               {!isMobile && t('more')}
                             </Button>
                           </Dropdown>
                           {selectedRowKeys.length > 0 && (
                             <Button
                               danger
-                              icon={<DeleteOutlined />}
+                              icon={<DeleteOutlined aria-hidden />}
                               onClick={onBulkDelete}
                               style={{ marginInlineStart: 'auto' }}
                               aria-label={t('delete')}
@@ -1536,14 +1541,14 @@ export default function ClientsPage() {
                           onChange={(e) => setSearchKey(e.target.value)}
                           placeholder={t('pages.clients.searchPlaceholder')}
                           allowClear
-                          prefix={<SearchOutlined />}
+                          prefix={<SearchOutlined aria-hidden />}
                           size={isMobile ? 'small' : 'middle'}
                           style={{ maxWidth: 320 }}
                           aria-label={t('search')}
                         />
                         <Badge count={activeCount} size="small" offset={[-4, 4]}>
                           <Button
-                            icon={<FilterOutlined />}
+                            icon={<FilterOutlined aria-hidden />}
                             size={isMobile ? 'small' : 'middle'}
                             onClick={() => setFilterDrawerOpen(true)}
                             type={activeCount > 0 ? 'primary' : 'default'}
@@ -1556,7 +1561,7 @@ export default function ClientsPage() {
                           value={sortValueFor(sortColumn, sortOrder)}
                           aria-label={t('sort')}
                           size={isMobile ? 'small' : 'middle'}
-                          suffix={<SortAscendingOutlined />}
+                          suffix={<SortAscendingOutlined aria-hidden />}
                           style={{ minWidth: isMobile ? 130 : 200 }}
                           onChange={(value) => {
                             const opt = SORT_OPTIONS.find((o) => o.value === value);
@@ -1709,7 +1714,10 @@ export default function ClientsPage() {
                           locale={{
                             emptyText: (
                               <div className="clients-empty">
-                                <TeamOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+                                <TeamOutlined
+                                  aria-hidden
+                                  style={{ fontSize: 32, marginBottom: 8 }}
+                                />
                                 <div>{t('noData')}</div>
                               </div>
                             ),
@@ -1734,7 +1742,7 @@ export default function ClientsPage() {
                             )}
                             {filteredClients.length === 0 && (
                               <div className="card-empty">
-                                <TeamOutlined style={{ fontSize: 28, opacity: 0.5 }} />
+                                <TeamOutlined aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
                                 <div>{t('noData')}</div>
                               </div>
                             )}
@@ -1799,6 +1807,7 @@ export default function ClientsPage() {
                                         checked={!!row.enable}
                                         size="small"
                                         loading={togglingEmail === row.email}
+                                        aria-label={t('pages.clients.enabled')}
                                         onChange={(next) => onToggleEnable(row, next)}
                                       />
                                       <Dropdown
@@ -1810,7 +1819,8 @@ export default function ClientsPage() {
                                               key: 'qr',
                                               label: (
                                                 <>
-                                                  <QrcodeOutlined /> {t('pages.clients.qrCode')}
+                                                  <QrcodeOutlined aria-hidden />{' '}
+                                                  {t('pages.clients.qrCode')}
                                                 </>
                                               ),
                                               onClick: () => onShowQr(row.email),
@@ -1819,7 +1829,7 @@ export default function ClientsPage() {
                                               key: 'reset',
                                               label: (
                                                 <>
-                                                  <RetweetOutlined />{' '}
+                                                  <RetweetOutlined aria-hidden />{' '}
                                                   {t('pages.inbounds.resetTraffic')}
                                                 </>
                                               ),
@@ -1829,7 +1839,7 @@ export default function ClientsPage() {
                                               key: 'edit',
                                               label: (
                                                 <>
-                                                  <EditOutlined /> {t('edit')}
+                                                  <EditOutlined aria-hidden /> {t('edit')}
                                                 </>
                                               ),
                                               onClick: () => onEdit(row.email),
@@ -1839,7 +1849,7 @@ export default function ClientsPage() {
                                               danger: true,
                                               label: (
                                                 <>
-                                                  <DeleteOutlined /> {t('delete')}
+                                                  <DeleteOutlined aria-hidden /> {t('delete')}
                                                 </>
                                               ),
                                               onClick: () => onDelete(row.email),
@@ -1851,7 +1861,7 @@ export default function ClientsPage() {
                                           type="text"
                                           size="small"
                                           className="row-action-trigger"
-                                          icon={<MoreOutlined />}
+                                          icon={<MoreOutlined aria-hidden />}
                                           aria-label={t('more')}
                                         />
                                       </Dropdown>

frontend/src/pages/clients/FilterDrawer.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -46,6 +46,7 @@ export default function FilterDrawer({
   nodes,
 }: FilterDrawerProps) {
   const { t } = useTranslation();
+  const uid = useId();
 
   function patch<K extends keyof ClientFilters>(key: K, value: ClientFilters[K]) {
     onChange({ ...filters, [key]: value });
@@ -113,8 +114,9 @@ export default function FilterDrawer({
           </Checkbox.Group>
         </Form.Item>
 
-        <Form.Item label={t('pages.inbounds.protocol')}>
+        <Form.Item label={t('pages.inbounds.protocol')} htmlFor={`${uid}-protocols`}>
           <Select
+            id={`${uid}-protocols`}
             mode="multiple"
             value={filters.protocols}
             onChange={(v) => patch('protocols', v as string[])}
@@ -125,8 +127,9 @@ export default function FilterDrawer({
           />
         </Form.Item>
 
-        <Form.Item label={t('inbounds')}>
+        <Form.Item label={t('inbounds')} htmlFor={`${uid}-inbounds`}>
           <Select
+            id={`${uid}-inbounds`}
             mode="multiple"
             value={filters.inboundIds}
             onChange={(v) => patch('inboundIds', v as number[])}
@@ -140,8 +143,9 @@ export default function FilterDrawer({
         </Form.Item>
 
         {nodes.length > 0 && (
-          <Form.Item label={t('pages.clients.filters.nodes')}>
+          <Form.Item label={t('pages.clients.filters.nodes')} htmlFor={`${uid}-nodes`}>
             <Select
+              id={`${uid}-nodes`}
               mode="multiple"
               value={filters.nodeIds}
               onChange={(v) => patch('nodeIds', v as number[])}
@@ -155,8 +159,9 @@ export default function FilterDrawer({
           </Form.Item>
         )}
 
-        <Form.Item label={t('pages.clients.group')}>
+        <Form.Item label={t('pages.clients.group')} htmlFor={`${uid}-groups`}>
           <Select
+            id={`${uid}-groups`}
             mode="multiple"
             value={filters.groups}
             onChange={(v) => patch('groups', v as string[])}
@@ -169,8 +174,9 @@ export default function FilterDrawer({
           />
         </Form.Item>
 
-        <Form.Item label={t('pages.clients.expiryTime')}>
+        <Form.Item label={t('pages.clients.expiryTime')} htmlFor={`${uid}-expiry`}>
           <DatePicker.RangePicker
+            id={`${uid}-expiry`}
             value={dateRange}
             onChange={(range) => {
               const from = range?.[0]?.startOf('day').valueOf();
@@ -182,10 +188,11 @@ export default function FilterDrawer({
           />
         </Form.Item>
 
-        <Form.Item label={`${t('pages.clients.traffic')} (GB)`}>
+        <Form.Item label={`${t('pages.clients.traffic')} (GB)`} htmlFor={`${uid}-usage-from`}>
           <Row gutter={8}>
             <Col span={12}>
               <InputNumber
+                id={`${uid}-usage-from`}
                 value={filters.usageFromGB}
                 min={0}
                 step={1}
@@ -196,6 +203,7 @@ export default function FilterDrawer({
             </Col>
             <Col span={12}>
               <InputNumber
+                aria-label={`${t('pages.clients.traffic')} (GB) ${t('to')}`}
                 value={filters.usageToGB}
                 min={0}
                 step={1}

frontend/src/pages/clients/RowCells.tsx

@@ -44,7 +44,7 @@ export const ClientRowActions = memo(function ClientRowActions({
           size="small"
           type="text"
           style={ICON_BUTTON_STYLE}
-          icon={<QrcodeOutlined />}
+          icon={<QrcodeOutlined aria-hidden />}
           aria-label={t('pages.clients.qrCode')}
           onClick={() => onShowQr(email)}
         />
@@ -54,7 +54,7 @@ export const ClientRowActions = memo(function ClientRowActions({
           size="small"
           type="text"
           style={ICON_BUTTON_STYLE}
-          icon={<InfoCircleOutlined />}
+          icon={<InfoCircleOutlined aria-hidden />}
           aria-label={t('pages.clients.clientInfo')}
           onClick={() => onShowInfo(email)}
         />
@@ -64,7 +64,7 @@ export const ClientRowActions = memo(function ClientRowActions({
           size="small"
           type="text"
           style={ICON_BUTTON_STYLE}
-          icon={<RetweetOutlined />}
+          icon={<RetweetOutlined aria-hidden />}
           aria-label={t('pages.inbounds.resetTraffic')}
           onClick={() => onResetTraffic(email)}
         />
@@ -74,7 +74,7 @@ export const ClientRowActions = memo(function ClientRowActions({
           size="small"
           type="text"
           style={ICON_BUTTON_STYLE}
-          icon={<EditOutlined />}
+          icon={<EditOutlined aria-hidden />}
           aria-label={t('edit')}
           onClick={() => onEdit(email)}
         />
@@ -85,7 +85,7 @@ export const ClientRowActions = memo(function ClientRowActions({
           type="text"
           danger
           style={ICON_BUTTON_STYLE}
-          icon={<DeleteOutlined />}
+          icon={<DeleteOutlined aria-hidden />}
           aria-label={t('delete')}
           onClick={() => onDelete(email)}
         />

frontend/src/pages/clients/SubLinksModal.tsx

@@ -122,7 +122,7 @@ export default function SubLinksModal({
           size="small"
           type="text"
           aria-label={t('copy')}
-          icon={<CopyOutlined />}
+          icon={<CopyOutlined aria-hidden />}
           onClick={() => copy(row.link, t('copied'))}
         />
       ),
@@ -157,7 +157,7 @@ export default function SubLinksModal({
             <Button onClick={() => onOpenChange(false)}>{t('close')}</Button>
             <div style={{ display: 'flex', gap: 8 }}>
               <Button
-                icon={<CopyOutlined />}
+                icon={<CopyOutlined aria-hidden />}
                 disabled={rows.length === 0}
                 onClick={() =>
                   copy(allText, t('pages.clients.subLinksCopiedAll', { count: rows.length }))
@@ -167,7 +167,7 @@ export default function SubLinksModal({
               </Button>
               <Button
                 type="primary"
-                icon={<DownloadOutlined />}
+                icon={<DownloadOutlined aria-hidden />}
                 disabled={rows.length === 0}
                 onClick={download}
               >

frontend/src/pages/groups/GroupAddClientsModal.tsx

@@ -138,6 +138,7 @@ export default function GroupAddClientsModal({
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={t('pages.inbounds.attachClientsSearchPlaceholder')}
+            aria-label={t('pages.inbounds.attachClientsSearchPlaceholder')}
             style={{ maxWidth: 320 }}
           />
           <Typography.Text type="secondary">

frontend/src/pages/groups/GroupRemoveClientsModal.tsx

@@ -122,6 +122,7 @@ export default function GroupRemoveClientsModal({
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={t('pages.inbounds.attachClientsSearchPlaceholder')}
+            aria-label={t('pages.inbounds.attachClientsSearchPlaceholder')}
             style={{ maxWidth: 320 }}
           />
           <Typography.Text type="secondary">

frontend/src/pages/groups/GroupsPage.tsx

@@ -1,4 +1,4 @@
-import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -89,6 +89,7 @@ async function fetchEmailsForGroup(name: string): Promise<string[]> {
 export default function GroupsPage() {
   usePageTitle();
   const { t } = useTranslation();
+  const uid = useId();
   const { isDark, isUltra, antdThemeConfig } = useTheme();
   const { isMobile } = useMediaQuery();
   const [modal, modalContextHolder] = Modal.useModal();
@@ -353,41 +354,41 @@ export default function GroupsPage() {
     return [
       {
         key: 'subLinks',
-        icon: <LinkOutlined />,
+        icon: <LinkOutlined aria-hidden />,
         label: t('pages.clients.subLinksSelected', { count: row.clientCount || 0 }),
         disabled: !row.clientCount,
         onClick: () => openSubLinksFor(row),
       },
       {
         key: 'adjust',
-        icon: <ClockCircleOutlined />,
+        icon: <ClockCircleOutlined aria-hidden />,
         label: t('pages.clients.adjustSelected', { count: row.clientCount || 0 }),
         disabled: !row.clientCount,
         onClick: () => openAdjustFor(row),
       },
       {
         key: 'reset',
-        icon: <RetweetOutlined />,
+        icon: <RetweetOutlined aria-hidden />,
         label: t('pages.groups.resetTraffic'),
         disabled: !row.clientCount,
         onClick: () => onResetTraffic(row),
       },
       {
         key: 'addClients',
-        icon: <UsergroupAddOutlined />,
+        icon: <UsergroupAddOutlined aria-hidden />,
         label: t('pages.groups.addToGroup'),
         onClick: () => openAddClientsFor(row),
       },
       {
         key: 'rename',
-        icon: <EditOutlined />,
+        icon: <EditOutlined aria-hidden />,
         label: t('pages.groups.rename'),
         onClick: () => openRename(row),
       },
       { type: 'divider' },
       {
         key: 'removeClients',
-        icon: <UsergroupDeleteOutlined />,
+        icon: <UsergroupDeleteOutlined aria-hidden />,
         label: t('pages.groups.removeFromGroup'),
         danger: true,
         disabled: !row.clientCount,
@@ -395,7 +396,7 @@ export default function GroupsPage() {
       },
       {
         key: 'deleteClients',
-        icon: <DeleteOutlined />,
+        icon: <DeleteOutlined aria-hidden />,
         label: t('pages.groups.deleteClients'),
         danger: true,
         disabled: !row.clientCount,
@@ -403,7 +404,7 @@ export default function GroupsPage() {
       },
       {
         key: 'delete',
-        icon: <DeleteOutlined />,
+        icon: <DeleteOutlined aria-hidden />,
         label: t('pages.groups.deleteGroupOnly'),
         danger: true,
         onClick: () => onDelete(row),
@@ -424,7 +425,7 @@ export default function GroupsPage() {
               size="small"
               type="text"
               style={{ fontSize: 16 }}
-              icon={<MoreOutlined />}
+              icon={<MoreOutlined aria-hidden />}
             />
           </Dropdown>
           <Tooltip title={t('pages.groups.rename')}>
@@ -433,7 +434,7 @@ export default function GroupsPage() {
               size="small"
               type="text"
               style={{ fontSize: 16 }}
-              icon={<EditOutlined />}
+              icon={<EditOutlined aria-hidden />}
               onClick={() => openRename(row)}
             />
           </Tooltip>
@@ -518,14 +519,14 @@ export default function GroupsPage() {
                           <Statistic
                             title={t('pages.groups.totalGroups')}
                             value={String(totalGroups)}
-                            prefix={<TagsOutlined />}
+                            prefix={<TagsOutlined aria-hidden />}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={6}>
                           <Statistic
                             title={t('pages.groups.totalGroupedClients')}
                             value={String(totalClients)}
-                            prefix={<TeamOutlined />}
+                            prefix={<TeamOutlined aria-hidden />}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={6}>
@@ -534,9 +535,11 @@ export default function GroupsPage() {
                             value={0}
                             formatter={() => (
                               <span>
-                                <ArrowUpOutlined /> {SizeFormatter.sizeFormat(totalUpload)}
+                                <ArrowUpOutlined aria-hidden />{' '}
+                                {SizeFormatter.sizeFormat(totalUpload)}
                                 {' / '}
-                                <ArrowDownOutlined /> {SizeFormatter.sizeFormat(totalDownload)}
+                                <ArrowDownOutlined aria-hidden />{' '}
+                                {SizeFormatter.sizeFormat(totalDownload)}
                               </span>
                             )}
                           />
@@ -545,7 +548,7 @@ export default function GroupsPage() {
                           <Statistic
                             title={t('pages.groups.totalTraffic')}
                             value={SizeFormatter.sizeFormat(totalTraffic)}
-                            prefix={<PieChartOutlined />}
+                            prefix={<PieChartOutlined aria-hidden />}
                           />
                         </Col>
                       </Row>
@@ -561,7 +564,7 @@ export default function GroupsPage() {
                           <Button
                             aria-label={t('pages.groups.addGroup')}
                             type="primary"
-                            icon={<PlusOutlined />}
+                            icon={<PlusOutlined aria-hidden />}
                             onClick={openCreate}
                           >
                             {!isMobile && t('pages.groups.addGroup')}
@@ -579,7 +582,7 @@ export default function GroupsPage() {
                         locale={{
                           emptyText: (
                             <div className="card-empty">
-                              <TagsOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+                              <TagsOutlined aria-hidden style={{ fontSize: 32, marginBottom: 8 }} />
                               <div>{t('noData')}</div>
                             </div>
                           ),
@@ -604,8 +607,9 @@ export default function GroupsPage() {
           destroyOnHidden
         >
           <Form layout="vertical">
-            <Form.Item label={t('pages.groups.name')}>
+            <Form.Item label={t('pages.groups.name')} htmlFor={`${uid}-create-name`}>
               <Input
+                id={`${uid}-create-name`}
                 value={createName}
                 onChange={(e) => setCreateName(e.target.value)}
                 onPressEnter={confirmCreate}
@@ -627,8 +631,9 @@ export default function GroupsPage() {
           destroyOnHidden
         >
           <Form layout="vertical">
-            <Form.Item label={t('pages.groups.name')}>
+            <Form.Item label={t('pages.groups.name')} htmlFor={`${uid}-rename-name`}>
               <Input
+                id={`${uid}-rename-name`}
                 value={renameValue}
                 onChange={(e) => setRenameValue(e.target.value)}
                 onPressEnter={confirmRename}

frontend/src/pages/hosts/HostFormModal.tsx

@@ -208,7 +208,11 @@ export default function HostFormModal({
               {
                 key: 'basic',
                 forceRender: true,
-                label: catTabLabel(<ProfileOutlined />, t('pages.hosts.sections.basic'), isMobile),
+                label: catTabLabel(
+                  <ProfileOutlined aria-hidden />,
+                  t('pages.hosts.sections.basic'),
+                  isMobile,
+                ),
                 children: (
                   <>
                     <FormField
@@ -291,7 +295,7 @@ export default function HostFormModal({
                 key: 'security',
                 forceRender: true,
                 label: catTabLabel(
-                  <SafetyCertificateOutlined />,
+                  <SafetyCertificateOutlined aria-hidden />,
                   t('pages.hosts.sections.security'),
                   isMobile,
                 ),
@@ -373,7 +377,7 @@ export default function HostFormModal({
                 key: 'advanced',
                 forceRender: true,
                 label: catTabLabel(
-                  <ControlOutlined />,
+                  <ControlOutlined aria-hidden />,
                   t('pages.hosts.sections.advanced'),
                   isMobile,
                 ),
@@ -386,7 +390,7 @@ export default function HostFormModal({
                         key: 'adv-general',
                         forceRender: true,
                         label: catTabLabel(
-                          <SettingOutlined />,
+                          <SettingOutlined aria-hidden />,
                           t('pages.hosts.sections.general'),
                           isMobile,
                         ),
@@ -425,7 +429,7 @@ export default function HostFormModal({
                         key: 'adv-mux',
                         forceRender: true,
                         label: catTabLabel(
-                          <PartitionOutlined />,
+                          <PartitionOutlined aria-hidden />,
                           t('pages.hosts.fields.muxParams'),
                           isMobile,
                         ),
@@ -445,7 +449,7 @@ export default function HostFormModal({
                         key: 'adv-sockopt',
                         forceRender: true,
                         label: catTabLabel(
-                          <DeploymentUnitOutlined />,
+                          <DeploymentUnitOutlined aria-hidden />,
                           t('pages.hosts.fields.sockoptParams'),
                           isMobile,
                         ),
@@ -465,7 +469,7 @@ export default function HostFormModal({
                         key: 'adv-finalmask',
                         forceRender: true,
                         label: catTabLabel(
-                          <RocketOutlined />,
+                          <RocketOutlined aria-hidden />,
                           t('pages.hosts.fields.finalMask'),
                           isMobile,
                         ),
@@ -489,7 +493,7 @@ export default function HostFormModal({
                 key: 'clash',
                 forceRender: true,
                 label: catTabLabel(
-                  <NodeIndexOutlined />,
+                  <NodeIndexOutlined aria-hidden />,
                   t('pages.hosts.sections.clash'),
                   isMobile,
                 ),

frontend/src/pages/hosts/HostList.tsx

@@ -95,7 +95,7 @@ export default function HostList(props: HostListProps) {
               <Button
                 size="small"
                 type="text"
-                icon={<ArrowUpOutlined />}
+                icon={<ArrowUpOutlined aria-hidden />}
                 aria-label={t('pages.hosts.moveUp')}
                 disabled={idx === 0}
                 onClick={() => onMove(h, 'up')}
@@ -105,7 +105,7 @@ export default function HostList(props: HostListProps) {
               <Button
                 size="small"
                 type="text"
-                icon={<ArrowDownOutlined />}
+                icon={<ArrowDownOutlined aria-hidden />}
                 aria-label={t('pages.hosts.moveDown')}
                 disabled={idx >= count - 1}
                 onClick={() => onMove(h, 'down')}
@@ -115,7 +115,7 @@ export default function HostList(props: HostListProps) {
               <Button
                 size="small"
                 type="text"
-                icon={<EditOutlined />}
+                icon={<EditOutlined aria-hidden />}
                 aria-label={t('edit')}
                 onClick={() => onEdit(h)}
               />
@@ -125,7 +125,7 @@ export default function HostList(props: HostListProps) {
                 size="small"
                 type="text"
                 danger
-                icon={<DeleteOutlined />}
+                icon={<DeleteOutlined aria-hidden />}
                 aria-label={t('delete')}
                 onClick={() => onDelete(h)}
               />
@@ -139,7 +139,12 @@ export default function HostList(props: HostListProps) {
       key: 'enable',
       width: 90,
       render: (_, h) => (
-        <Switch size="small" checked={!h.isDisabled} onChange={(next) => onToggleEnable(h, next)} />
+        <Switch
+          size="small"
+          checked={!h.isDisabled}
+          aria-label={t('pages.hosts.fields.enable')}
+          onChange={(next) => onToggleEnable(h, next)}
+        />
       ),
     },
     {
@@ -276,7 +281,7 @@ export default function HostList(props: HostListProps) {
   const toolbar = (
     <div className="card-toolbar">
       {selectedGroupIds.length === 0 ? (
-        <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
+        <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={onAdd}>
           {!isMobile && t('pages.hosts.addHost')}
         </Button>
       ) : (
@@ -291,7 +296,7 @@ export default function HostList(props: HostListProps) {
           </Tag>
           <Button onClick={() => onBulkEnable(true)}>{t('pages.hosts.bulkEnable')}</Button>
           <Button onClick={() => onBulkEnable(false)}>{t('pages.hosts.bulkDisable')}</Button>
-          <Button danger icon={<DeleteOutlined />} onClick={onBulkDelete}>
+          <Button danger icon={<DeleteOutlined aria-hidden />} onClick={onBulkDelete}>
             {t('pages.hosts.bulkDelete')}
           </Button>
         </>
@@ -316,7 +321,7 @@ export default function HostList(props: HostListProps) {
         locale={{
           emptyText: (
             <div className="card-empty">
-              <GlobalOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+              <GlobalOutlined aria-hidden style={{ fontSize: 32, marginBottom: 8 }} />
               <div>{t('noData')}</div>
             </div>
           ),

frontend/src/pages/hosts/HostsPage.tsx

@@ -174,7 +174,7 @@ export default function HostsPage() {
                           <Statistic
                             title={t('pages.hosts.summary.total')}
                             value={String(summary.total)}
-                            prefix={<GlobalOutlined />}
+                            prefix={<GlobalOutlined aria-hidden />}
                           />
                         </Col>
                         <Col xs={8} sm={8} md={8}>
@@ -182,7 +182,10 @@ export default function HostsPage() {
                             title={t('pages.hosts.summary.enabled')}
                             value={String(summary.enabled)}
                             prefix={
-                              <CheckCircleOutlined style={{ color: 'var(--ant-color-success)' }} />
+                              <CheckCircleOutlined
+                                aria-hidden
+                                style={{ color: 'var(--ant-color-success)' }}
+                              />
                             }
                           />
                         </Col>
@@ -191,7 +194,10 @@ export default function HostsPage() {
                             title={t('pages.hosts.summary.disabled')}
                             value={String(summary.disabled)}
                             prefix={
-                              <StopOutlined style={{ color: 'var(--ant-color-text-quaternary)' }} />
+                              <StopOutlined
+                                aria-hidden
+                                style={{ color: 'var(--ant-color-text-quaternary)' }}
+                              />
                             }
                           />
                         </Col>

frontend/src/pages/inbounds/InboundsPage.tsx

@@ -754,9 +754,11 @@ export default function InboundsPage() {
                             value={0}
                             formatter={() => (
                               <span>
-                                <ArrowUpOutlined /> {SizeFormatter.sizeFormat(totals.up)}
+                                <ArrowUpOutlined aria-hidden />{' '}
+                                {SizeFormatter.sizeFormat(totals.up)}
                                 {' / '}
-                                <ArrowDownOutlined /> {SizeFormatter.sizeFormat(totals.down)}
+                                <ArrowDownOutlined aria-hidden />{' '}
+                                {SizeFormatter.sizeFormat(totals.down)}
                               </span>
                             )}
                           />
@@ -765,14 +767,14 @@ export default function InboundsPage() {
                           <Statistic
                             title={t('pages.inbounds.totalUsage')}
                             value={SizeFormatter.sizeFormat(totals.up + totals.down)}
-                            prefix={<PieChartOutlined />}
+                            prefix={<PieChartOutlined aria-hidden />}
                           />
                         </Col>
                         <Col xs={24} sm={24} md={8}>
                           <Statistic
                             title={t('pages.inbounds.inboundCount')}
                             value={String(dbInbounds.length)}
-                            prefix={<BarsOutlined />}
+                            prefix={<BarsOutlined aria-hidden />}
                           />
                         </Col>
                       </Row>

frontend/src/pages/inbounds/form/FallbacksCard.tsx

@@ -32,7 +32,13 @@ export default function FallbacksCard({
 
   const addButtons = (
     <Space size={8} wrap>
-      <Button type="primary" ghost size="small" icon={<PlusOutlined />} onClick={addFallback}>
+      <Button
+        type="primary"
+        ghost
+        size="small"
+        icon={<PlusOutlined aria-hidden />}
+        onClick={addFallback}
+      >
         {t('pages.inbounds.fallbacks.add') || 'Add fallback'}
       </Button>
       <Button
@@ -90,25 +96,26 @@ export default function FallbacksCard({
                 disabled={idx === 0}
                 onClick={() => moveFallback(idx, -1)}
                 title={t('pages.inbounds.form.moveUp')}
-                icon={<ArrowUpOutlined />}
+                icon={<ArrowUpOutlined aria-hidden />}
               />
               <Button
                 aria-label={t('pages.inbounds.form.moveDown')}
                 disabled={idx === fallbacks.length - 1}
                 onClick={() => moveFallback(idx, 1)}
                 title={t('pages.inbounds.form.moveDown')}
-                icon={<ArrowDownOutlined />}
+                icon={<ArrowDownOutlined aria-hidden />}
               />
               <Button
                 aria-label={t('delete')}
                 danger
                 onClick={() => removeFallback(idx)}
-                icon={<DeleteOutlined />}
+                icon={<DeleteOutlined aria-hidden />}
               />
             </Space.Compact>
             <Row gutter={[8, 8]}>
               <Col xs={24} sm={12}>
                 <Input
+                  aria-label="SNI"
                   prefix="SNI"
                   placeholder={t('pages.inbounds.fallbacks.matchAny') || 'any'}
                   value={record.name}
@@ -117,6 +124,7 @@ export default function FallbacksCard({
               </Col>
               <Col xs={24} sm={12}>
                 <Input
+                  aria-label="ALPN"
                   prefix="ALPN"
                   placeholder={t('pages.inbounds.fallbacks.matchAny') || 'any'}
                   value={record.alpn}
@@ -125,6 +133,7 @@ export default function FallbacksCard({
               </Col>
               <Col xs={24} sm={12}>
                 <Input
+                  aria-label="Path"
                   prefix="Path"
                   placeholder="/"
                   value={record.path}
@@ -133,6 +142,7 @@ export default function FallbacksCard({
               </Col>
               <Col xs={24} sm={12}>
                 <Input
+                  aria-label="Dest"
                   prefix="Dest"
                   placeholder={t('pages.inbounds.fallbacks.destPlaceholder') || 'auto'}
                   value={record.dest}
@@ -141,6 +151,7 @@ export default function FallbacksCard({
               </Col>
               <Col xs={24} sm={12}>
                 <InputNumber
+                  aria-label="xver"
                   prefix="xver"
                   min={0}
                   max={2}

frontend/src/pages/inbounds/form/InboundFormModal.tsx

@@ -1,20 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
-import { QuestionCircleOutlined } from '@ant-design/icons';
+
 import dayjs from 'dayjs';
-import {
-  Alert,
-  Form,
-  Input,
-  InputNumber,
-  Modal,
-  Radio,
-  Select,
-  Switch,
-  Tabs,
-  Tooltip,
-  message,
-} from 'antd';
+import { Alert, Form, Input, InputNumber, Modal, Radio, Select, Switch, Tabs, message } from 'antd';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 
 import { HttpUtil, NumberFormatter, RandomUtil, SizeFormatter, Wireguard } from '@/utils';
@@ -99,16 +87,6 @@ import SniffingTab from './SniffingTab';
 import type { DBInbound } from '@/models/dbinbound';
 import type { NodeRecord } from '@/api/queries/useNodesQuery';
 
-/* Render a field label with a hover tooltip icon instead of an `extra` help line below. */
-const labelWithHint = (label: string, hint: string) => (
-  <span>
-    {label}
-    <Tooltip title={hint}>
-      <QuestionCircleOutlined style={{ marginInlineStart: 4, color: 'rgba(128,128,128,0.65)' }} />
-    </Tooltip>
-  </span>
-);
-
 const PROTOCOL_OPTIONS = Object.values(Protocols).map((p) => ({ value: p, label: p }));
 const SHARE_ADDR_STRATEGIES = ['node', 'listen', 'custom'] as const;
 const SHARE_ADDR_HOSTNAME_RE =
@@ -240,6 +218,7 @@ export default function InboundFormModal({
   availableNodesFetched = true,
 }: InboundFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const [modal, modalContextHolder] = Modal.useModal();
   const methods = useForm<InboundFormValues>({ defaultValues: buildAddModeValues() });
@@ -668,7 +647,8 @@ export default function InboundFormModal({
 
       <FormField
         name="listen"
-        label={labelWithHint(t('pages.inbounds.address'), t('pages.inbounds.form.listenHelp'))}
+        label={t('pages.inbounds.address')}
+        tooltip={t('pages.inbounds.form.listenHelp')}
       >
         <Input placeholder={t('pages.inbounds.monitorDesc')} />
       </FormField>
@@ -677,10 +657,8 @@ export default function InboundFormModal({
         <>
           <FormField
             name="shareAddrStrategy"
-            label={labelWithHint(
-              t('pages.inbounds.form.shareAddrStrategy'),
-              t('pages.inbounds.form.shareAddrStrategyHelp'),
-            )}
+            label={t('pages.inbounds.form.shareAddrStrategy')}
+            tooltip={t('pages.inbounds.form.shareAddrStrategyHelp')}
           >
             <Select
               options={SHARE_ADDR_STRATEGIES.filter(
@@ -695,10 +673,8 @@ export default function InboundFormModal({
           {shareAddrStrategy === 'custom' && (
             <FormField
               name="shareAddr"
-              label={labelWithHint(
-                t('pages.inbounds.form.shareAddr'),
-                t('pages.inbounds.form.shareAddrHelp'),
-              )}
+              label={t('pages.inbounds.form.shareAddr')}
+              tooltip={t('pages.inbounds.form.shareAddrHelp')}
               rules={{
                 validate: (value) =>
                   isValidShareAddrInput(String(value ?? '')) ||
@@ -713,10 +689,8 @@ export default function InboundFormModal({
 
       <FormField
         name="subSortIndex"
-        label={labelWithHint(
-          t('pages.inbounds.form.subSortIndex'),
-          t('pages.inbounds.form.subSortIndexHelp'),
-        )}
+        label={t('pages.inbounds.form.subSortIndex')}
+        tooltip={t('pages.inbounds.form.subSortIndexHelp')}
       >
         <InputNumber />
       </FormField>
@@ -724,10 +698,8 @@ export default function InboundFormModal({
       <FormField
         name="excludeFromSub"
         valueProp="checked"
-        label={labelWithHint(
-          t('pages.inbounds.form.excludeFromSub'),
-          t('pages.inbounds.form.excludeFromSubHelp'),
-        )}
+        label={t('pages.inbounds.form.excludeFromSub')}
+        tooltip={t('pages.inbounds.form.excludeFromSubHelp')}
       >
         <Switch />
       </FormField>
@@ -736,10 +708,8 @@ export default function InboundFormModal({
         <FormField
           name="disableFlow"
           valueProp="checked"
-          label={labelWithHint(
-            t('pages.inbounds.form.disableFlow'),
-            t('pages.inbounds.form.disableFlowHelp'),
-          )}
+          label={t('pages.inbounds.form.disableFlow')}
+          tooltip={t('pages.inbounds.form.disableFlowHelp')}
         >
           <Switch />
         </FormField>
@@ -754,13 +724,13 @@ export default function InboundFormModal({
       </FormField>
 
       <Form.Item
-        label={
-          <Tooltip title={t('pages.inbounds.meansNoLimit')}>
-            {t('pages.inbounds.totalFlow')}
-          </Tooltip>
-        }
+        htmlFor={`${uid}-totalFlow`}
+        label={t('pages.inbounds.totalFlow')}
+        tooltip={t('pages.inbounds.meansNoLimit')}
       >
         <InputNumber
+          id={`${uid}-totalFlow`}
+          aria-describedby={`${uid}-totalFlow-hint`}
           value={wTotal ? Math.round((wTotal / SizeFormatter.ONE_GB) * 100) / 100 : 0}
           min={0}
           step={1}
@@ -769,6 +739,9 @@ export default function InboundFormModal({
             setV('total', bytes);
           }}
         />
+        <span id={`${uid}-totalFlow-hint`} hidden>
+          {t('pages.inbounds.meansNoLimit')}
+        </span>
       </Form.Item>
 
       <FormField name="trafficReset" label={t('pages.inbounds.periodicTrafficResetTitle')}>
@@ -791,16 +764,19 @@ export default function InboundFormModal({
       )}
 
       <Form.Item
-        label={
-          <Tooltip title={t('pages.inbounds.leaveBlankToNeverExpire')}>
-            {t('pages.inbounds.expireDate')}
-          </Tooltip>
-        }
+        htmlFor={`${uid}-expiryTime`}
+        label={t('pages.inbounds.expireDate')}
+        tooltip={t('pages.inbounds.leaveBlankToNeverExpire')}
       >
         <DateTimePicker
+          id={`${uid}-expiryTime`}
+          aria-describedby={`${uid}-expiryTime-hint`}
           value={wExpiry > 0 ? dayjs(wExpiry) : null}
           onChange={(d) => setV('expiryTime', d ? d.valueOf() : 0)}
         />
+        <span id={`${uid}-expiryTime-hint`} hidden>
+          {t('pages.inbounds.leaveBlankToNeverExpire')}
+        </span>
       </Form.Item>
     </>
   );
@@ -936,8 +912,9 @@ export default function InboundFormModal({
   const streamTab = (
     <>
       {hasSelectableTransport && (
-        <Form.Item label={t('transmission')}>
+        <Form.Item htmlFor={`${uid}-network`} label={t('transmission')}>
           <Select
+            id={`${uid}-network`}
             style={{ width: '75%' }}
             value={network}
             onChange={onNetworkChange}

frontend/src/pages/inbounds/form/protocols/accounts-list.tsx

@@ -23,7 +23,7 @@ export default function AccountsList() {
             })
           }
         >
-          <PlusOutlined /> {t('add')}
+          <PlusOutlined aria-hidden /> {t('add')}
         </Button>
       </Form.Item>
       {fields.length > 0 && (
@@ -32,13 +32,13 @@ export default function AccountsList() {
             <Space.Compact key={field.id} className="mb-8" block>
               <InputAddon>{String(idx + 1)}</InputAddon>
               <FormField name={['settings', 'accounts', idx, 'user']} noStyle>
-                <Input placeholder={t('username')} />
+                <Input aria-label={`${t('username')} ${idx + 1}`} placeholder={t('username')} />
               </FormField>
               <FormField name={['settings', 'accounts', idx, 'pass']} noStyle>
-                <Input placeholder={t('password')} />
+                <Input aria-label={`${t('password')} ${idx + 1}`} placeholder={t('password')} />
               </FormField>
               <Button aria-label={t('remove')} onClick={() => remove(idx)}>
-                <MinusOutlined />
+                <MinusOutlined aria-hidden />
               </Button>
             </Space.Compact>
           ))}

frontend/src/pages/inbounds/form/protocols/amneziawg.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input, InputNumber, Space, Switch } from 'antd';
 import { ReloadOutlined } from '@ant-design/icons';
@@ -16,22 +17,23 @@ export default function AmneziawgFields({
   regenInboundAwgObfuscation,
 }: AmneziawgFieldsProps) {
   const { t } = useTranslation();
+  const uid = useId();
   return (
     <>
-      <Form.Item label={t('pages.xray.amneziawg.privateKey')}>
+      <Form.Item htmlFor={`${uid}-privateKey`} label={t('pages.xray.amneziawg.privateKey')}>
         <Space.Compact block>
           <FormField name={['settings', 'server', 'privateKey']} noStyle>
-            <Input style={{ width: 'calc(100% - 32px)' }} />
+            <Input id={`${uid}-privateKey`} style={{ width: 'calc(100% - 32px)' }} />
           </FormField>
           <Button
             aria-label={t('regenerate')}
-            icon={<ReloadOutlined />}
+            icon={<ReloadOutlined aria-hidden />}
             onClick={regenInboundAwg}
           />
         </Space.Compact>
       </Form.Item>
-      <Form.Item label={t('pages.xray.amneziawg.publicKey')}>
-        <Input value={awgPubKey} disabled />
+      <Form.Item htmlFor={`${uid}-publicKey`} label={t('pages.xray.amneziawg.publicKey')}>
+        <Input id={`${uid}-publicKey`} value={awgPubKey} disabled />
       </Form.Item>
       <FormField
         name={['settings', 'server', 'subnetIp']}
@@ -89,7 +91,7 @@ export default function AmneziawgFields({
         <Input placeholder="eth0" />
       </FormField>
       <Form.Item label={t('pages.xray.amneziawg.obfuscation')}>
-        <Button icon={<ReloadOutlined />} onClick={regenInboundAwgObfuscation}>
+        <Button icon={<ReloadOutlined aria-hidden />} onClick={regenInboundAwgObfuscation}>
           {t('pages.xray.amneziawg.regenerateObfuscation')}
         </Button>
       </Form.Item>

frontend/src/pages/inbounds/form/protocols/hysteria.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Select, Switch } from 'antd';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -9,6 +10,7 @@ const MASQ_PATH = ['streamSettings', 'hysteriaSettings', 'masquerade'];
 
 export default function HysteriaFields() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const masq = useWatch({ control, name: 'streamSettings.hysteriaSettings.masquerade' }) as
     | { type?: string }
@@ -32,8 +34,9 @@ export default function HysteriaFields() {
         <InputNumber min={2} max={600} style={{ width: '100%' }} />
       </FormField>
 
-      <Form.Item label={t('pages.inbounds.form.masquerade')}>
+      <Form.Item htmlFor={`${uid}-masquerade`} label={t('pages.inbounds.form.masquerade')}>
         <Switch
+          id={`${uid}-masquerade`}
           checked={!!masq}
           onChange={(checked) =>
             setValue(

frontend/src/pages/inbounds/form/protocols/shadowsocks.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input, Select, Space, Switch } from 'antd';
 import { ReloadOutlined } from '@ant-design/icons';
@@ -13,6 +14,7 @@ interface ShadowsocksFieldsProps {
 
 export default function ShadowsocksFields({ isSSWith2022 }: ShadowsocksFieldsProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { getValues, setValue } = useFormContext();
   return (
     <>
@@ -26,14 +28,14 @@ export default function ShadowsocksFields({ isSSWith2022 }: ShadowsocksFieldsPro
         <Select options={SSInboundMethodSchema.options.map((m) => ({ value: m, label: m }))} />
       </FormField>
       {isSSWith2022 && (
-        <Form.Item label={t('password')}>
+        <Form.Item htmlFor={`${uid}-password`} label={t('password')}>
           <Space.Compact block>
             <FormField name={['settings', 'password']} noStyle>
-              <Input style={{ width: 'calc(100% - 32px)' }} />
+              <Input id={`${uid}-password`} style={{ width: 'calc(100% - 32px)' }} />
             </FormField>
             <Button
               aria-label={t('regenerate')}
-              icon={<ReloadOutlined />}
+              icon={<ReloadOutlined aria-hidden />}
               onClick={() => {
                 const method = getValues('settings.method');
                 setValue(

frontend/src/pages/inbounds/form/protocols/tuic.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   AutoComplete,
@@ -21,6 +21,7 @@ import { HttpUtil } from '@/utils';
 
 export default function TuicFields() {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const { control, setValue } = useFormContext();
   const [loadingPanelCert, setLoadingPanelCert] = useState(false);
@@ -147,8 +148,9 @@ export default function TuicFields() {
   return (
     <>
       {messageContextHolder}
-      <Form.Item label={t('pages.inbounds.publicKey')}>
+      <Form.Item htmlFor={`${uid}-certificate`} label={t('pages.inbounds.publicKey')}>
         <AutoComplete
+          id={`${uid}-certificate`}
           value={certificate}
           options={certOptions}
           onChange={(v) => setValue('settings.server.certificate', v)}
@@ -156,8 +158,9 @@ export default function TuicFields() {
         />
       </Form.Item>
 
-      <Form.Item label={t('pages.inbounds.privatekey')}>
+      <Form.Item htmlFor={`${uid}-privateKey`} label={t('pages.inbounds.privatekey')}>
         <AutoComplete
+          id={`${uid}-privateKey`}
           value={privateKey}
           options={keyOptions}
           onChange={(v) => setValue('settings.server.private_key', v)}
@@ -169,13 +172,13 @@ export default function TuicFields() {
         <Space wrap style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
           <Button
             type="primary"
-            icon={<CloudDownloadOutlined />}
+            icon={<CloudDownloadOutlined aria-hidden />}
             loading={loadingPanelCert}
             onClick={setCertFromPanel}
           >
             {t('pages.inbounds.setDefaultCert')}
           </Button>
-          <Button icon={<SyncOutlined />} onClick={autofillFromSni}>
+          <Button icon={<SyncOutlined aria-hidden />} onClick={autofillFromSni}>
             {t('pages.inbounds.form.autoFill')}
           </Button>
           <Button
@@ -217,12 +220,21 @@ export default function TuicFields() {
 
       <Divider titlePlacement="start">{t('pages.xray.tuic.profileOptions')}</Divider>
 
-      <Form.Item label={t('pages.xray.tuic.sni')} tooltip={t('pages.xray.tuic.sniHint')}>
+      <Form.Item
+        htmlFor={`${uid}-sni`}
+        label={t('pages.xray.tuic.sni')}
+        tooltip={t('pages.xray.tuic.sniHint')}
+      >
         <Input
+          id={`${uid}-sni`}
+          aria-describedby={`${uid}-sni-hint`}
           value={sni}
           placeholder="example.com"
           onChange={(e) => handleSniChange(e.target.value)}
         />
+        <span id={`${uid}-sni-hint`} hidden>
+          {t('pages.xray.tuic.sniHint')}
+        </span>
       </Form.Item>
 
       <FormField

frontend/src/pages/inbounds/form/protocols/tun.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
+import { useId, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input, InputNumber, Select, Space, Switch, Tooltip } from 'antd';
+import { Button, Form, Input, InputNumber, Select, Space, Switch } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
@@ -9,28 +9,39 @@ import { FormField } from '@/components/form/rhf';
 interface StringListProps {
   name: string[];
   label: ReactNode;
+  tooltip?: string;
   placeholder: (index: number) => string;
 }
 
-function StringList({ name, label, placeholder }: StringListProps) {
+function StringList({ name, label, tooltip, placeholder }: StringListProps) {
   const { t } = useTranslation();
+  const labelId = useId();
   const { control } = useFormContext();
   const { fields, append, remove } = useFieldArray({ control, name: name.join('.') });
   return (
-    <Form.Item label={label}>
+    <Form.Item label={<span id={labelId}>{label}</span>} tooltip={tooltip}>
       <Button aria-label={t('add')} size="small" onClick={() => append('')}>
-        <PlusOutlined />
+        <PlusOutlined aria-hidden />
       </Button>
       {fields.map((field, j) => (
         <Space.Compact key={field.id} block className="mt-4">
           <FormField name={[...name, j]} noStyle>
-            <Input placeholder={placeholder(j)} />
+            <Input
+              aria-labelledby={labelId}
+              aria-describedby={tooltip ? `${labelId}-hint` : undefined}
+              placeholder={placeholder(j)}
+            />
           </FormField>
           <Button aria-label={t('remove')} size="small" onClick={() => remove(j)}>
-            <MinusOutlined />
+            <MinusOutlined aria-hidden />
           </Button>
         </Space.Compact>
       ))}
+      {tooltip && (
+        <span id={`${labelId}-hint`} hidden>
+          {tooltip}
+        </span>
+      )}
     </Form.Item>
   );
 }
@@ -73,20 +84,14 @@ export default function TunFields() {
       </FormField>
       <StringList
         name={['settings', 'autoSystemRoutingTable']}
-        label={
-          <Tooltip title={t('pages.inbounds.form.autoSystemRoutesTooltip')}>
-            {t('pages.inbounds.info.autoSystemRoutes')}
-          </Tooltip>
-        }
+        label={t('pages.inbounds.info.autoSystemRoutes')}
+        tooltip={t('pages.inbounds.form.autoSystemRoutesTooltip')}
         placeholder={(j) => (j === 0 ? '0.0.0.0/0' : '::/0')}
       />
       <FormField
         name={['settings', 'autoOutboundsInterface']}
-        label={
-          <Tooltip title={t('pages.inbounds.form.autoOutboundsInterfaceTooltip')}>
-            {t('pages.inbounds.form.autoOutboundsInterface')}
-          </Tooltip>
-        }
+        label={t('pages.inbounds.form.autoOutboundsInterface')}
+        tooltip={t('pages.inbounds.form.autoOutboundsInterfaceTooltip')}
       >
         <Input placeholder="auto" />
       </FormField>

frontend/src/pages/inbounds/form/protocols/vless.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input, InputNumber, Select, Space, Typography } from 'antd';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -26,6 +26,7 @@ export default function VlessFields({
   clearVlessEnc,
 }: VlessFieldsProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { control } = useFormContext();
   const [authKind, setAuthKind] = useState<VlessAuthKind>(vlessAuthKind ?? 'x25519');
 
@@ -47,9 +48,10 @@ export default function VlessFields({
       <FormField name={['settings', 'encryption']} label={t('pages.inbounds.encryption')}>
         <Input />
       </FormField>
-      <Form.Item label={t('pages.inbounds.vlessAuthGenerate')}>
+      <Form.Item htmlFor={`${uid}-authKind`} label={t('pages.inbounds.vlessAuthGenerate')}>
         <Space size={8} wrap>
           <Select
+            id={`${uid}-authKind`}
             value={authKind}
             onChange={(v) => setAuthKind(v)}
             options={authOptions}
@@ -80,6 +82,7 @@ export default function VlessFields({
                 defaultValue={def}
                 render={({ field }) => (
                   <InputNumber
+                    aria-label={`${t('pages.inbounds.form.visionTestseed')} ${i + 1}`}
                     min={1}
                     style={{ width: '25%' }}
                     value={field.value as number}

frontend/src/pages/inbounds/form/protocols/wireguard.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input, InputNumber, Space, Switch } from 'antd';
 import { ReloadOutlined } from '@ant-design/icons';
@@ -11,18 +12,23 @@ interface WireguardFieldsProps {
 
 export default function WireguardFields({ wgPubKey, regenInboundWg }: WireguardFieldsProps) {
   const { t } = useTranslation();
+  const uid = useId();
   return (
     <>
-      <Form.Item label={t('pages.xray.wireguard.secretKey')}>
+      <Form.Item htmlFor={`${uid}-secretKey`} label={t('pages.xray.wireguard.secretKey')}>
         <Space.Compact block>
           <FormField name={['settings', 'secretKey']} noStyle>
-            <Input style={{ width: 'calc(100% - 32px)' }} />
+            <Input id={`${uid}-secretKey`} style={{ width: 'calc(100% - 32px)' }} />
           </FormField>
-          <Button aria-label={t('regenerate')} icon={<ReloadOutlined />} onClick={regenInboundWg} />
+          <Button
+            aria-label={t('regenerate')}
+            icon={<ReloadOutlined aria-hidden />}
+            onClick={regenInboundWg}
+          />
         </Space.Compact>
       </Form.Item>
-      <Form.Item label={t('pages.xray.wireguard.publicKey')}>
-        <Input value={wgPubKey} disabled />
+      <Form.Item htmlFor={`${uid}-publicKey`} label={t('pages.xray.wireguard.publicKey')}>
+        <Input id={`${uid}-publicKey`} value={wgPubKey} disabled />
       </Form.Item>
       <FormField name={['settings', 'subnetIp']} label={t('pages.xray.wireguard.subnetIp')}>
         <Input placeholder="10.0.0.0" />

frontend/src/pages/inbounds/form/security/RealityTargetScannerModal.tsx

@@ -199,6 +199,7 @@ export default function RealityTargetScannerModal({
           {t('pages.inbounds.form.scanModalDesc')}
         </Typography.Paragraph>
         <Input.Search
+          aria-label={t('pages.inbounds.form.scanDiscoverPlaceholder')}
           allowClear
           enterButton={t('pages.inbounds.form.scan')}
           loading={loading}

frontend/src/pages/inbounds/form/security/reality.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import {
@@ -59,6 +59,7 @@ export default function RealityForm({
   clearMldsa65,
 }: RealityFormProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { getFieldState, trigger } = useFormContext();
   const [scannerOpen, setScannerOpen] = useState(false);
   const mldsa65Seed = useWatch({ name: 'streamSettings.realitySettings.mldsa65Seed' });
@@ -113,6 +114,7 @@ export default function RealityForm({
         <Select options={Object.values(UTLS_FINGERPRINT).map((fp) => ({ value: fp, label: fp }))} />
       </FormField>
       <Form.Item
+        htmlFor={`${uid}-target`}
         label={t('pages.inbounds.form.target')}
         tooltip={t('pages.inbounds.form.realityTargetHint')}
       >
@@ -127,19 +129,27 @@ export default function RealityForm({
               },
             }}
           >
-            <Input style={{ flex: 1 }} placeholder="example.com:443" />
+            <Input
+              id={`${uid}-target`}
+              aria-describedby={`${uid}-target-hint`}
+              style={{ flex: 1 }}
+              placeholder="example.com:443"
+            />
           </FormField>
           <Button
-            icon={<RadarChartOutlined />}
+            icon={<RadarChartOutlined aria-hidden />}
             loading={scanning}
             onClick={() => scanRealityTarget()}
           >
             {t('pages.inbounds.form.scan')}
           </Button>
-          <Button icon={<SearchOutlined />} onClick={() => setScannerOpen(true)}>
+          <Button icon={<SearchOutlined aria-hidden />} onClick={() => setScannerOpen(true)}>
             {t('pages.inbounds.form.findTargets')}
           </Button>
         </Space.Compact>
+        <span id={`${uid}-target-hint`} hidden>
+          {t('pages.inbounds.form.realityTargetHint')}
+        </span>
       </Form.Item>
       {scanResult && (
         <Form.Item label=" " colon={false}>
@@ -235,32 +245,45 @@ export default function RealityForm({
       >
         <Input placeholder="x.y.z" />
       </FormField>
-      <Form.Item label={t('pages.inbounds.form.shortIds')}>
+      <Form.Item htmlFor={`${uid}-shortIds`} label={t('pages.inbounds.form.shortIds')}>
         <Space.Compact block style={{ display: 'flex' }}>
           <FormField name={['streamSettings', 'realitySettings', 'shortIds']} noStyle>
-            <Select mode="tags" tokenSeparators={[',']} style={{ flex: 1 }} />
+            <Select
+              id={`${uid}-shortIds`}
+              mode="tags"
+              tokenSeparators={[',']}
+              style={{ flex: 1 }}
+            />
           </FormField>
           <Button
             aria-label={t('regenerate')}
-            icon={<ReloadOutlined />}
+            icon={<ReloadOutlined aria-hidden />}
             onClick={randomizeShortIds}
           />
         </Space.Compact>
       </Form.Item>
       <Form.Item
+        htmlFor={`${uid}-spiderX`}
         label={t('pages.inbounds.form.spiderX')}
         tooltip={t('pages.inbounds.form.spiderXHint')}
       >
         <Space.Compact block style={{ display: 'flex' }}>
           <FormField name={['streamSettings', 'realitySettings', 'settings', 'spiderX']} noStyle>
-            <Input style={{ flex: 1 }} />
+            <Input
+              id={`${uid}-spiderX`}
+              aria-describedby={`${uid}-spiderX-hint`}
+              style={{ flex: 1 }}
+            />
           </FormField>
           <Button
             aria-label={t('regenerate')}
-            icon={<ReloadOutlined />}
+            icon={<ReloadOutlined aria-hidden />}
             onClick={randomizeSpiderX}
           />
         </Space.Compact>
+        <span id={`${uid}-spiderX-hint`} hidden>
+          {t('pages.inbounds.form.spiderXHint')}
+        </span>
       </Form.Item>
       <FormField
         name={['streamSettings', 'realitySettings', 'settings', 'publicKey']}

frontend/src/pages/inbounds/form/security/tls.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input, InputNumber, Radio, Select, Space, Switch } from 'antd';
 import {
@@ -77,7 +78,7 @@ function CertRow({
       {total > 1 && (
         <Form.Item label=" ">
           <Button size="small" danger onClick={onRemove}>
-            <MinusOutlined /> {t('remove')}
+            <MinusOutlined aria-hidden /> {t('remove')}
           </Button>
         </Form.Item>
       )}
@@ -161,16 +162,20 @@ function CertRow({
 
 function EchSockoptSection() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const echSockopt = useWatch({ control, name: 'streamSettings.tlsSettings.echSockopt' });
   const on = !!echSockopt;
   return (
     <>
       <Form.Item
+        htmlFor={`${uid}-echSockopt`}
         label={t('pages.inbounds.form.echSockopt')}
         tooltip={t('pages.inbounds.form.echSockoptTip')}
       >
         <Switch
+          id={`${uid}-echSockopt`}
+          aria-describedby={`${uid}-echSockopt-hint`}
           checked={on}
           onChange={(v) =>
             setValue(
@@ -179,6 +184,9 @@ function EchSockoptSection() {
             )
           }
         />
+        <span id={`${uid}-echSockopt-hint`} hidden>
+          {t('pages.inbounds.form.echSockoptTip')}
+        </span>
       </Form.Item>
       {on && (
         <>
@@ -226,6 +234,7 @@ export default function TlsForm({
   clearEchCert,
 }: TlsFormProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { control } = useFormContext();
   const { fields, append, remove } = useFieldArray({
     control,
@@ -242,16 +251,18 @@ export default function TlsForm({
       >
         <CipherSuitesSelect placeholder={t('pages.inbounds.form.autoOption')} />
       </FormField>
-      <Form.Item label={t('pages.inbounds.form.minMaxVersion')}>
+      <Form.Item htmlFor={`${uid}-minVersion`} label={t('pages.inbounds.form.minMaxVersion')}>
         <Space.Compact block>
           <FormField name={['streamSettings', 'tlsSettings', 'minVersion']} noStyle>
             <Select
+              id={`${uid}-minVersion`}
               style={{ width: '50%' }}
               options={Object.values(TLS_VERSION_OPTION).map((v) => ({ value: v, label: v }))}
             />
           </FormField>
           <FormField name={['streamSettings', 'tlsSettings', 'maxVersion']} noStyle>
             <Select
+              aria-label={t('pages.inbounds.form.maxVersion')}
               style={{ width: '50%' }}
               options={Object.values(TLS_VERSION_OPTION).map((v) => ({ value: v, label: v }))}
             />
@@ -330,7 +341,7 @@ export default function TlsForm({
             })
           }
         >
-          <PlusOutlined />
+          <PlusOutlined aria-hidden />
         </Button>
       </Form.Item>
       {fields.map((field, idx) => (
@@ -375,6 +386,7 @@ export default function TlsForm({
         </Space>
       </Form.Item>
       <Form.Item
+        htmlFor={`${uid}-pinnedPeerCertSha256`}
         label={t('pages.inbounds.form.pinnedPeerCertSha256')}
         tooltip={t('pages.inbounds.form.pinnedPeerCertSha256Tip')}
       >
@@ -384,6 +396,8 @@ export default function TlsForm({
             noStyle
           >
             <Select
+              id={`${uid}-pinnedPeerCertSha256`}
+              aria-describedby={`${uid}-pinnedPeerCertSha256-hint`}
               mode="tags"
               tokenSeparators={[',', ' ']}
               placeholder={t('pages.inbounds.form.pinnedPeerCertSha256Placeholder')}
@@ -391,18 +405,23 @@ export default function TlsForm({
             />
           </FormField>
           <Button
-            icon={<FileProtectOutlined />}
+            icon={<FileProtectOutlined aria-hidden />}
             onClick={pinFromCert}
             loading={saving}
+            aria-label={t('pages.inbounds.form.pinFromCert')}
             title={t('pages.inbounds.form.pinFromCert')}
           />
           <Button
-            icon={<CloudDownloadOutlined />}
+            icon={<CloudDownloadOutlined aria-hidden />}
             onClick={() => pinFromRemote()}
             loading={saving}
+            aria-label={t('pages.inbounds.form.pinFromRemote')}
             title={t('pages.inbounds.form.pinFromRemote')}
           />
         </Space.Compact>
+        <span id={`${uid}-pinnedPeerCertSha256-hint`} hidden>
+          {t('pages.inbounds.form.pinnedPeerCertSha256Tip')}
+        </span>
       </Form.Item>
       <FormField
         name={['streamSettings', 'tlsSettings', 'settings', 'verifyPeerCertByName']}

frontend/src/pages/inbounds/form/transport/raw.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, Switch } from 'antd';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -7,6 +8,7 @@ import { FormField } from '@/components/form/rhf';
 
 export default function RawForm() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const headerType = (useWatch({
     control,
@@ -21,8 +23,9 @@ export default function RawForm() {
       >
         <Switch />
       </FormField>
-      <Form.Item label={`HTTP ${t('camouflage')}`}>
+      <Form.Item htmlFor={`${uid}-httpCamouflage`} label={`HTTP ${t('camouflage')}`}>
         <Switch
+          id={`${uid}-httpCamouflage`}
           checked={headerType === 'http'}
           onChange={(v) => {
             setValue(

frontend/src/pages/inbounds/form/transport/sockopt.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Form, InputNumber, Segmented, Select, Switch } from 'antd';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
@@ -28,6 +29,7 @@ export default function SockoptForm({
   network: string;
 }) {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, getValues, setValue } = useFormContext();
   const sock = useWatch({ control, name: 'streamSettings.sockopt' });
   const on = !!sock && typeof sock === 'object' && Object.keys(sock).length > 0;
@@ -101,6 +103,8 @@ export default function SockoptForm({
             tooltip={t('pages.inbounds.form.realClientIpHint')}
           >
             <Segmented
+              aria-label={t('pages.inbounds.form.realClientIp')}
+              aria-describedby={`${uid}-real-client-ip-hint`}
               value={presetValue}
               onChange={(v) => applyRealClientIpPreset(v as RealClientIpPreset)}
               options={[
@@ -112,6 +116,9 @@ export default function SockoptForm({
                 { value: 'proxy', label: t('pages.inbounds.form.realClientIpPresetProxyProtocol') },
               ]}
             />
+            <span id={`${uid}-real-client-ip-hint`} hidden>
+              {t('pages.inbounds.form.realClientIpHint')}
+            </span>
           </Form.Item>
           {trustedMismatch && (
             <Alert

frontend/src/pages/inbounds/info/InboundInfoModal.tsx

@@ -533,7 +533,7 @@ export default function InboundInfoModal({
             <Tooltip title={t('copy')}>
               <Button
                 size="small"
-                icon={<CopyOutlined />}
+                icon={<CopyOutlined aria-hidden />}
                 aria-label={t('copy')}
                 onClick={() => copyText(clientSettings.tgId, t)}
               />
@@ -552,7 +552,7 @@ export default function InboundInfoModal({
                 <Tooltip title={t('copy')}>
                   <Button
                     size="small"
-                    icon={<CopyOutlined />}
+                    icon={<CopyOutlined aria-hidden />}
                     aria-label={t('copy')}
                     onClick={() => copyText(link.link, t)}
                   />
@@ -573,7 +573,7 @@ export default function InboundInfoModal({
               <Tooltip title={t('copy')}>
                 <Button
                   size="small"
-                  icon={<CopyOutlined />}
+                  icon={<CopyOutlined aria-hidden />}
                   aria-label={t('copy')}
                   onClick={() => copyText(subLink, t)}
                 />
@@ -595,7 +595,7 @@ export default function InboundInfoModal({
                 <Tooltip title={t('copy')}>
                   <Button
                     size="small"
-                    icon={<CopyOutlined />}
+                    icon={<CopyOutlined aria-hidden />}
                     aria-label={t('copy')}
                     onClick={() => copyText(subJsonLink, t)}
                   />
@@ -714,7 +714,7 @@ export default function InboundInfoModal({
                     <Button
                       size="small"
                       className="value-copy"
-                      icon={<CopyOutlined />}
+                      icon={<CopyOutlined aria-hidden />}
                       aria-label={t('copy')}
                       onClick={() => copyText(encryptionLabel, t)}
                     />
@@ -984,7 +984,7 @@ export default function InboundInfoModal({
                         <Button
                           size="small"
                           type="text"
-                          icon={<CopyOutlined />}
+                          icon={<CopyOutlined aria-hidden />}
                           aria-label={t('copy')}
                           onClick={() => copyText(`${account.user}:${account.pass}`, t)}
                         />
@@ -1100,7 +1100,7 @@ export default function InboundInfoModal({
                     <Tooltip title={t('copy')}>
                       <Button
                         size="small"
-                        icon={<CopyOutlined />}
+                        icon={<CopyOutlined aria-hidden />}
                         aria-label={t('copy')}
                         onClick={() => copyText(`${account.user}:${account.pass}`, t)}
                       />
@@ -1201,7 +1201,7 @@ export default function InboundInfoModal({
                           <Tooltip title={t('copy')}>
                             <Button
                               size="small"
-                              icon={<CopyOutlined />}
+                              icon={<CopyOutlined aria-hidden />}
                               aria-label={t('copy')}
                               onClick={() => copyText(cfg, t)}
                             />
@@ -1209,7 +1209,7 @@ export default function InboundInfoModal({
                           <Tooltip title={t('download')}>
                             <Button
                               size="small"
-                              icon={<DownloadOutlined />}
+                              icon={<DownloadOutlined aria-hidden />}
                               aria-label={t('download')}
                               onClick={() =>
                                 downloadText(cfg, peerConfFileName(idx, j, all.length))
@@ -1230,7 +1230,7 @@ export default function InboundInfoModal({
                           <Tooltip title={t('copy')}>
                             <Button
                               size="small"
-                              icon={<CopyOutlined />}
+                              icon={<CopyOutlined aria-hidden />}
                               aria-label={t('copy')}
                               onClick={() => copyText(link, t)}
                             />
@@ -1261,7 +1261,7 @@ export default function InboundInfoModal({
                         <Tooltip title={t('copy')}>
                           <Button
                             size="small"
-                            icon={<CopyOutlined />}
+                            icon={<CopyOutlined aria-hidden />}
                             aria-label={t('copy')}
                             onClick={() => copyText(cfg, t)}
                           />
@@ -1269,7 +1269,7 @@ export default function InboundInfoModal({
                         <Tooltip title={t('download')}>
                           <Button
                             size="small"
-                            icon={<DownloadOutlined />}
+                            icon={<DownloadOutlined aria-hidden />}
                             aria-label={t('download')}
                             onClick={() => downloadText(cfg, peerConfFileName(idx, j, all.length))}
                           />
@@ -1288,7 +1288,7 @@ export default function InboundInfoModal({
                         <Tooltip title={t('copy')}>
                           <Button
                             size="small"
-                            icon={<CopyOutlined />}
+                            icon={<CopyOutlined aria-hidden />}
                             aria-label={t('copy')}
                             onClick={() => copyText(link, t)}
                           />

frontend/src/pages/inbounds/list/InboundList.tsx

@@ -193,20 +193,24 @@ export default function InboundList({
 
   const generalActionsMenu: MenuProps = {
     items: [
-      { key: 'import', icon: <ImportOutlined />, label: t('pages.inbounds.importInbound') },
-      { key: 'export', icon: <ExportOutlined />, label: t('pages.inbounds.export') },
+      {
+        key: 'import',
+        icon: <ImportOutlined aria-hidden />,
+        label: t('pages.inbounds.importInbound'),
+      },
+      { key: 'export', icon: <ExportOutlined aria-hidden />, label: t('pages.inbounds.export') },
       ...(subEnable
         ? [
             {
               key: 'subs',
-              icon: <ExportOutlined />,
+              icon: <ExportOutlined aria-hidden />,
               label: `${t('pages.inbounds.export')} — ${t('pages.settings.subSettings')}`,
             },
           ]
         : []),
       {
         key: 'resetInbounds',
-        icon: <ReloadOutlined />,
+        icon: <ReloadOutlined aria-hidden />,
         label: t('pages.inbounds.resetAllTraffic'),
       },
     ],
@@ -221,7 +225,7 @@ export default function InboundList({
           <Button
             type="primary"
             onClick={onAddInbound}
-            icon={<PlusOutlined />}
+            icon={<PlusOutlined aria-hidden />}
             aria-label={t('pages.inbounds.addInbound')}
           >
             {!isMobile && t('pages.inbounds.addInbound')}
@@ -229,7 +233,7 @@ export default function InboundList({
           <Dropdown trigger={['click']} menu={generalActionsMenu}>
             <Button
               type="primary"
-              icon={<MenuOutlined />}
+              icon={<MenuOutlined aria-hidden />}
               aria-label={t('pages.inbounds.generalActions')}
             >
               {!isMobile && t('pages.inbounds.generalActions')}
@@ -251,7 +255,7 @@ export default function InboundList({
             onChange={(e) => setSearchKey(e.target.value)}
             placeholder={t('search')}
             allowClear
-            prefix={<SearchOutlined />}
+            prefix={<SearchOutlined aria-hidden />}
             style={{ maxWidth: isMobile ? 110 : 200 }}
             aria-label={t('search')}
           />
@@ -267,7 +271,7 @@ export default function InboundList({
               </Tag>
               <Button
                 danger
-                icon={<DeleteOutlined />}
+                icon={<DeleteOutlined aria-hidden />}
                 onClick={handleBulkDelete}
                 aria-label={t('delete')}
               >
@@ -283,7 +287,7 @@ export default function InboundList({
           <div className="inbound-cards">
             {visibleInbounds.length === 0 ? (
               <div className="card-empty">
-                <ImportOutlined style={{ fontSize: 28, opacity: 0.5 }} />
+                <ImportOutlined aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
                 <div>{t('noData')}</div>
               </div>
             ) : (
@@ -327,6 +331,7 @@ export default function InboundList({
                           />
                         </Tooltip>
                         <Switch
+                          aria-label={t('pages.inbounds.enable')}
                           checked={record.enable}
                           size="small"
                           onChange={(next) => onSwitchEnable(record, next)}
@@ -350,7 +355,7 @@ export default function InboundList({
                             type="text"
                             size="small"
                             className="row-action-trigger"
-                            icon={<MoreOutlined />}
+                            icon={<MoreOutlined aria-hidden />}
                             aria-label={t('more')}
                           />
                         </Dropdown>
@@ -377,7 +382,7 @@ export default function InboundList({
             locale={{
               emptyText: (
                 <div className="card-empty">
-                  <ImportOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+                  <ImportOutlined aria-hidden style={{ fontSize: 32, marginBottom: 8 }} />
                   <div>{t('noData')}</div>
                 </div>
               ),

frontend/src/pages/inbounds/list/RowActions.tsx

@@ -40,69 +40,82 @@ export function buildRowActionsMenu({
 }): MenuProps['items'] {
   const items: MenuProps['items'] = [];
   if (isMobile) {
-    items.push({ key: 'edit', icon: <EditOutlined />, label: t('edit') });
+    items.push({ key: 'edit', icon: <EditOutlined aria-hidden />, label: t('edit') });
   }
   if (isInboundMultiUser(record)) {
-    items.push({ key: 'export', icon: <ExportOutlined />, label: t('pages.inbounds.export') });
+    items.push({
+      key: 'export',
+      icon: <ExportOutlined aria-hidden />,
+      label: t('pages.inbounds.export'),
+    });
     if (subEnable) {
       items.push({
         key: 'subs',
-        icon: <ExportOutlined />,
+        icon: <ExportOutlined aria-hidden />,
         label: `${t('pages.inbounds.export')} — ${t('pages.settings.subSettings')}`,
       });
     }
   } else {
     items.push({
       key: 'showInfo',
-      icon: <InfoCircleOutlined />,
+      icon: <InfoCircleOutlined aria-hidden />,
       label: t('pages.inbounds.inboundInfo'),
     });
   }
   items.push({
     key: 'clipboard',
-    icon: <CopyOutlined />,
+    icon: <CopyOutlined aria-hidden />,
     label: t('pages.inbounds.exportInbound'),
   });
   items.push({
     key: 'resetTraffic',
-    icon: <RetweetOutlined />,
+    icon: <RetweetOutlined aria-hidden />,
     label: t('pages.inbounds.resetTraffic'),
   });
-  items.push({ key: 'clone', icon: <BlockOutlined />, label: t('pages.inbounds.clone') });
+  items.push({
+    key: 'clone',
+    icon: <BlockOutlined aria-hidden />,
+    label: t('pages.inbounds.clone'),
+  });
   if (isInboundMultiUser(record)) {
     items.push({
       key: 'attachExisting',
-      icon: <UsergroupAddOutlined />,
+      icon: <UsergroupAddOutlined aria-hidden />,
       label: t('pages.inbounds.attachExistingClients'),
     });
   }
   if (isInboundMultiUser(record) && hasClients) {
     items.push({
       key: 'attachClients',
-      icon: <UsergroupAddOutlined />,
+      icon: <UsergroupAddOutlined aria-hidden />,
       label: t('pages.inbounds.attachClients'),
     });
     items.push({
       key: 'detachClients',
-      icon: <UsergroupDeleteOutlined />,
+      icon: <UsergroupDeleteOutlined aria-hidden />,
       label: t('pages.inbounds.detachClients'),
     });
     items.push({
       key: 'addToGroup',
-      icon: <TagsOutlined />,
+      icon: <TagsOutlined aria-hidden />,
       label: t('pages.inbounds.addClientsToGroup'),
     });
     items.push({ type: 'divider' });
     items.push({
       key: 'delAllClients',
-      icon: <UsergroupDeleteOutlined />,
+      icon: <UsergroupDeleteOutlined aria-hidden />,
       danger: true,
       label: t('pages.inbounds.delAllClients'),
     });
   } else {
     items.push({ type: 'divider' });
   }
-  items.push({ key: 'delete', icon: <DeleteOutlined />, danger: true, label: t('delete') });
+  items.push({
+    key: 'delete',
+    icon: <DeleteOutlined aria-hidden />,
+    danger: true,
+    label: t('delete'),
+  });
   return items;
 }
 
@@ -114,7 +127,7 @@ export function RowActionsCell({ record, subEnable, hasClients, onClick }: RowAc
         type="text"
         size="small"
         style={{ fontSize: 16 }}
-        icon={<EditOutlined />}
+        icon={<EditOutlined aria-hidden />}
         aria-label={t('edit')}
         onClick={() => onClick('edit')}
       />
@@ -129,7 +142,7 @@ export function RowActionsCell({ record, subEnable, hasClients, onClick }: RowAc
           type="text"
           size="small"
           style={{ fontSize: 16 }}
-          icon={<MoreOutlined />}
+          icon={<MoreOutlined aria-hidden />}
           aria-label={t('more')}
         />
       </Dropdown>

frontend/src/pages/inbounds/list/useInboundColumns.tsx

@@ -130,7 +130,11 @@ export function useInboundColumns({
         align: 'center',
         width: 80,
         render: (_, record) => (
-          <Switch checked={record.enable} onChange={(next) => onSwitchEnable(record, next)} />
+          <Switch
+            aria-label={t('pages.inbounds.enable')}
+            checked={record.enable}
+            onChange={(next) => onSwitchEnable(record, next)}
+          />
         ),
       },
     ];
@@ -293,7 +297,7 @@ export function useInboundColumns({
                 className="client-count-tag"
                 style={{ margin: 0, marginRight: 4, padding: '0 2px' }}
               >
-                <TeamOutlined /> {cc.clients}
+                <TeamOutlined aria-hidden /> {cc.clients}
               </Tag>
               {cc.active.length > 0 ? (
                 <Popover

frontend/src/pages/inbounds/qr/QrPanel.tsx

@@ -102,13 +102,18 @@ export default function QrPanel({
           {remark}
         </Tag>
         <Tooltip title={t('copy')}>
-          <Button size="small" icon={<CopyOutlined />} aria-label={t('copy')} onClick={copy} />
+          <Button
+            size="small"
+            icon={<CopyOutlined aria-hidden />}
+            aria-label={t('copy')}
+            onClick={copy}
+          />
         </Tooltip>
         {showQr && (
           <Tooltip title={t('downloadImage')}>
             <Button
               size="small"
-              icon={<PictureOutlined />}
+              icon={<PictureOutlined aria-hidden />}
               aria-label={t('downloadImage')}
               onClick={downloadImage}
             />
@@ -118,7 +123,7 @@ export default function QrPanel({
           <Tooltip title={t('download')}>
             <Button
               size="small"
-              icon={<DownloadOutlined />}
+              icon={<DownloadOutlined aria-hidden />}
               aria-label={t('download')}
               onClick={download}
             />

frontend/src/pages/index/AmneziaWGLogModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Checkbox, Empty, Form, Input, Modal, Select, Tag } from 'antd';
 import { DownloadOutlined, SyncOutlined } from '@ant-design/icons';
@@ -30,6 +30,7 @@ function shortTime(value?: number): string {
 
 export default function AmneziaWGLogModal({ open, onClose }: AmneziaWGLogModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { datepicker } = useDatepicker();
   const { isMobile } = useMediaQuery();
   const [rows, setRows] = useState('50');
@@ -120,6 +121,7 @@ export default function AmneziaWGLogModal({ open, onClose }: AmneziaWGLogModalPr
       <Form layout="inline" className="log-toolbar">
         <Form.Item>
           <Select
+            aria-label={t('pages.index.logLines')}
             value={rows}
             size="small"
             style={{ width: 100 }}
@@ -132,8 +134,9 @@ export default function AmneziaWGLogModal({ open, onClose }: AmneziaWGLogModalPr
             ]}
           />
         </Form.Item>
-        <Form.Item label={t('filter')} className="filter-item">
+        <Form.Item htmlFor={`${uid}-filter`} label={t('filter')} className="filter-item">
           <Input
+            id={`${uid}-filter`}
             value={filter}
             size="small"
             onChange={(e) => setFilter(e.target.value)}
@@ -151,7 +154,7 @@ export default function AmneziaWGLogModal({ open, onClose }: AmneziaWGLogModalPr
           <Button
             type="primary"
             onClick={download}
-            icon={<DownloadOutlined />}
+            icon={<DownloadOutlined aria-hidden />}
             aria-label={t('download')}
           />
         </Form.Item>

frontend/src/pages/index/BackupModal.tsx

@@ -88,7 +88,7 @@ export default function BackupModal({
             type="primary"
             aria-label={t('pages.index.exportDatabase')}
             onClick={exportDb}
-            icon={<DownloadOutlined />}
+            icon={<DownloadOutlined aria-hidden />}
           />
         </div>
 
@@ -102,7 +102,7 @@ export default function BackupModal({
               type="primary"
               aria-label={t('pages.index.migrationDownload')}
               onClick={exportMigration}
-              icon={<DownloadOutlined />}
+              icon={<DownloadOutlined aria-hidden />}
             />
           </div>
         )}
@@ -120,7 +120,7 @@ export default function BackupModal({
             type="primary"
             aria-label={t('pages.index.importDatabase')}
             onClick={importDb}
-            icon={<UploadOutlined />}
+            icon={<UploadOutlined aria-hidden />}
           />
         </div>
 

frontend/src/pages/index/GeodataSection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Button, Form, Input, Modal, Select, Space, Spin, Typography, message } from 'antd';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -33,6 +33,7 @@ function fileNameFromUrl(url: string): string {
 
 export default function GeodataSection({ active, onBusy, onClose }: GeodataSectionProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [modal, modalContextHolder] = Modal.useModal();
   const [messageApi, messageContextHolder] = message.useMessage();
   const [loading, setLoading] = useState(false);
@@ -180,15 +181,25 @@ export default function GeodataSection({ active, onBusy, onClose }: GeodataSecti
       <Spin spinning={loading}>
         <Alert type="info" className="mb-12" title={t('pages.index.geodataHint')} showIcon />
         <Form layout="vertical">
-          <Form.Item label={t('pages.index.geodataCron')} style={{ marginBottom: 8 }}>
+          <Form.Item
+            htmlFor={`${uid}-cron`}
+            label={t('pages.index.geodataCron')}
+            style={{ marginBottom: 8 }}
+          >
             <Input
+              id={`${uid}-cron`}
               value={cron}
               placeholder={DEFAULT_CRON}
               onChange={(e) => setCron(e.target.value)}
             />
           </Form.Item>
-          <Form.Item label={t('pages.index.geodataOutbound')} style={{ marginBottom: 8 }}>
+          <Form.Item
+            htmlFor={`${uid}-outbound`}
+            label={t('pages.index.geodataOutbound')}
+            style={{ marginBottom: 8 }}
+          >
             <Select
+              id={`${uid}-outbound`}
               style={{ width: '100%' }}
               allowClear
               value={outbound}
@@ -204,6 +215,7 @@ export default function GeodataSection({ active, onBusy, onClose }: GeodataSecti
           {rows.map((row, i) => (
             <Space.Compact key={i} style={{ width: '100%' }}>
               <Input
+                aria-label={`URL ${i + 1}`}
                 style={{ width: '60%' }}
                 placeholder="https://example.com/geosite_custom.dat"
                 value={row.url}
@@ -211,6 +223,7 @@ export default function GeodataSection({ active, onBusy, onClose }: GeodataSecti
                 onBlur={() => onUrlBlur(i)}
               />
               <Input
+                aria-label={`${t('pages.index.geodataFile')} ${i + 1}`}
                 style={{ width: '40%' }}
                 placeholder={t('pages.index.geodataFile')}
                 value={row.file}
@@ -218,14 +231,14 @@ export default function GeodataSection({ active, onBusy, onClose }: GeodataSecti
               />
               <Button
                 aria-label={t('delete')}
-                icon={<DeleteOutlined />}
+                icon={<DeleteOutlined aria-hidden />}
                 onClick={() => setRows((p) => p.filter((_, j) => j !== i))}
               />
             </Space.Compact>
           ))}
           <div className="actions-row">
             <Button
-              icon={<PlusOutlined />}
+              icon={<PlusOutlined aria-hidden />}
               onClick={() => setRows((p) => [...p, { url: '', file: '' }])}
             >
               {t('pages.index.geodataAddFile')}

frontend/src/pages/index/IndexPage.tsx

@@ -227,7 +227,7 @@ export default function IndexPage() {
 
                   <div className="ov-vitals">
                     <VitalTile
-                      icon={<DashboardOutlined />}
+                      icon={<DashboardOutlined aria-hidden />}
                       label={t('pages.index.cpu')}
                       percent={status.cpu.percent}
                       statusColor={status.cpu.color}
@@ -238,7 +238,7 @@ export default function IndexPage() {
                       isMobile={isMobile}
                     />
                     <VitalTile
-                      icon={<DatabaseOutlined />}
+                      icon={<DatabaseOutlined aria-hidden />}
                       label={t('pages.index.memory')}
                       percent={status.mem.percent}
                       statusColor={status.mem.color}
@@ -249,7 +249,7 @@ export default function IndexPage() {
                       isMobile={isMobile}
                     />
                     <VitalTile
-                      icon={<SwapOutlined />}
+                      icon={<SwapOutlined aria-hidden />}
                       label={t('pages.index.swap')}
                       percent={status.swap.percent}
                       statusColor={status.swap.color}
@@ -260,7 +260,7 @@ export default function IndexPage() {
                       isMobile={isMobile}
                     />
                     <VitalTile
-                      icon={<HddOutlined />}
+                      icon={<HddOutlined aria-hidden />}
                       label={t('pages.index.storage')}
                       percent={status.disk.percent}
                       statusColor={status.disk.color}
@@ -358,7 +358,7 @@ export default function IndexPage() {
                 key="download"
                 onClick={downloadConfig}
                 size={isMobile ? 'small' : 'middle'}
-                icon={<CloudDownloadOutlined />}
+                icon={<CloudDownloadOutlined aria-hidden />}
               >
                 {isMobile ? 'Download' : 'config.json'}
               </Button>,
@@ -367,7 +367,7 @@ export default function IndexPage() {
                 type="primary"
                 onClick={copyConfig}
                 size={isMobile ? 'small' : 'middle'}
-                icon={<CopyOutlined />}
+                icon={<CopyOutlined aria-hidden />}
               >
                 Copy
               </Button>,

frontend/src/pages/index/LogModal.tsx

@@ -105,6 +105,7 @@ export default function LogModal({ open, onClose }: LogModalProps) {
         <Form.Item>
           <Space.Compact>
             <Select
+              aria-label={t('pages.index.logLines')}
               value={rows}
               size="small"
               style={{ width: 100 }}
@@ -118,6 +119,7 @@ export default function LogModal({ open, onClose }: LogModalProps) {
               ]}
             />
             <Select
+              aria-label={t('pages.xray.logLevel')}
               value={level}
               size="small"
               style={{ minWidth: 95 }}
@@ -144,7 +146,7 @@ export default function LogModal({ open, onClose }: LogModalProps) {
           <Button
             type="primary"
             onClick={download}
-            icon={<DownloadOutlined />}
+            icon={<DownloadOutlined aria-hidden />}
             aria-label={t('download')}
           />
         </Form.Item>

frontend/src/pages/index/OverviewActionBar.tsx

@@ -16,6 +16,7 @@ import {
 } from '@ant-design/icons';
 
 import { formatPanelVersion } from '@/lib/panel-version';
+import { activateOnKey } from '@/utils/a11y';
 import type { Status } from '@/models/status';
 
 interface OverviewActionBarProps {
@@ -80,25 +81,30 @@ export default function OverviewActionBar({
     [
       {
         key: 'restart',
-        icon: <ReloadOutlined />,
+        icon: <ReloadOutlined aria-hidden />,
         text: t('pages.index.restartXray'),
         onClick: onRestartXray,
         primary: true,
       },
       {
         key: 'stop',
-        icon: <PoweroffOutlined />,
+        icon: <PoweroffOutlined aria-hidden />,
         text: t('pages.index.stopXray'),
         onClick: onStopXray,
       },
     ],
     [
-      { key: 'logs', icon: <BarsOutlined />, text: t('pages.index.logs'), onClick: onOpenLogs },
+      {
+        key: 'logs',
+        icon: <BarsOutlined aria-hidden />,
+        text: t('pages.index.logs'),
+        onClick: onOpenLogs,
+      },
       ...(accessLogEnable
         ? [
             {
               key: 'accessLogs',
-              icon: <FileTextOutlined />,
+              icon: <FileTextOutlined aria-hidden />,
               text: t('pages.index.accessLogs'),
               onClick: onOpenXrayLogs,
             },
@@ -108,7 +114,7 @@ export default function OverviewActionBar({
         ? [
             {
               key: 'amneziawgLogs',
-              icon: <ApiOutlined />,
+              icon: <ApiOutlined aria-hidden />,
               text: t('pages.index.amneziawgLogs'),
               onClick: onOpenAmneziaWGLogs,
             },
@@ -116,13 +122,13 @@ export default function OverviewActionBar({
         : []),
       {
         key: 'config',
-        icon: <ControlOutlined />,
+        icon: <ControlOutlined aria-hidden />,
         text: t('pages.index.config'),
         onClick: onOpenConfig,
       },
       {
         key: 'backup',
-        icon: <CloudServerOutlined />,
+        icon: <CloudServerOutlined aria-hidden />,
         text: t('pages.index.backupTitle'),
         onClick: onOpenBackup,
       },
@@ -130,13 +136,13 @@ export default function OverviewActionBar({
     [
       {
         key: 'history',
-        icon: <AreaChartOutlined />,
+        icon: <AreaChartOutlined aria-hidden />,
         text: t('pages.index.systemHistoryTitle'),
         onClick: onOpenSystemHistory,
       },
       {
         key: 'metrics',
-        icon: <ArrowUpOutlined />,
+        icon: <ArrowUpOutlined aria-hidden />,
         text: t('pages.index.xrayMetricsTitle'),
         onClick: onOpenXrayMetrics,
       },
@@ -177,8 +183,11 @@ export default function OverviewActionBar({
         <Tag
           className="ov-update-tag"
           color="warning"
-          icon={<CloudDownloadOutlined />}
+          icon={<CloudDownloadOutlined aria-hidden />}
+          role="button"
+          tabIndex={0}
           onClick={onOpenPanelUpdate}
+          onKeyDown={activateOnKey(onOpenPanelUpdate)}
         >
           {`${t('update')} ${formatPanelVersion(latestVersion)}`}
         </Tag>

frontend/src/pages/index/PanelUpdateModal.tsx

@@ -144,7 +144,12 @@ export default function PanelUpdateModal({
         <div className="version-list">
           <div className="version-list-item">
             <span>{t('pages.index.devChannel')}</span>
-            <Switch checked={!!devChannelEnable} loading={channelBusy} onChange={handleChannel} />
+            <Switch
+              aria-label={t('pages.index.devChannel')}
+              checked={!!devChannelEnable}
+              loading={channelBusy}
+              onChange={handleChannel}
+            />
           </div>
         </div>
 
@@ -190,7 +195,7 @@ export default function PanelUpdateModal({
             type="primary"
             disabled={!info.updateAvailable}
             onClick={updatePanel}
-            icon={<CloudDownloadOutlined />}
+            icon={<CloudDownloadOutlined aria-hidden />}
           >
             {t('pages.index.updatePanel')}
           </Button>

frontend/src/pages/index/SystemHistoryModal.tsx

@@ -50,7 +50,7 @@ const METRICS: MetricDef[] = [
     tab: 'CPU',
     tabKey: 'pages.index.cpu',
     title: 'pages.index.historyTitleCpu',
-    icon: <DashboardOutlined />,
+    icon: <DashboardOutlined aria-hidden />,
     valueMax: 100,
     unit: '%',
     stroke: '',
@@ -60,7 +60,7 @@ const METRICS: MetricDef[] = [
     tab: 'RAM',
     tabKey: 'pages.index.memory',
     title: 'pages.index.historyTitleMem',
-    icon: <DatabaseOutlined />,
+    icon: <DatabaseOutlined aria-hidden />,
     valueMax: 100,
     unit: '%',
     stroke: '#7c4dff',
@@ -74,7 +74,7 @@ const METRICS: MetricDef[] = [
     tab: 'Bandwidth',
     tabKey: 'pages.index.historyTabBandwidth',
     title: 'pages.index.historyTitleNetwork',
-    icon: <GlobalOutlined />,
+    icon: <GlobalOutlined aria-hidden />,
     valueMax: null,
     unit: 'B/s',
     stroke: '#1890ff',
@@ -88,7 +88,7 @@ const METRICS: MetricDef[] = [
     tab: 'Packets',
     tabKey: 'pages.index.historyTabPackets',
     title: 'pages.index.historyTitlePackets',
-    icon: <DeploymentUnitOutlined />,
+    icon: <DeploymentUnitOutlined aria-hidden />,
     valueMax: null,
     unit: 'pkt/s',
     stroke: '#2f54eb',
@@ -102,7 +102,7 @@ const METRICS: MetricDef[] = [
     tab: 'Connections',
     tabKey: 'pages.index.historyTabConnections',
     title: 'pages.index.historyTitleConnections',
-    icon: <ApiOutlined />,
+    icon: <ApiOutlined aria-hidden />,
     valueMax: null,
     unit: '',
     stroke: '#597ef7',
@@ -116,7 +116,7 @@ const METRICS: MetricDef[] = [
     tab: 'Disk I/O',
     tabKey: 'pages.index.historyTabDisk',
     title: 'pages.index.historyTitleDisk',
-    icon: <HddOutlined />,
+    icon: <HddOutlined aria-hidden />,
     valueMax: null,
     unit: 'B/s',
     stroke: '#eb2f96',
@@ -130,7 +130,7 @@ const METRICS: MetricDef[] = [
     tab: 'Disk Usage',
     tabKey: 'pages.index.historyTabDiskUsage',
     title: 'pages.index.historyTitleDiskUsage',
-    icon: <PieChartOutlined />,
+    icon: <PieChartOutlined aria-hidden />,
     valueMax: 100,
     unit: '%',
     stroke: '#13c2c2',
@@ -140,7 +140,7 @@ const METRICS: MetricDef[] = [
     tab: 'Online',
     tabKey: 'pages.index.historyTabOnline',
     title: 'pages.index.historyTitleOnline',
-    icon: <TeamOutlined />,
+    icon: <TeamOutlined aria-hidden />,
     valueMax: null,
     unit: '',
     stroke: '#52c41a',
@@ -150,7 +150,7 @@ const METRICS: MetricDef[] = [
     tab: 'Load',
     tabKey: 'pages.index.historyTabLoad',
     title: 'pages.index.historyTitleLoad',
-    icon: <LineChartOutlined />,
+    icon: <LineChartOutlined aria-hidden />,
     valueMax: null,
     unit: '',
     stroke: '#fa8c16',
@@ -334,6 +334,7 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
         <div className="metric-modal-title">
           <span>{t('pages.index.systemHistoryTitle')}</span>
           <Select
+            aria-label={t('pages.index.timeRange')}
             value={bucket}
             size="small"
             className="bucket-select"

frontend/src/pages/index/SystemStrip.tsx

@@ -26,7 +26,7 @@ export default function SystemStrip({ status, showIp, onToggleIp }: SystemStripP
       <div className="ov-strip-grid">
         <div className="ov-strip-cell">
           <div className="ov-kicker ov-kicker-icon">
-            <ClockCircleOutlined />
+            <ClockCircleOutlined aria-hidden />
             {t('pages.index.uptime')}
           </div>
           <div className="ov-strip-split">
@@ -46,7 +46,7 @@ export default function SystemStrip({ status, showIp, onToggleIp }: SystemStripP
 
         <div className="ov-strip-cell">
           <div className="ov-kicker ov-kicker-icon">
-            <DatabaseOutlined />
+            <DatabaseOutlined aria-hidden />
             {t('pages.index.panel')}
           </div>
           <div className="ov-strip-split">
@@ -64,7 +64,7 @@ export default function SystemStrip({ status, showIp, onToggleIp }: SystemStripP
 
         <div className="ov-strip-cell">
           <div className="ov-kicker ov-kicker-icon">
-            <GlobalOutlined />
+            <GlobalOutlined aria-hidden />
             {t('pages.index.ipAddresses')}
             <Tooltip title={t('pages.index.toggleIpVisibility')}>
               {showIp ? (

frontend/src/pages/index/ThroughputCard.tsx

@@ -47,12 +47,12 @@ export default function ThroughputCard({
         </div>
         <div className="ov-wide-legend">
           <div className="ov-legend-label">
-            <ArrowUpOutlined style={{ color: accent }} />
+            <ArrowUpOutlined aria-hidden style={{ color: accent }} />
             {t('pages.index.upload')}
             <span className="ov-legend-num">{SizeFormatter.speedFormat(status.netIO.up)}</span>
           </div>
           <div className="ov-legend-label">
-            <ArrowDownOutlined style={{ color: downColor }} />
+            <ArrowDownOutlined aria-hidden style={{ color: downColor }} />
             {t('pages.index.download')}
             <span className="ov-legend-num">{SizeFormatter.speedFormat(status.netIO.down)}</span>
           </div>

frontend/src/pages/index/XrayLogModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useId } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Button, Checkbox, Form, Input, Modal, Select, Tag } from 'antd';
@@ -63,6 +63,7 @@ const AUTO_UPDATE_INTERVAL = 5000;
 
 export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { datepicker } = useDatepicker();
   const { isMobile } = useMediaQuery();
   const [rows, setRows] = useState('20');
@@ -173,6 +174,7 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
       <Form layout="inline" className="log-toolbar">
         <Form.Item>
           <Select
+            aria-label={t('pages.index.logLines')}
             value={rows}
             size="small"
             style={{ width: 100 }}
@@ -186,8 +188,9 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
             ]}
           />
         </Form.Item>
-        <Form.Item label={t('filter')} className="filter-item">
+        <Form.Item htmlFor={`${uid}-filter`} label={t('filter')} className="filter-item">
           <Input
+            id={`${uid}-filter`}
             value={filter}
             size="small"
             onChange={(e) => setFilter(e.target.value)}
@@ -214,7 +217,7 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
           <Button
             type="primary"
             onClick={download}
-            icon={<DownloadOutlined />}
+            icon={<DownloadOutlined aria-hidden />}
             aria-label={t('download')}
           />
         </Form.Item>

frontend/src/pages/index/XrayMetricsModal.tsx

@@ -53,7 +53,7 @@ const METRICS: MetricDef[] = [
     tab: 'Heap',
     tabKey: 'pages.index.xrayTabHeap',
     title: 'pages.index.xrayTitleHeap',
-    icon: <DatabaseOutlined />,
+    icon: <DatabaseOutlined aria-hidden />,
     unit: 'B',
     stroke: '#7c4dff',
   },
@@ -62,7 +62,7 @@ const METRICS: MetricDef[] = [
     tab: 'Sys',
     tabKey: 'pages.index.xrayTabSys',
     title: 'pages.index.xrayTitleSys',
-    icon: <CloudServerOutlined />,
+    icon: <CloudServerOutlined aria-hidden />,
     unit: 'B',
     stroke: '#1890ff',
   },
@@ -71,7 +71,7 @@ const METRICS: MetricDef[] = [
     tab: 'Objects',
     tabKey: 'pages.index.xrayTabObjects',
     title: 'pages.index.xrayTitleObjects',
-    icon: <BlockOutlined />,
+    icon: <BlockOutlined aria-hidden />,
     unit: '',
     stroke: '#13c2c2',
   },
@@ -80,7 +80,7 @@ const METRICS: MetricDef[] = [
     tab: 'GC Count',
     tabKey: 'pages.index.xrayTabGcCount',
     title: 'pages.index.xrayTitleGcCount',
-    icon: <DeleteOutlined />,
+    icon: <DeleteOutlined aria-hidden />,
     unit: '',
     stroke: '#fa8c16',
   },
@@ -89,7 +89,7 @@ const METRICS: MetricDef[] = [
     tab: 'GC Pause',
     tabKey: 'pages.index.xrayTabGcPause',
     title: 'pages.index.xrayTitleGcPause',
-    icon: <PauseCircleOutlined />,
+    icon: <PauseCircleOutlined aria-hidden />,
     unit: 'ns',
     stroke: '#f5222d',
   },
@@ -98,7 +98,7 @@ const METRICS: MetricDef[] = [
     tab: 'Observatory',
     tabKey: 'pages.index.xrayTabObservatory',
     title: 'pages.index.xrayTitleObservatory',
-    icon: <EyeOutlined />,
+    icon: <EyeOutlined aria-hidden />,
     unit: 'ms',
     stroke: '#52c41a',
   },
@@ -304,6 +304,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
         <div className="metric-modal-title">
           <span>{t('pages.index.xrayMetricsTitle')}</span>
           <Select
+            aria-label={t('pages.index.timeRange')}
             value={bucket}
             size="small"
             className="bucket-select"
@@ -362,6 +363,7 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
           ) : (
             <div className="obs-controls">
               <Select
+                aria-label={t('pages.index.xrayObservatoryTagPlaceholder')}
                 value={obsActiveTag}
                 size="small"
                 className="obs-select"

frontend/src/pages/login/LoginPage.tsx

@@ -128,7 +128,13 @@ export default function LoginPage() {
     [],
   );
 
-  const themeIcon = !isDark ? <SunOutlined /> : !isUltra ? <MoonOutlined /> : <MoonFilled />;
+  const themeIcon = !isDark ? (
+    <SunOutlined aria-hidden />
+  ) : !isUltra ? (
+    <MoonOutlined aria-hidden />
+  ) : (
+    <MoonFilled aria-hidden />
+  );
 
   return (
     <ConfigProvider theme={antdThemeConfig}>
@@ -167,7 +173,7 @@ export default function LoginPage() {
                 size="large"
                 className="toolbar-btn"
                 aria-label={t('pages.settings.language')}
-                icon={<TranslationOutlined />}
+                icon={<TranslationOutlined aria-hidden />}
               />
             </Popover>
           </div>
@@ -199,7 +205,7 @@ export default function LoginPage() {
                       rules={{ validate: rhfZodValidate(LoginFormSchema.shape.username) }}
                     >
                       <Input
-                        prefix={<UserOutlined />}
+                        prefix={<UserOutlined aria-hidden />}
                         autoComplete="username"
                         size="large"
                         placeholder={t('username')}
@@ -213,7 +219,7 @@ export default function LoginPage() {
                       rules={{ validate: rhfZodValidate(LoginFormSchema.shape.password) }}
                     >
                       <Input.Password
-                        prefix={<LockOutlined />}
+                        prefix={<LockOutlined aria-hidden />}
                         autoComplete="current-password"
                         size="large"
                         placeholder={t('password')}
@@ -227,7 +233,7 @@ export default function LoginPage() {
                         rules={{ validate: rhfZodValidate(TwoFactorCodeSchema) }}
                       >
                         <Input
-                          prefix={<KeyOutlined />}
+                          prefix={<KeyOutlined aria-hidden />}
                           autoComplete="one-time-code"
                           size="large"
                           placeholder={t('twoFactorCode')}

frontend/src/pages/nodes/NodeList.tsx

@@ -252,7 +252,7 @@ export default function NodeList({
                 parent: record.parentGuid ? nameByGuid.get(record.parentGuid) || '-' : '-',
               })}
             >
-              <Tag icon={<ApartmentOutlined />} style={{ margin: 0 }}>
+              <Tag icon={<ApartmentOutlined aria-hidden />} style={{ margin: 0 }}>
                 {t('pages.nodes.subNode')}
               </Tag>
             </Tooltip>
@@ -263,7 +263,7 @@ export default function NodeList({
                   type="text"
                   size="small"
                   style={{ fontSize: 16 }}
-                  icon={<ThunderboltOutlined />}
+                  icon={<ThunderboltOutlined aria-hidden />}
                   aria-label={t('pages.nodes.probe')}
                   onClick={() => onProbe(record)}
                 />
@@ -274,7 +274,7 @@ export default function NodeList({
                     type="text"
                     size="small"
                     style={{ fontSize: 16 }}
-                    icon={<CloudDownloadOutlined />}
+                    icon={<CloudDownloadOutlined aria-hidden />}
                     aria-label={t('pages.nodes.updatePanel')}
                     onClick={() => onUpdateNode(record)}
                   />
@@ -285,7 +285,7 @@ export default function NodeList({
                   type="text"
                   size="small"
                   style={{ fontSize: 16 }}
-                  icon={<EditOutlined />}
+                  icon={<EditOutlined aria-hidden />}
                   aria-label={t('edit')}
                   onClick={() => onEdit(record)}
                 />
@@ -296,7 +296,7 @@ export default function NodeList({
                   size="small"
                   danger
                   style={{ fontSize: 16 }}
-                  icon={<DeleteOutlined />}
+                  icon={<DeleteOutlined aria-hidden />}
                   aria-label={t('delete')}
                   onClick={() => onDelete(record)}
                 />
@@ -316,6 +316,7 @@ export default function NodeList({
             <Switch
               checked={!!record.enable}
               size="small"
+              aria-label={t('pages.nodes.enable')}
               onChange={(v) => onToggleEnable(record, v)}
             />
           ),
@@ -331,7 +332,7 @@ export default function NodeList({
           >
             <span className="name">
               {record.transitive && (
-                <ApartmentOutlined style={{ marginInlineEnd: 6, opacity: 0.6 }} />
+                <ApartmentOutlined aria-hidden style={{ marginInlineEnd: 6, opacity: 0.6 }} />
               )}
               {record.name}
             </span>
@@ -391,7 +392,7 @@ export default function NodeList({
               <StatusLabel status={record.status} xrayState={record.xrayState} />
               {tip && (
                 <Tooltip title={tip}>
-                  <ExclamationCircleOutlined style={{ color: iconColor }} />
+                  <ExclamationCircleOutlined style={{ color: iconColor }} aria-label={tip} />
                 </Tooltip>
               )}
             </Space>
@@ -460,7 +461,7 @@ export default function NodeList({
         render: (_value, record) => (
           <Space size={2}>
             <Tag className="client-count-tag" style={{ margin: 0, padding: '0 2px' }}>
-              <TeamOutlined /> {record.clientCount || 0}
+              <TeamOutlined aria-hidden /> {record.clientCount || 0}
             </Tag>
             {record.activeCount ? (
               <Tooltip title={t('subscription.active')}>
@@ -562,7 +563,7 @@ export default function NodeList({
         locale={{
           emptyText: (
             <div className="card-empty">
-              <ClusterOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+              <ClusterOutlined aria-hidden style={{ fontSize: 32, marginBottom: 8 }} />
               <div>{t('noData')}</div>
             </div>
           ),
@@ -579,14 +580,14 @@ export default function NodeList({
   return (
     <Card size="small" hoverable>
       <div className="toolbar">
-        <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
+        <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={onAdd}>
           {t('pages.nodes.addNode')}
         </Button>
-        <Button icon={<SafetyCertificateOutlined />} onClick={onMtls}>
+        <Button icon={<SafetyCertificateOutlined aria-hidden />} onClick={onMtls}>
           {t('pages.nodes.mtls.title')}
         </Button>
         {selectedIds.length > 0 && (
-          <Button icon={<CloudDownloadOutlined />} onClick={onUpdateSelected}>
+          <Button icon={<CloudDownloadOutlined aria-hidden />} onClick={onUpdateSelected}>
             {t('pages.nodes.updateSelected', { count: selectedIds.length })}
           </Button>
         )}
@@ -597,7 +598,7 @@ export default function NodeList({
           <div className="node-cards">
             {dataSource.length === 0 ? (
               <div className="card-empty">
-                <ClusterOutlined style={{ fontSize: 28, opacity: 0.5 }} />
+                <ClusterOutlined aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
                 <div>{t('noData')}</div>
               </div>
             ) : (
@@ -609,11 +610,11 @@ export default function NodeList({
                     style={{ paddingInlineStart: 16, opacity: 0.85 }}
                   >
                     <div className="card-head">
-                      <ApartmentOutlined style={{ opacity: 0.6 }} />
+                      <ApartmentOutlined aria-hidden style={{ opacity: 0.6 }} />
                       <StatusDot status={record.status} xrayState={record.xrayState} />
                       <span className="node-name">{record.name}</span>
                       <div className="card-actions">
-                        <Tag icon={<ApartmentOutlined />} style={{ margin: 0 }}>
+                        <Tag icon={<ApartmentOutlined aria-hidden />} style={{ margin: 0 }}>
                           {t('pages.nodes.subNode')}
                         </Tag>
                       </div>
@@ -653,6 +654,7 @@ export default function NodeList({
                         <Switch
                           checked={!!record.enable}
                           size="small"
+                          aria-label={t('pages.nodes.enable')}
                           onChange={(v) => onToggleEnable(record, v)}
                         />
                         <Dropdown
@@ -664,7 +666,7 @@ export default function NodeList({
                                 key: 'probe',
                                 label: (
                                   <>
-                                    <ThunderboltOutlined /> {t('pages.nodes.probe')}
+                                    <ThunderboltOutlined aria-hidden /> {t('pages.nodes.probe')}
                                   </>
                                 ),
                                 onClick: () => onProbe(record),
@@ -675,7 +677,8 @@ export default function NodeList({
                                       key: 'update',
                                       label: (
                                         <>
-                                          <CloudDownloadOutlined /> {t('pages.nodes.updatePanel')}
+                                          <CloudDownloadOutlined aria-hidden />{' '}
+                                          {t('pages.nodes.updatePanel')}
                                         </>
                                       ),
                                       onClick: () => onUpdateNode(record),
@@ -686,7 +689,7 @@ export default function NodeList({
                                 key: 'edit',
                                 label: (
                                   <>
-                                    <EditOutlined /> {t('edit')}
+                                    <EditOutlined aria-hidden /> {t('edit')}
                                   </>
                                 ),
                                 onClick: () => onEdit(record),
@@ -696,7 +699,7 @@ export default function NodeList({
                                 danger: true,
                                 label: (
                                   <>
-                                    <DeleteOutlined /> {t('delete')}
+                                    <DeleteOutlined aria-hidden /> {t('delete')}
                                   </>
                                 ),
                                 onClick: () => onDelete(record),
@@ -708,7 +711,7 @@ export default function NodeList({
                             type="text"
                             size="small"
                             className="row-action-trigger"
-                            icon={<MoreOutlined />}
+                            icon={<MoreOutlined aria-hidden />}
                             aria-label={t('more')}
                           />
                         </Dropdown>
@@ -782,7 +785,7 @@ export default function NodeList({
                     const { tip, iconColor } = statusIssue(statsNode);
                     return tip ? (
                       <Tooltip title={tip}>
-                        <ExclamationCircleOutlined style={{ color: iconColor }} />
+                        <ExclamationCircleOutlined style={{ color: iconColor }} aria-label={tip} />
                       </Tooltip>
                     ) : null;
                   })()}
@@ -820,7 +823,7 @@ export default function NodeList({
                 <div className="stat-row">
                   <span className="stat-label">{t('clients')}</span>
                   <Tag>
-                    <TeamOutlined /> {statsNode.clientCount || 0}
+                    <TeamOutlined aria-hidden /> {statsNode.clientCount || 0}
                   </Tag>
                   {statsNode.activeCount ? (
                     <Tag color="green">

frontend/src/pages/nodes/NodesPage.tsx

@@ -313,7 +313,7 @@ export default function NodesPage() {
                           <Statistic
                             title={t('pages.nodes.totalNodes')}
                             value={String(totals.total)}
-                            prefix={<CloudServerOutlined />}
+                            prefix={<CloudServerOutlined aria-hidden />}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={6}>
@@ -321,7 +321,10 @@ export default function NodesPage() {
                             title={t('pages.nodes.onlineNodes')}
                             value={String(totals.online)}
                             prefix={
-                              <CheckCircleOutlined style={{ color: 'var(--ant-color-success)' }} />
+                              <CheckCircleOutlined
+                                aria-hidden
+                                style={{ color: 'var(--ant-color-success)' }}
+                              />
                             }
                           />
                         </Col>
@@ -330,7 +333,10 @@ export default function NodesPage() {
                             title={t('pages.nodes.offlineNodes')}
                             value={String(totals.offline)}
                             prefix={
-                              <CloseCircleOutlined style={{ color: 'var(--ant-color-error)' }} />
+                              <CloseCircleOutlined
+                                aria-hidden
+                                style={{ color: 'var(--ant-color-error)' }}
+                              />
                             }
                           />
                         </Col>
@@ -338,7 +344,7 @@ export default function NodesPage() {
                           <Statistic
                             title={t('pages.nodes.avgLatency')}
                             value={totals.avgLatency > 0 ? `${totals.avgLatency} ms` : '-'}
-                            prefix={<ThunderboltOutlined />}
+                            prefix={<ThunderboltOutlined aria-hidden />}
                           />
                         </Col>
                       </Row>
@@ -398,6 +404,7 @@ export default function NodesPage() {
           </Typography.Paragraph>
           <Typography.Text strong>{t('pages.nodes.mtls.trustLabel')}</Typography.Text>
           <Input.TextArea
+            aria-label={t('pages.nodes.mtls.trustLabel')}
             rows={5}
             value={trustCa}
             onChange={(e) => setTrustCa(e.target.value)}

frontend/src/pages/settings/DiscordTab.tsx

@@ -67,7 +67,11 @@ export default function DiscordTab({ allSetting, updateSetting }: DiscordTabProp
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.panelSettings'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -138,7 +142,7 @@ export default function DiscordTab({ allSetting, updateSetting }: DiscordTabProp
               <Space orientation="vertical" size={8} style={{ width: '100%', marginTop: 16 }}>
                 <Button
                   type="primary"
-                  icon={<SendOutlined />}
+                  icon={<SendOutlined aria-hidden />}
                   loading={testLoading}
                   disabled={!allSetting.discordBotEnable}
                   onClick={handleTestDiscord}
@@ -159,7 +163,11 @@ export default function DiscordTab({ allSetting, updateSetting }: DiscordTabProp
         },
         {
           key: '2',
-          label: catTabLabel(<BellOutlined />, t('pages.settings.notifications'), isMobile),
+          label: catTabLabel(
+            <BellOutlined aria-hidden />,
+            t('pages.settings.notifications'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem

frontend/src/pages/settings/EmailTab.tsx

@@ -56,7 +56,11 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.smtpSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.smtpSettings'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -184,7 +188,7 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
               <Space orientation="vertical" size={8} style={{ width: '100%', marginTop: 16 }}>
                 <Button
                   type="primary"
-                  icon={<SendOutlined />}
+                  icon={<SendOutlined aria-hidden />}
                   loading={testLoading}
                   onClick={handleTestSmtp}
                 >
@@ -213,7 +217,11 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
         },
         {
           key: '2',
-          label: catTabLabel(<MailOutlined />, t('pages.settings.emailNotifications'), isMobile),
+          label: catTabLabel(
+            <MailOutlined aria-hidden />,
+            t('pages.settings.emailNotifications'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem

frontend/src/pages/settings/GeneralTab.tsx

@@ -180,7 +180,11 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.panelSettings'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -349,7 +353,11 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
         },
         {
           key: '2',
-          label: catTabLabel(<BellOutlined />, t('pages.settings.notifications'), isMobile),
+          label: catTabLabel(
+            <BellOutlined aria-hidden />,
+            t('pages.settings.notifications'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -386,7 +394,11 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
         },
         {
           key: '3',
-          label: catTabLabel(<SafetyCertificateOutlined />, t('pages.settings.certs'), isMobile),
+          label: catTabLabel(
+            <SafetyCertificateOutlined aria-hidden />,
+            t('pages.settings.certs'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -414,7 +426,11 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
         },
         {
           key: '4',
-          label: catTabLabel(<GlobalOutlined />, t('pages.settings.externalTraffic'), isMobile),
+          label: catTabLabel(
+            <GlobalOutlined aria-hidden />,
+            t('pages.settings.externalTraffic'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -443,7 +459,11 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
         },
         {
           key: '5',
-          label: catTabLabel(<ClockCircleOutlined />, t('pages.settings.dateAndTime'), isMobile),
+          label: catTabLabel(
+            <ClockCircleOutlined aria-hidden />,
+            t('pages.settings.dateAndTime'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -476,7 +496,7 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
         },
         {
           key: '6',
-          label: catTabLabel(<ApartmentOutlined />, 'LDAP', isMobile),
+          label: catTabLabel(<ApartmentOutlined aria-hidden />, 'LDAP', isMobile),
           children: (
             <>
               <SettingListItem paddings="small" title={t('pages.settings.ldap.enable')}>

frontend/src/pages/settings/HappSettingsContent.tsx

@@ -80,7 +80,7 @@ export default function HappSettingsContent({
           {
             key: 'routing',
             label: catTabLabel(
-              <BranchesOutlined />,
+              <BranchesOutlined aria-hidden />,
               t('pages.settings.subHappGroupRouting'),
               isMobile,
             ),
@@ -136,7 +136,7 @@ export default function HappSettingsContent({
                   title={t('pages.settings.subHappVisualBuilder')}
                   description={t('pages.settings.subHappVisualBuilderDesc')}
                 >
-                  <Button icon={<BuildOutlined />} onClick={() => setIsModalOpen(true)}>
+                  <Button icon={<BuildOutlined aria-hidden />} onClick={() => setIsModalOpen(true)}>
                     {t('pages.settings.subHappVisualBuilder')}
                   </Button>
                 </SettingListItem>
@@ -182,7 +182,7 @@ export default function HappSettingsContent({
           {
             key: 'appearance',
             label: catTabLabel(
-              <DesktopOutlined />,
+              <DesktopOutlined aria-hidden />,
               t('pages.settings.subHappGroupThemes'),
               isMobile,
             ),
@@ -284,6 +284,7 @@ export default function HappSettingsContent({
                 >
                   <Space orientation="vertical" style={{ width: '100%' }}>
                     <Input
+                      aria-label={t('pages.settings.subHappColorProfile')}
                       value={allSetting.subHappColorProfile}
                       placeholder='{"serverRowBackgroundColor":"#21003D67"} or resetcolors'
                       onChange={(e) => updateSetting({ subHappColorProfile: e.target.value })}
@@ -326,7 +327,7 @@ export default function HappSettingsContent({
           {
             key: 'network',
             label: catTabLabel(
-              <ThunderboltOutlined />,
+              <ThunderboltOutlined aria-hidden />,
               t('pages.settings.subHappGroupNetwork'),
               isMobile,
             ),
@@ -493,7 +494,7 @@ export default function HappSettingsContent({
           {
             key: 'failover',
             label: catTabLabel(
-              <CloudSyncOutlined />,
+              <CloudSyncOutlined aria-hidden />,
               t('pages.settings.subHappGroupFailover'),
               isMobile,
             ),

frontend/src/pages/settings/IncySettingsContent.tsx

@@ -53,7 +53,11 @@ export default function IncySettingsContent({
         items={[
           {
             key: 'app',
-            label: catTabLabel(<AppstoreOutlined />, t('pages.settings.subIncyGroupApp'), isMobile),
+            label: catTabLabel(
+              <AppstoreOutlined aria-hidden />,
+              t('pages.settings.subIncyGroupApp'),
+              isMobile,
+            ),
             children: (
               <>
                 <SettingListItem
@@ -127,7 +131,7 @@ export default function IncySettingsContent({
           {
             key: 'banners',
             label: catTabLabel(
-              <NotificationOutlined />,
+              <NotificationOutlined aria-hidden />,
               t('pages.settings.subIncyGroupBanners'),
               isMobile,
             ),
@@ -196,7 +200,7 @@ export default function IncySettingsContent({
           {
             key: 'privacy',
             label: catTabLabel(
-              <SafetyOutlined />,
+              <SafetyOutlined aria-hidden />,
               t('pages.settings.subIncyGroupPrivacy'),
               isMobile,
             ),
@@ -291,7 +295,7 @@ export default function IncySettingsContent({
           {
             key: 'network',
             label: catTabLabel(
-              <ThunderboltOutlined />,
+              <ThunderboltOutlined aria-hidden />,
               t('pages.settings.subIncyGroupNetwork'),
               isMobile,
             ),
@@ -450,7 +454,7 @@ export default function IncySettingsContent({
           {
             key: 'routing',
             label: catTabLabel(
-              <BranchesOutlined />,
+              <BranchesOutlined aria-hidden />,
               t('pages.settings.subIncyGroupRouting'),
               isMobile,
             ),

frontend/src/pages/settings/SecretInput.tsx

@@ -8,6 +8,7 @@ interface SecretInputProps {
   placeholder: string;
   onChange: (value: string) => void;
   onClearArmedChange: (armed: boolean) => void;
+  'aria-labelledby'?: string;
 }
 
 export default function SecretInput({
@@ -17,11 +18,13 @@ export default function SecretInput({
   placeholder,
   onChange,
   onClearArmedChange,
+  'aria-labelledby': ariaLabelledBy,
 }: SecretInputProps) {
   const { t } = useTranslation();
   return (
     <Space.Compact style={{ width: '100%' }}>
       <Input.Password
+        aria-labelledby={ariaLabelledBy}
         value={value}
         placeholder={configured && !clearArmed ? placeholder : ''}
         onChange={(e) => {

frontend/src/pages/settings/SecurityTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -74,6 +74,7 @@ const TFA_INITIAL: TfaState = {
 
 export default function SecurityTab({ allSetting, updateSetting, saveSetting }: SecurityTabProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { isMobile } = useMediaQuery();
   const [modal, modalContextHolder] = Modal.useModal();
   const [messageApi, messageContextHolder] = message.useMessage();
@@ -308,7 +309,11 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
         items={[
           {
             key: '1',
-            label: catTabLabel(<UserOutlined />, t('pages.settings.security.admin'), isMobile),
+            label: catTabLabel(
+              <UserOutlined aria-hidden />,
+              t('pages.settings.security.admin'),
+              isMobile,
+            ),
             children: (
               <>
                 <SettingListItem paddings="small" title={t('pages.settings.oldUsername')}>
@@ -351,7 +356,7 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
           {
             key: '2',
             label: catTabLabel(
-              <SafetyOutlined />,
+              <SafetyOutlined aria-hidden />,
               t('pages.settings.security.twoFactor'),
               isMobile,
             ),
@@ -367,7 +372,7 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
           },
           {
             key: '3',
-            label: catTabLabel(<ApiOutlined />, t('pages.nodes.apiToken'), isMobile),
+            label: catTabLabel(<ApiOutlined aria-hidden />, t('pages.nodes.apiToken'), isMobile),
             children: (
               <div className="api-token-section">
                 <div className="api-token-header">
@@ -387,7 +392,9 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
                       <div className="api-token-row-head">
                         <div className="api-token-name-wrap">
                           <div className="api-token-name-line">
-                            <span className="api-token-name">{row.name}</span>
+                            <span id={`${uid}-token-${row.id}`} className="api-token-name">
+                              {row.name}
+                            </span>
                             <Tag color={scopeMeta[row.scope].color}>
                               {scopeMeta[row.scope].label}
                             </Tag>
@@ -399,6 +406,7 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
                         <div className="api-token-actions">
                           <Switch
                             size="small"
+                            aria-labelledby={`${uid}-token-${row.id}`}
                             checked={row.enabled}
                             onChange={() => toggleTokenEnabled(row)}
                           />
@@ -431,8 +439,13 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
         onCancel={() => setCreateOpen(false)}
       >
         <Form layout="vertical">
-          <Form.Item label={t('pages.settings.security.apiTokenName') || 'Name'} required>
+          <Form.Item
+            label={t('pages.settings.security.apiTokenName') || 'Name'}
+            htmlFor={`${uid}-tokenName`}
+            required
+          >
             <Input
+              id={`${uid}-tokenName`}
               value={createName}
               maxLength={64}
               placeholder={

frontend/src/pages/settings/SubBalancerFormModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Modal, Select, Switch, message } from 'antd';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
@@ -59,6 +59,7 @@ export default function SubBalancerFormModal({
   onConfirm,
 }: SubBalancerFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const methods = useForm<SubBalancerFormValues>({ defaultValues: initialState(balancer) });
   const isEdit = balancer != null;
@@ -199,6 +200,7 @@ export default function SubBalancerFormModal({
                   return (
                     <div key={id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                       <span
+                        id={`${uid}-weight-${id}`}
                         title={option?.title}
                         style={{
                           minWidth: 0,
@@ -214,6 +216,8 @@ export default function SubBalancerFormModal({
                         name={`memberWeights.${id}`}
                         render={({ field }) => (
                           <InputNumber
+                            aria-labelledby={`${uid}-weight-${id}`}
+                            aria-describedby={`${uid}-weights-hint`}
                             min={0.1}
                             step={0.1}
                             precision={1}
@@ -227,6 +231,9 @@ export default function SubBalancerFormModal({
                   );
                 })}
               </div>
+              <span id={`${uid}-weights-hint`} hidden>
+                {t('pages.settings.subBalancers.weightsHelp')}
+              </span>
             </Form.Item>
           )}
 

frontend/src/pages/settings/SubscriptionBalancersTab.tsx

@@ -156,7 +156,12 @@ export default function SubscriptionBalancersTab({
       width: 80,
       align: 'center' as const,
       render: (_: unknown, r: SubBalancer) => (
-        <Switch size="small" checked={r.enabled} onChange={() => toggleEnabled(r)} />
+        <Switch
+          size="small"
+          aria-label={t('pages.settings.subBalancers.enabled')}
+          checked={r.enabled}
+          onChange={() => toggleEnabled(r)}
+        />
       ),
     },
     {
@@ -168,7 +173,7 @@ export default function SubscriptionBalancersTab({
           <Button
             aria-label={t('edit')}
             size="small"
-            icon={<EditOutlined />}
+            icon={<EditOutlined aria-hidden />}
             title={t('edit')}
             onClick={() => {
               setEditing(r);
@@ -181,7 +186,12 @@ export default function SubscriptionBalancersTab({
             cancelText={t('cancel')}
             onConfirm={() => remove(r.id)}
           >
-            <Button aria-label={t('delete')} size="small" danger icon={<DeleteOutlined />} />
+            <Button
+              aria-label={t('delete')}
+              size="small"
+              danger
+              icon={<DeleteOutlined aria-hidden />}
+            />
           </Popconfirm>
         </Space>
       ),
@@ -212,7 +222,7 @@ export default function SubscriptionBalancersTab({
       <div style={{ marginBottom: 12 }}>
         <Button
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           onClick={() => {
             setEditing(null);
             setModalOpen(true);
@@ -332,7 +342,7 @@ export default function SubscriptionBalancersTab({
           {
             key: 'balancers',
             label: catTabLabel(
-              <DeploymentUnitOutlined />,
+              <DeploymentUnitOutlined aria-hidden />,
               t('pages.settings.subBalancers.tabBalancers'),
               isMobile,
             ),
@@ -341,7 +351,7 @@ export default function SubscriptionBalancersTab({
           {
             key: 'observatory',
             label: catTabLabel(
-              <RadarChartOutlined />,
+              <RadarChartOutlined aria-hidden />,
               t('pages.settings.subBalancers.tabObservatory'),
               isMobile,
             ),

frontend/src/pages/settings/SubscriptionFormatsTab.tsx

@@ -158,7 +158,11 @@ export default function SubscriptionFormatsTab({
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.panelSettings'),
+            isMobile,
+          ),
           children: (
             <div className="subscription-format-sections">
               {allSetting.subJsonEnable && (
@@ -167,7 +171,7 @@ export default function SubscriptionFormatsTab({
                   className="subscription-format-card"
                   title={
                     <span className="subscription-format-card-title">
-                      <FileTextOutlined />
+                      <FileTextOutlined aria-hidden />
                       {t('pages.settings.subJsonEnableTitle')}
                     </span>
                   }
@@ -261,7 +265,7 @@ export default function SubscriptionFormatsTab({
                   className="subscription-format-card"
                   title={
                     <span className="subscription-format-card-title">
-                      <NodeIndexOutlined />
+                      <NodeIndexOutlined aria-hidden />
                       {t('pages.settings.subClashEnableTitle')}
                     </span>
                   }
@@ -322,7 +326,7 @@ export default function SubscriptionFormatsTab({
         {
           key: '2',
           label: catTabLabel(
-            <RocketOutlined />,
+            <RocketOutlined aria-hidden />,
             t('pages.settings.subFormats.finalMask'),
             isMobile,
           ),
@@ -342,7 +346,7 @@ export default function SubscriptionFormatsTab({
         },
         {
           key: '3',
-          label: catTabLabel(<PartitionOutlined />, t('pages.settings.mux'), isMobile),
+          label: catTabLabel(<PartitionOutlined aria-hidden />, t('pages.settings.mux'), isMobile),
           children: (
             <>
               <SettingListItem
@@ -396,7 +400,7 @@ export default function SubscriptionFormatsTab({
         },
         {
           key: '4',
-          label: catTabLabel(<SendOutlined />, t('pages.settings.direct'), isMobile),
+          label: catTabLabel(<SendOutlined aria-hidden />, t('pages.settings.direct'), isMobile),
           children: (
             <>
               <SettingListItem
@@ -445,7 +449,7 @@ export default function SubscriptionFormatsTab({
         },
         {
           key: '5',
-          label: catTabLabel(<StopOutlined />, t('pages.settings.block'), isMobile),
+          label: catTabLabel(<StopOutlined aria-hidden />, t('pages.settings.block'), isMobile),
           children: (
             <>
               <SettingListItem

frontend/src/pages/settings/SubscriptionGeneralTab.tsx

@@ -48,7 +48,11 @@ export default function SubscriptionGeneralTab({
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.panelSettings'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -153,7 +157,11 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '2',
-          label: catTabLabel(<InfoCircleOutlined />, t('pages.settings.information'), isMobile),
+          label: catTabLabel(
+            <InfoCircleOutlined aria-hidden />,
+            t('pages.settings.information'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -273,7 +281,7 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '3',
-          label: catTabLabel(<IdcardOutlined />, t('pages.settings.profile'), isMobile),
+          label: catTabLabel(<IdcardOutlined aria-hidden />, t('pages.settings.profile'), isMobile),
           children: (
             <>
               <SettingListItem
@@ -379,7 +387,11 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '4',
-          label: catTabLabel(<SafetyCertificateOutlined />, t('pages.settings.certs'), isMobile),
+          label: catTabLabel(
+            <SafetyCertificateOutlined aria-hidden />,
+            t('pages.settings.certs'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -407,7 +419,7 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '5',
-          label: catTabLabel(<BranchesOutlined />, 'Happ', isMobile),
+          label: catTabLabel(<BranchesOutlined aria-hidden />, 'Happ', isMobile),
           children: (
             <HappSettingsContent
               allSetting={allSetting}
@@ -419,7 +431,7 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '6',
-          label: catTabLabel(<NodeIndexOutlined />, 'Clash / Mihomo', isMobile),
+          label: catTabLabel(<NodeIndexOutlined aria-hidden />, 'Clash / Mihomo', isMobile),
           children: (
             <>
               <SettingListItem
@@ -452,7 +464,7 @@ export default function SubscriptionGeneralTab({
         },
         {
           key: '7',
-          label: catTabLabel(<CompassOutlined />, 'Incy', isMobile),
+          label: catTabLabel(<CompassOutlined aria-hidden />, 'Incy', isMobile),
           children: (
             <IncySettingsContent
               allSetting={allSetting}

frontend/src/pages/settings/TelegramTab.tsx

@@ -65,7 +65,11 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
       items={[
         {
           key: '1',
-          label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
+          label: catTabLabel(
+            <SettingOutlined aria-hidden />,
+            t('pages.settings.panelSettings'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem
@@ -133,7 +137,7 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
               <Space orientation="vertical" size={8} style={{ width: '100%', marginTop: 16 }}>
                 <Button
                   type="primary"
-                  icon={<SendOutlined />}
+                  icon={<SendOutlined aria-hidden />}
                   loading={testLoading}
                   onClick={handleTestTgBot}
                 >
@@ -153,7 +157,11 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
         },
         {
           key: '2',
-          label: catTabLabel(<BellOutlined />, t('pages.settings.notifications'), isMobile),
+          label: catTabLabel(
+            <BellOutlined aria-hidden />,
+            t('pages.settings.notifications'),
+            isMobile,
+          ),
           children: (
             <>
               <SettingListItem

frontend/src/pages/settings/catTabLabel.tsx

@@ -6,9 +6,13 @@ import { Tooltip } from 'antd';
    old top tab bar's icons-only behaviour. */
 export function catTabLabel(icon: ReactNode, text: ReactNode, iconsOnly: boolean): ReactNode {
   if (iconsOnly) {
+    // Callers hide the icon for the desktop label; here it is the tab's only name.
     const labelledIcon =
       typeof text === 'string' && isValidElement(icon)
-        ? cloneElement(icon as ReactElement<{ 'aria-label'?: string }>, { 'aria-label': text })
+        ? cloneElement(icon as ReactElement<{ 'aria-label'?: string; 'aria-hidden'?: boolean }>, {
+            'aria-label': text,
+            'aria-hidden': undefined,
+          })
         : icon;
     return <Tooltip title={text}>{labelledIcon}</Tooltip>;
   }

frontend/src/pages/sponsors/SponsorsPage.tsx

@@ -16,7 +16,7 @@ function BecomeButton({ contact, block }: { contact?: string; block?: boolean })
   return (
     <Button
       type="primary"
-      icon={<CrownOutlined />}
+      icon={<CrownOutlined aria-hidden />}
       href={contact}
       target="_blank"
       rel="noopener noreferrer"
@@ -32,7 +32,7 @@ function YourBrandCard({ contact }: { contact?: string }) {
   return (
     <div className="sponsors-yourbrand">
       <span className="sponsors-yourbrand-icon">
-        <PlusOutlined />
+        <PlusOutlined aria-hidden />
       </span>
       <div className="sponsors-yourbrand-title">{t('pages.sponsors.yourBrand')}</div>
       <div className="sponsors-yourbrand-text">{t('pages.sponsors.yourBrandText')}</div>
@@ -64,7 +64,8 @@ export default function SponsorsPage() {
               <div className="sponsors-header">
                 <div>
                   <Typography.Title level={3} className="sponsors-title">
-                    <CrownOutlined className="sponsors-title-icon" /> {t('pages.sponsors.title')}
+                    <CrownOutlined aria-hidden className="sponsors-title-icon" />{' '}
+                    {t('pages.sponsors.title')}
                   </Typography.Title>
                   <Typography.Text type="secondary">{t('pages.sponsors.intro')}</Typography.Text>
                 </div>

frontend/src/pages/sub/SubAppsTab.tsx

@@ -13,8 +13,8 @@ interface SubAppsTabProps {
 }
 
 const PLATFORM_OPTIONS = [
-  { value: 'android' as const, label: 'Android', icon: <AndroidOutlined /> },
-  { value: 'ios' as const, label: 'iOS', icon: <AppleOutlined /> },
+  { value: 'android' as const, label: 'Android', icon: <AndroidOutlined aria-hidden /> },
+  { value: 'ios' as const, label: 'iOS', icon: <AppleOutlined aria-hidden /> },
 ];
 
 function AppIcon({ name }: { name: string }) {

frontend/src/pages/sub/SubConfigsTab.tsx

@@ -24,7 +24,7 @@ export default function SubConfigsTab({ links, onCopy }: SubConfigsTabProps) {
     <div className="sub-rows">
       <div className="sub-configs-bar">
         <Button
-          icon={<CopyOutlined />}
+          icon={<CopyOutlined aria-hidden />}
           onClick={() => onCopy(links.join('\n'), t('subscription.copyAllConfigsCopied'))}
         >
           {t('subscription.copyAllConfigs')}
@@ -44,7 +44,7 @@ export default function SubConfigsTab({ links, onCopy }: SubConfigsTabProps) {
               </span>
               <div className="sub-row-actions">
                 <Button
-                  icon={<CopyOutlined />}
+                  icon={<CopyOutlined aria-hidden />}
                   onClick={() => onCopy(link)}
                   aria-label={t('copy')}
                   title={t('copy')}

frontend/src/pages/sub/SubHeader.tsx

@@ -53,14 +53,20 @@ export default function SubHeader({ title, sId, email, lang, onLangChange }: Sub
     [],
   );
 
-  const themeIcon = !isDark ? <SunOutlined /> : !isUltra ? <MoonOutlined /> : <MoonFilled />;
+  const themeIcon = !isDark ? (
+    <SunOutlined aria-hidden />
+  ) : !isUltra ? (
+    <MoonOutlined aria-hidden />
+  ) : (
+    <MoonFilled aria-hidden />
+  );
   const initial = Array.from(title)[0]?.toUpperCase();
 
   return (
     <header className="sub-header">
       <div className="sub-brand">
         <span className="sub-brand-mark" aria-hidden="true">
-          {initial ?? <WifiOutlined />}
+          {initial ?? <WifiOutlined aria-hidden />}
         </span>
         <div className="sub-brand-text">
           <div className="sub-brand-title" dir="auto">
@@ -103,7 +109,7 @@ export default function SubHeader({ title, sId, email, lang, onLangChange }: Sub
             size="large"
             className="toolbar-btn"
             aria-label={t('pages.settings.language')}
-            icon={<TranslationOutlined />}
+            icon={<TranslationOutlined aria-hidden />}
           />
         </Popover>
       </div>

frontend/src/pages/sub/SubLinksTab.tsx

@@ -49,13 +49,13 @@ export default function SubLinksTab({ subUrl, subJsonUrl, subClashUrl, onCopy }:
                 href={appendRawView(row.url)}
                 target="_blank"
                 rel="noopener noreferrer"
-                icon={<DownloadOutlined />}
+                icon={<DownloadOutlined aria-hidden />}
                 aria-label={t('download')}
                 title={t('download')}
               />
             )}
             <Button
-              icon={<CopyOutlined />}
+              icon={<CopyOutlined aria-hidden />}
               onClick={() => onCopy(row.url)}
               aria-label={t('copy')}
               title={t('copy')}

frontend/src/pages/sub/SubPage.tsx

@@ -92,7 +92,7 @@ export default function SubPage() {
     if (subUrl || subJsonUrl || subClashUrl) {
       items.push({
         key: 'subscription',
-        icon: <LinkOutlined />,
+        icon: <LinkOutlined aria-hidden />,
         label: t('subscription.tabLinks'),
         children: (
           <SubLinksTab
@@ -107,7 +107,7 @@ export default function SubPage() {
     if (subUrl) {
       items.push({
         key: 'apps',
-        icon: <AppstoreOutlined />,
+        icon: <AppstoreOutlined aria-hidden />,
         label: t('subscription.tabApps'),
         children: <SubAppsTab apps={apps} initialPlatform={initialPlatform} onOpen={open} />,
       });
@@ -115,7 +115,7 @@ export default function SubPage() {
     if (links.length > 0) {
       items.push({
         key: 'configs',
-        icon: <UnorderedListOutlined />,
+        icon: <UnorderedListOutlined aria-hidden />,
         label: (
           <>
             {t('subscription.tabConfigs')}
@@ -153,13 +153,13 @@ export default function SubPage() {
               <footer className="sub-footer">
                 {updateHours > 0 && (
                   <span>
-                    <ClockCircleOutlined />
+                    <ClockCircleOutlined aria-hidden />
                     {t('subscription.updateInterval', { hours: updateHours })}
                   </span>
                 )}
                 {subSupportUrl && (
                   <a href={subSupportUrl} target="_blank" rel="noopener noreferrer">
-                    <CustomerServiceOutlined />
+                    <CustomerServiceOutlined aria-hidden />
                     {t('subscription.support')}
                   </a>
                 )}

frontend/src/pages/sub/SubQrButton.tsx

@@ -25,7 +25,12 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
 
   return (
     <>
-      <Button icon={<QrcodeOutlined />} aria-label="QR" title="QR" onClick={() => setOpen(true)} />
+      <Button
+        icon={<QrcodeOutlined aria-hidden />}
+        aria-label="QR"
+        title="QR"
+        onClick={() => setOpen(true)}
+      />
       <Modal
         open={open}
         onCancel={() => setOpen(false)}
@@ -49,6 +54,7 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
           />
         </div>
         <Input.TextArea
+          aria-label={t('subscription.tabLinks')}
           className="sub-qr-modal-link"
           value={value}
           readOnly
@@ -56,10 +62,15 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
           autoSize={{ minRows: 2, maxRows: 5 }}
         />
         <div className="sub-qr-modal-actions">
-          <Button type="primary" size="large" icon={<CopyOutlined />} onClick={() => onCopy(value)}>
+          <Button
+            type="primary"
+            size="large"
+            icon={<CopyOutlined aria-hidden />}
+            onClick={() => onCopy(value)}
+          >
             {t('copy')}
           </Button>
-          <Button size="large" icon={<DownloadOutlined />} onClick={saveQr}>
+          <Button size="large" icon={<DownloadOutlined aria-hidden />} onClick={saveQr}>
             {t('subscription.saveQr')}
           </Button>
         </div>

frontend/src/pages/xray/balancers/BalancerFormModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useId, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag } from 'antd';
@@ -68,6 +68,7 @@ export default function BalancerFormModal({
   onConfirm,
 }: BalancerFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const methods = useForm<BalancerFormValues>({ defaultValues: initialState(balancer) });
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const isEdit = balancer != null;
@@ -226,6 +227,7 @@ export default function BalancerFormModal({
               return (
                 <Form.Item
                   label={t('pages.xray.balancer.tag')}
+                  htmlFor={`${uid}-tag`}
                   required
                   validateStatus={errorMessage ? 'error' : showDuplicate ? 'warning' : ''}
                   help={
@@ -234,6 +236,7 @@ export default function BalancerFormModal({
                   hasFeedback
                 >
                   <Input
+                    id={`${uid}-tag`}
                     value={field.value}
                     onChange={(e) => field.onChange(e.target.value)}
                     onBlur={field.onBlur}
@@ -319,7 +322,7 @@ export default function BalancerFormModal({
                 <Button
                   size="small"
                   type="primary"
-                  icon={<PlusOutlined />}
+                  icon={<PlusOutlined aria-hidden />}
                   aria-label={t('add')}
                   onClick={() => methods.setValue('settings.baselines', [...baselines, ''])}
                 />
@@ -345,7 +348,7 @@ export default function BalancerFormModal({
                         )
                       }
                     >
-                      <MinusOutlined />
+                      <MinusOutlined aria-hidden />
                     </InputAddon>
                   </Space.Compact>
                 ))}
@@ -354,7 +357,7 @@ export default function BalancerFormModal({
                 <Button
                   size="small"
                   type="primary"
-                  icon={<PlusOutlined />}
+                  icon={<PlusOutlined aria-hidden />}
                   aria-label={t('add')}
                   onClick={() =>
                     methods.setValue('settings.costs', [
@@ -411,7 +414,7 @@ export default function BalancerFormModal({
                         )
                       }
                     >
-                      <MinusOutlined />
+                      <MinusOutlined aria-hidden />
                     </InputAddon>
                   </Space.Compact>
                 ))}

frontend/src/pages/xray/balancers/BalancersTab.tsx

@@ -324,7 +324,7 @@ export default function BalancersTab({
                 aria-label={t('edit')}
                 shape="circle"
                 size="small"
-                icon={<EditOutlined />}
+                icon={<EditOutlined aria-hidden />}
                 onClick={() => openEdit(index)}
               />
             )}
@@ -338,7 +338,7 @@ export default function BalancersTab({
                           key: 'edit',
                           label: (
                             <>
-                              <EditOutlined /> {t('edit')}
+                              <EditOutlined aria-hidden /> {t('edit')}
                             </>
                           ),
                           onClick: () => openEdit(index),
@@ -350,7 +350,7 @@ export default function BalancersTab({
                     danger: true,
                     label: (
                       <>
-                        <DeleteOutlined /> {t('delete')}
+                        <DeleteOutlined aria-hidden /> {t('delete')}
                       </>
                     ),
                     onClick: () => confirmDelete(index),
@@ -358,7 +358,12 @@ export default function BalancersTab({
                 ],
               }}
             >
-              <Button aria-label={t('more')} shape="circle" size="small" icon={<MoreOutlined />} />
+              <Button
+                aria-label={t('more')}
+                shape="circle"
+                size="small"
+                icon={<MoreOutlined aria-hidden />}
+              />
             </Dropdown>
           </div>
         </div>
@@ -458,6 +463,7 @@ export default function BalancersTab({
         return (
           <Select
             size="small"
+            aria-label={t('pages.xray.balancerOverride')}
             style={{ width: 170 }}
             placeholder={t('pages.xray.balancerOverridePh')}
             allowClear
@@ -475,20 +481,20 @@ export default function BalancersTab({
     <Space orientation="vertical" size="middle" style={{ width: '100%' }}>
       {rows.length === 0 ? (
         <Empty description={t('emptyBalancersDesc')}>
-          <Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>
+          <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAdd}>
             {t('pages.xray.Balancers')}
           </Button>
         </Empty>
       ) : (
         <>
           <Space>
-            <Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>
+            <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAdd}>
               {t('pages.xray.Balancers')}
             </Button>
             <Tooltip title={t('pages.xray.balancerLiveRefresh')}>
               <Button
                 aria-label={t('pages.xray.balancerLiveRefresh')}
-                icon={<SyncOutlined spin={liveLoading} />}
+                icon={<SyncOutlined aria-hidden spin={liveLoading} />}
                 onClick={refreshLive}
               />
             </Tooltip>
@@ -516,7 +522,7 @@ export default function BalancersTab({
           {
             key: 'balancers',
             label: catTabLabel(
-              <DeploymentUnitOutlined />,
+              <DeploymentUnitOutlined aria-hidden />,
               t('pages.xray.tabBalancerSettings'),
               isMobile,
             ),
@@ -524,7 +530,11 @@ export default function BalancersTab({
           },
           {
             key: 'observatory',
-            label: catTabLabel(<RadarChartOutlined />, t('pages.xray.tabObservatory'), isMobile),
+            label: catTabLabel(
+              <RadarChartOutlined aria-hidden />,
+              t('pages.xray.tabObservatory'),
+              isMobile,
+            ),
             children: (
               <ObservatorySettingsTab templateSettings={templateSettings} mutate={mutate} />
             ),

frontend/src/pages/xray/basics/BasicsTab.tsx

@@ -168,7 +168,7 @@ export default function BasicsTab({
   const items = [
     {
       key: '1',
-      label: catTabLabel(<SettingOutlined />, t('pages.xray.generalConfigs'), isMobile),
+      label: catTabLabel(<SettingOutlined aria-hidden />, t('pages.xray.generalConfigs'), isMobile),
       children: (
         <>
           <Alert
@@ -296,7 +296,7 @@ export default function BasicsTab({
     },
     {
       key: '2',
-      label: catTabLabel(<BarChartOutlined />, t('pages.xray.statistics'), isMobile),
+      label: catTabLabel(<BarChartOutlined aria-hidden />, t('pages.xray.statistics'), isMobile),
       children: (
         <>
           {[
@@ -351,7 +351,11 @@ export default function BasicsTab({
     },
     {
       key: 'connection',
-      label: catTabLabel(<ClockCircleOutlined />, t('pages.xray.connectionLimits'), isMobile),
+      label: catTabLabel(
+        <ClockCircleOutlined aria-hidden />,
+        t('pages.xray.connectionLimits'),
+        isMobile,
+      ),
       children: (
         <>
           <Alert
@@ -395,7 +399,7 @@ export default function BasicsTab({
     },
     {
       key: '3',
-      label: catTabLabel(<FileTextOutlined />, t('pages.xray.logConfigs'), isMobile),
+      label: catTabLabel(<FileTextOutlined aria-hidden />, t('pages.xray.logConfigs'), isMobile),
       children: (
         <>
           <Alert
@@ -498,10 +502,19 @@ export default function BasicsTab({
     },
     {
       key: 'reset',
-      label: catTabLabel(<ReloadOutlined />, t('pages.settings.resetDefaultConfig'), isMobile),
+      label: catTabLabel(
+        <ReloadOutlined aria-hidden />,
+        t('pages.settings.resetDefaultConfig'),
+        isMobile,
+      ),
       children: (
         <Space style={{ padding: '0 20px' }}>
-          <Button type="primary" danger icon={<ReloadOutlined />} onClick={confirmResetDefault}>
+          <Button
+            type="primary"
+            danger
+            icon={<ReloadOutlined aria-hidden />}
+            onClick={confirmResetDefault}
+          >
             {t('pages.settings.resetDefaultConfig')}
           </Button>
         </Space>

frontend/src/pages/xray/dns/DnsServerModal.tsx

@@ -221,14 +221,14 @@ export default function DnsServerModal({
             <Button
               size="small"
               type="primary"
-              icon={<PlusOutlined />}
+              icon={<PlusOutlined aria-hidden />}
               aria-label={t('add')}
               onClick={() => methods.setValue('domains', [...domains, ''])}
             />
             {domains.map((_, i) => (
               <Space.Compact key={i} block style={{ marginTop: 4 }}>
                 <FormField name={`domains.${i}`} noStyle>
-                  <Input />
+                  <Input aria-label={t('pages.xray.dns.domains')} />
                 </FormField>
                 <InputAddon
                   ariaLabel={t('remove')}
@@ -239,7 +239,7 @@ export default function DnsServerModal({
                     )
                   }
                 >
-                  <MinusOutlined />
+                  <MinusOutlined aria-hidden />
                 </InputAddon>
               </Space.Compact>
             ))}
@@ -249,14 +249,14 @@ export default function DnsServerModal({
             <Button
               size="small"
               type="primary"
-              icon={<PlusOutlined />}
+              icon={<PlusOutlined aria-hidden />}
               aria-label={t('add')}
               onClick={() => methods.setValue('expectedIPs', [...expectedIPs, ''])}
             />
             {expectedIPs.map((_, i) => (
               <Space.Compact key={i} block style={{ marginTop: 4 }}>
                 <FormField name={`expectedIPs.${i}`} noStyle>
-                  <Input />
+                  <Input aria-label={t('pages.xray.dns.expectIPs')} />
                 </FormField>
                 <InputAddon
                   ariaLabel={t('remove')}
@@ -267,7 +267,7 @@ export default function DnsServerModal({
                     )
                   }
                 >
-                  <MinusOutlined />
+                  <MinusOutlined aria-hidden />
                 </InputAddon>
               </Space.Compact>
             ))}
@@ -277,14 +277,14 @@ export default function DnsServerModal({
             <Button
               size="small"
               type="primary"
-              icon={<PlusOutlined />}
+              icon={<PlusOutlined aria-hidden />}
               aria-label={t('add')}
               onClick={() => methods.setValue('unexpectedIPs', [...unexpectedIPs, ''])}
             />
             {unexpectedIPs.map((_, i) => (
               <Space.Compact key={i} block style={{ marginTop: 4 }}>
                 <FormField name={`unexpectedIPs.${i}`} noStyle>
-                  <Input />
+                  <Input aria-label={t('pages.xray.dns.unexpectIPs')} />
                 </FormField>
                 <InputAddon
                   ariaLabel={t('remove')}
@@ -295,7 +295,7 @@ export default function DnsServerModal({
                     )
                   }
                 >
-                  <MinusOutlined />
+                  <MinusOutlined aria-hidden />
                 </InputAddon>
               </Space.Compact>
             ))}

frontend/src/pages/xray/dns/DnsTab.tsx

@@ -245,7 +245,11 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
     const out = [
       {
         key: '1',
-        label: catTabLabel(<SettingOutlined />, t('pages.xray.generalConfigs'), isMobile),
+        label: catTabLabel(
+          <SettingOutlined aria-hidden />,
+          t('pages.xray.generalConfigs'),
+          isMobile,
+        ),
         children: (
           <>
             <SettingListItem
@@ -376,13 +380,13 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
     if (dnsEnabled) {
       out.push({
         key: 'hosts',
-        label: catTabLabel(<ProfileOutlined />, t('pages.xray.dns.hosts'), isMobile),
+        label: catTabLabel(<ProfileOutlined aria-hidden />, t('pages.xray.dns.hosts'), isMobile),
         children:
           hostsList.length === 0 ? (
             <Empty description={t('pages.xray.dns.hostsEmpty')}>
               <Button
                 type="primary"
-                icon={<PlusOutlined />}
+                icon={<PlusOutlined aria-hidden />}
                 onClick={() => syncHosts([...hostsList, { domain: '', values: [] }])}
               >
                 {t('pages.xray.dns.hostsAdd')}
@@ -392,7 +396,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
             <Space orientation="vertical" size="middle" style={{ width: '100%' }}>
               <Button
                 type="primary"
-                icon={<PlusOutlined />}
+                icon={<PlusOutlined aria-hidden />}
                 onClick={() => syncHosts([...hostsList, { domain: '', values: [] }])}
               >
                 {t('pages.xray.dns.hostsAdd')}
@@ -426,7 +430,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
                   <Button
                     danger
                     aria-label={t('delete')}
-                    icon={<DeleteOutlined />}
+                    icon={<DeleteOutlined aria-hidden />}
                     onClick={() => syncHosts(hostsList.filter((_, i) => i !== idx))}
                   />
                 </div>
@@ -437,15 +441,18 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
 
       out.push({
         key: '2',
-        label: catTabLabel(<DatabaseOutlined />, 'DNS', isMobile),
+        label: catTabLabel(<DatabaseOutlined aria-hidden />, 'DNS', isMobile),
         children:
           dnsServers.length === 0 ? (
             <Empty description={t('emptyDnsDesc')}>
               <Space>
-                <Button type="primary" icon={<PlusOutlined />} onClick={openAddServer}>
+                <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAddServer}>
                   {t('pages.xray.dns.add')}
                 </Button>
-                <Button icon={<MenuOutlined />} onClick={() => setPresetsModalOpen(true)}>
+                <Button
+                  icon={<MenuOutlined aria-hidden />}
+                  onClick={() => setPresetsModalOpen(true)}
+                >
                   {t('pages.xray.dns.usePreset')}
                 </Button>
               </Space>
@@ -453,13 +460,16 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
           ) : (
             <Space orientation="vertical" size="middle" style={{ width: '100%' }}>
               <Space wrap>
-                <Button type="primary" icon={<PlusOutlined />} onClick={openAddServer}>
+                <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAddServer}>
                   {t('pages.xray.dns.add')}
                 </Button>
-                <Button icon={<MenuOutlined />} onClick={() => setPresetsModalOpen(true)}>
+                <Button
+                  icon={<MenuOutlined aria-hidden />}
+                  onClick={() => setPresetsModalOpen(true)}
+                >
                   {t('pages.xray.dns.usePreset')}
                 </Button>
-                <Button danger icon={<DeleteOutlined />} onClick={clearAllServers}>
+                <Button danger icon={<DeleteOutlined aria-hidden />} onClick={clearAllServers}>
                   {t('pages.xray.dns.clearAll')}
                 </Button>
               </Space>
@@ -477,17 +487,17 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
 
       out.push({
         key: '3',
-        label: catTabLabel(<ExperimentOutlined />, 'Fake DNS', isMobile),
+        label: catTabLabel(<ExperimentOutlined aria-hidden />, 'Fake DNS', isMobile),
         children:
           fakeDnsList.length === 0 ? (
             <Empty description={t('emptyFakeDnsDesc')}>
-              <Button type="primary" icon={<PlusOutlined />} onClick={addFakedns}>
+              <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={addFakedns}>
                 {t('pages.xray.fakedns.add')}
               </Button>
             </Empty>
           ) : (
             <Space orientation="vertical" size="middle" style={{ width: '100%' }}>
-              <Button type="primary" icon={<PlusOutlined />} onClick={addFakedns}>
+              <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={addFakedns}>
                 {t('pages.xray.fakedns.add')}
               </Button>
               <Table

frontend/src/pages/xray/dns/useDnsColumns.tsx

@@ -38,7 +38,7 @@ export function useDnsServerColumns({
                     key: 'edit',
                     label: (
                       <>
-                        <EditOutlined /> {t('edit')}
+                        <EditOutlined aria-hidden /> {t('edit')}
                       </>
                     ),
                     onClick: () => openEditServer(index),
@@ -48,7 +48,7 @@ export function useDnsServerColumns({
                     danger: true,
                     label: (
                       <>
-                        <DeleteOutlined /> {t('delete')}
+                        <DeleteOutlined aria-hidden /> {t('delete')}
                       </>
                     ),
                     onClick: () => deleteServer(index),
@@ -56,7 +56,12 @@ export function useDnsServerColumns({
                 ],
               }}
             >
-              <Button aria-label={t('more')} shape="circle" size="small" icon={<MoreOutlined />} />
+              <Button
+                aria-label={t('more')}
+                shape="circle"
+                size="small"
+                icon={<MoreOutlined aria-hidden />}
+              />
             </Dropdown>
           </Space>
         ),
@@ -107,7 +112,7 @@ export function useFakednsColumns({
               shape="circle"
               size="small"
               danger
-              icon={<DeleteOutlined />}
+              icon={<DeleteOutlined aria-hidden />}
               onClick={() => deleteFakedns(index)}
             />
           </Space>

frontend/src/pages/xray/outbounds/CountryPill.tsx

@@ -10,7 +10,7 @@ export default function CountryPill({ flag, name, warp }: CountryPillProps) {
   const isWarp = !!warp && warp.toLowerCase() !== 'off';
   return (
     <span className={isWarp ? 'country-pill warp-on' : 'country-pill'}>
-      {isWarp && <CloudOutlined className="warp-cloud-icon" />}
+      {isWarp && <CloudOutlined aria-hidden className="warp-cloud-icon" />}
       {flag && <span>{flag}</span>}
       <span>{name}</span>
     </span>

frontend/src/pages/xray/outbounds/OutboundCardList.tsx

@@ -169,7 +169,8 @@ export default function OutboundCardList({
                           key: 'top',
                           label: (
                             <>
-                              <VerticalAlignTopOutlined /> {t('pages.xray.outbound.moveToTop')}
+                              <VerticalAlignTopOutlined aria-hidden />{' '}
+                              {t('pages.xray.outbound.moveToTop')}
                             </>
                           ),
                           onClick: () => setFirst(index),
@@ -180,7 +181,7 @@ export default function OutboundCardList({
                     key: 'edit',
                     label: (
                       <>
-                        <EditOutlined /> {t('edit')}
+                        <EditOutlined aria-hidden /> {t('edit')}
                       </>
                     ),
                     onClick: () => openEdit(index),
@@ -189,7 +190,7 @@ export default function OutboundCardList({
                     key: 'reset',
                     label: (
                       <>
-                        <RetweetOutlined /> {t('pages.inbounds.resetTraffic')}
+                        <RetweetOutlined aria-hidden /> {t('pages.inbounds.resetTraffic')}
                       </>
                     ),
                     onClick: () => onResetTraffic(record.tag || ''),
@@ -199,7 +200,7 @@ export default function OutboundCardList({
                     danger: true,
                     label: (
                       <>
-                        <DeleteOutlined /> {t('delete')}
+                        <DeleteOutlined aria-hidden /> {t('delete')}
                       </>
                     ),
                     onClick: () => confirmDelete(index),
@@ -207,7 +208,12 @@ export default function OutboundCardList({
                 ],
               }}
             >
-              <Button shape="circle" size="small" icon={<MoreOutlined />} aria-label={t('more')} />
+              <Button
+                shape="circle"
+                size="small"
+                icon={<MoreOutlined aria-hidden />}
+                aria-label={t('more')}
+              />
             </Dropdown>
           </div>
           {outboundAddresses(record).length > 0 && (
@@ -232,7 +238,7 @@ export default function OutboundCardList({
               {testResult(outboundTestStates, record.key) ? (
                 <TestResultPopover result={testResult(outboundTestStates, record.key)!} />
               ) : isTesting(outboundTestStates, record.key) ? (
-                <LoadingOutlined />
+                <LoadingOutlined aria-hidden />
               ) : null}
               <Button
                 type="primary"
@@ -240,7 +246,7 @@ export default function OutboundCardList({
                 size="small"
                 loading={isTesting(outboundTestStates, record.key)}
                 disabled={isUntestable(record) || isTesting(outboundTestStates, record.key)}
-                icon={<ThunderboltOutlined />}
+                icon={<ThunderboltOutlined aria-hidden />}
                 aria-label={t('check')}
                 onClick={() => onTest(record.key, testMode)}
               />

frontend/src/pages/xray/outbounds/OutboundFormModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Modal, Radio, Select, Space, Tabs, message } from 'antd';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
@@ -85,6 +85,7 @@ export default function OutboundFormModal({
   onConfirm,
 }: OutboundFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const methods = useForm<OutboundFormValues>({ defaultValues: buildAddModeValues() });
   const [activeKey, setActiveKey] = useState('1');
@@ -419,6 +420,7 @@ export default function OutboundFormModal({
                           return (
                             <Form.Item
                               label={t('pages.xray.outbound.tag')}
+                              htmlFor={`${uid}-tag`}
                               required
                               validateStatus={
                                 errorMessage ? 'error' : duplicateTag ? 'warning' : undefined
@@ -431,6 +433,7 @@ export default function OutboundFormModal({
                               }
                             >
                               <Input
+                                id={`${uid}-tag`}
                                 value={field.value}
                                 onChange={(e) => field.onChange(e.target.value)}
                                 onBlur={field.onBlur}
@@ -492,8 +495,9 @@ export default function OutboundFormModal({
 
                       {streamAllowed && network && (
                         <>
-                          <Form.Item label={t('transmission')}>
+                          <Form.Item label={t('transmission')} htmlFor={`${uid}-network`}>
                             <Select
+                              id={`${uid}-network`}
                               value={network}
                               onChange={onNetworkChange}
                               options={
@@ -550,7 +554,11 @@ export default function OutboundFormModal({
                             <Space.Compact block>
                               {[0, 1, 2, 3].map((i) => (
                                 <FormField key={i} name={['settings', 'testseed', i]} noStyle>
-                                  <InputNumber min={1} style={{ width: '25%' }} />
+                                  <InputNumber
+                                    aria-label={`${t('pages.inbounds.form.visionTestseed')} ${i + 1}`}
+                                    min={1}
+                                    style={{ width: '25%' }}
+                                  />
                                 </FormField>
                               ))}
                             </Space.Compact>
@@ -615,6 +623,7 @@ export default function OutboundFormModal({
                       style={{ width: '100%', marginTop: 10 }}
                     >
                       <Input.Search
+                        aria-label={t('pages.clients.link')}
                         value={linkInput}
                         placeholder="vmess:// vless:// trojan:// ss:// hysteria2:// wireguard://"
                         enterButton="Import"

frontend/src/pages/xray/outbounds/OutboundsTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -124,6 +124,7 @@ export default function OutboundsTab({
   onRefreshXrayData,
 }: OutboundsTabProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [modal, modalContextHolder] = Modal.useModal();
   const [messageApi, messageContextHolder] = message.useMessage();
   const [testMode, setTestMode] = useState<OutboundTestMode>('tcp');
@@ -554,34 +555,44 @@ export default function OutboundsTab({
         <Row gutter={[12, 12]} align="middle" justify="space-between">
           <Col xs={24} sm={12}>
             <Space size="small" wrap>
-              <Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>
+              <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAdd}>
                 {!isMobile && t('pages.xray.Outbounds')}
               </Button>
-              <Button icon={<CloudOutlined />} onClick={openSubManager}>
+              <Button icon={<CloudOutlined aria-hidden />} onClick={openSubManager}>
                 {t('pages.xray.outboundSub.manage')}
               </Button>
               <Dropdown
                 trigger={['click']}
                 menu={{
                   items: [
-                    { key: 'warp', icon: <CloudOutlined />, label: 'WARP', onClick: onShowWarp },
-                    { key: 'nord', icon: <ApiOutlined />, label: 'NordVPN', onClick: onShowNord },
+                    {
+                      key: 'warp',
+                      icon: <CloudOutlined aria-hidden />,
+                      label: 'WARP',
+                      onClick: onShowWarp,
+                    },
+                    {
+                      key: 'nord',
+                      icon: <ApiOutlined aria-hidden />,
+                      label: 'NordVPN',
+                      onClick: onShowNord,
+                    },
                     {
                       key: 'pia',
-                      icon: <ApiOutlined />,
+                      icon: <ApiOutlined aria-hidden />,
                       label: t('pages.xray.pia.menu'),
                       onClick: onShowPia,
                     },
                     { type: 'divider' },
                     {
                       key: 'import',
-                      icon: <ImportOutlined />,
+                      icon: <ImportOutlined aria-hidden />,
                       label: t('pages.xray.importOutbounds'),
                       onClick: () => setImportOpen(true),
                     },
                     {
                       key: 'export',
-                      icon: <ExportOutlined />,
+                      icon: <ExportOutlined aria-hidden />,
                       label: t('pages.xray.exportOutbounds'),
                       disabled: outbounds.length === 0,
                       onClick: exportOutbounds,
@@ -589,7 +600,7 @@ export default function OutboundsTab({
                   ],
                 }}
               >
-                <Button icon={<MoreOutlined />}>{t('more')}</Button>
+                <Button icon={<MoreOutlined aria-hidden />}>{t('more')}</Button>
               </Dropdown>
             </Space>
           </Col>
@@ -610,7 +621,7 @@ export default function OutboundsTab({
               <Button
                 type="primary"
                 loading={testingAll}
-                icon={<PlayCircleOutlined />}
+                icon={<PlayCircleOutlined aria-hidden />}
                 onClick={() => onTestAll(testMode)}
               >
                 {!isMobile && t('pages.xray.outbound.testAll')}
@@ -622,7 +633,10 @@ export default function OutboundsTab({
                 title={t('pages.inbounds.resetAllTrafficContent')}
                 onConfirm={() => onResetTraffic('-alltags-')}
               >
-                <Button aria-label={t('pages.inbounds.resetTraffic')} icon={<RetweetOutlined />} />
+                <Button
+                  aria-label={t('pages.inbounds.resetTraffic')}
+                  icon={<RetweetOutlined aria-hidden />}
+                />
               </Popconfirm>
             </Space>
           </Col>
@@ -650,7 +664,7 @@ export default function OutboundsTab({
             locale={{
               emptyText: (
                 <div className="card-empty">
-                  <ExportOutlined style={{ fontSize: 32, marginBottom: 8 }} />
+                  <ExportOutlined aria-hidden style={{ fontSize: 32, marginBottom: 8 }} />
                   <div>{t('noData')}</div>
                 </div>
               ),
@@ -714,37 +728,42 @@ export default function OutboundsTab({
               </div>
             )}
             <Form layout="vertical" size="small">
-              <Form.Item label={t('pages.xray.outboundSub.remark')}>
+              <Form.Item label={t('pages.xray.outboundSub.remark')} htmlFor={`${uid}-remark`}>
                 <Input
+                  id={`${uid}-remark`}
                   value={newSub.remark}
                   onChange={(e) => setNewSub({ ...newSub, remark: e.target.value })}
                   placeholder={t('pages.xray.outboundSub.remarkPlaceholder')}
                 />
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.url')} required>
+              <Form.Item label={t('pages.xray.outboundSub.url')} htmlFor={`${uid}-url`} required>
                 <Input
+                  id={`${uid}-url`}
                   value={newSub.url}
                   onChange={(e) => setNewSub({ ...newSub, url: e.target.value })}
                   placeholder={t('pages.xray.outboundSub.urlPlaceholder')}
                 />
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.tagPrefix')}>
+              <Form.Item label={t('pages.xray.outboundSub.tagPrefix')} htmlFor={`${uid}-tagPrefix`}>
                 <Input
+                  id={`${uid}-tagPrefix`}
                   value={newSub.tagPrefix}
                   onChange={(e) => setNewSub({ ...newSub, tagPrefix: e.target.value })}
                   placeholder={t('pages.xray.outboundSub.tagPrefixPlaceholder')}
                 />
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.userAgent')}>
+              <Form.Item label={t('pages.xray.outboundSub.userAgent')} htmlFor={`${uid}-userAgent`}>
                 <Input
+                  id={`${uid}-userAgent`}
                   value={newSub.userAgent}
                   onChange={(e) => setNewSub({ ...newSub, userAgent: e.target.value })}
                   placeholder={defaultOutboundSubscriptionUserAgent}
                 />
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.interval')}>
+              <Form.Item label={t('pages.xray.outboundSub.interval')} htmlFor={`${uid}-interval`}>
                 <Space>
                   <InputNumber
+                    id={`${uid}-interval`}
                     min={0}
                     value={intervalHours}
                     onChange={onNumber((v) => setIntervalHM(v, intervalMinutes))}
@@ -752,6 +771,7 @@ export default function OutboundsTab({
                   />{' '}
                   {t('pages.xray.outboundSub.hours')}
                   <InputNumber
+                    aria-label={t('pages.xray.outboundSub.minutes')}
                     min={0}
                     max={59}
                     value={intervalMinutes}
@@ -764,14 +784,19 @@ export default function OutboundsTab({
                   {t('pages.xray.outboundSub.intervalHint')}
                 </div>
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.enabled')}>
+              <Form.Item label={t('pages.xray.outboundSub.enabled')} htmlFor={`${uid}-enabled`}>
                 <Switch
+                  id={`${uid}-enabled`}
                   checked={newSub.enabled}
                   onChange={(v) => setNewSub({ ...newSub, enabled: v })}
                 />
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.allowPrivate')}>
+              <Form.Item
+                label={t('pages.xray.outboundSub.allowPrivate')}
+                htmlFor={`${uid}-allowPrivate`}
+              >
                 <Switch
+                  id={`${uid}-allowPrivate`}
                   checked={newSub.allowPrivate}
                   onChange={(v) => setNewSub({ ...newSub, allowPrivate: v })}
                 />
@@ -779,8 +804,12 @@ export default function OutboundsTab({
                   {t('pages.xray.outboundSub.allowPrivateHint')}
                 </div>
               </Form.Item>
-              <Form.Item label={t('pages.hosts.fields.allowInsecure')}>
+              <Form.Item
+                label={t('pages.hosts.fields.allowInsecure')}
+                htmlFor={`${uid}-allowInsecure`}
+              >
                 <Switch
+                  id={`${uid}-allowInsecure`}
                   checked={newSub.allowInsecure}
                   onChange={(v) => setNewSub({ ...newSub, allowInsecure: v })}
                 />
@@ -788,8 +817,9 @@ export default function OutboundsTab({
                   {t('pages.hosts.hints.allowInsecure')}
                 </div>
               </Form.Item>
-              <Form.Item label={t('pages.xray.outboundSub.prepend')}>
+              <Form.Item label={t('pages.xray.outboundSub.prepend')} htmlFor={`${uid}-prepend`}>
                 <Switch
+                  id={`${uid}-prepend`}
                   checked={newSub.prepend}
                   onChange={(v) => setNewSub({ ...newSub, prepend: v })}
                 />
@@ -802,11 +832,21 @@ export default function OutboundsTab({
                   type="primary"
                   onClick={saveSub}
                   loading={savingSub}
-                  icon={editingSubId != null ? <EditOutlined /> : <PlusOutlined />}
+                  icon={
+                    editingSubId != null ? (
+                      <EditOutlined aria-hidden />
+                    ) : (
+                      <PlusOutlined aria-hidden />
+                    )
+                  }
                 >
                   {editingSubId != null ? t('save') : t('pages.xray.outboundSub.addButton')}
                 </Button>
-                <Button onClick={previewSub} loading={previewing} icon={<EyeOutlined />}>
+                <Button
+                  onClick={previewSub}
+                  loading={previewing}
+                  icon={<EyeOutlined aria-hidden />}
+                >
                   {t('pages.xray.outboundSub.preview')}
                 </Button>
                 {editingSubId != null && <Button onClick={resetSubForm}>{t('cancel')}</Button>}
@@ -851,7 +891,7 @@ export default function OutboundsTab({
               <Button
                 aria-label={t('refresh')}
                 size="small"
-                icon={<ReloadOutlined />}
+                icon={<ReloadOutlined aria-hidden />}
                 onClick={loadSubs}
                 loading={subsLoading}
               />
@@ -859,7 +899,7 @@ export default function OutboundsTab({
                 <Button
                   size="small"
                   type="primary"
-                  icon={<ReloadOutlined />}
+                  icon={<ReloadOutlined aria-hidden />}
                   onClick={refreshAllSubs}
                   loading={refreshingAll}
                 >
@@ -887,7 +927,7 @@ export default function OutboundsTab({
                           aria-label={t('pages.inbounds.form.moveUp')}
                           type="text"
                           size="small"
-                          icon={<ArrowUpOutlined />}
+                          icon={<ArrowUpOutlined aria-hidden />}
                           disabled={index === 0 || busyId === r.id}
                           onClick={() => moveSub(r.id, 'up')}
                         />
@@ -895,7 +935,7 @@ export default function OutboundsTab({
                           aria-label={t('pages.inbounds.form.moveDown')}
                           type="text"
                           size="small"
-                          icon={<ArrowDownOutlined />}
+                          icon={<ArrowDownOutlined aria-hidden />}
                           disabled={index === subs.length - 1 || busyId === r.id}
                           onClick={() => moveSub(r.id, 'down')}
                         />
@@ -928,11 +968,14 @@ export default function OutboundsTab({
                     render: (_: unknown, r: OutboundSub) =>
                       r.lastError ? (
                         <Tooltip title={r.lastError}>
-                          <WarningOutlined style={{ color: '#e04141' }} />
+                          <WarningOutlined style={{ color: '#e04141' }} aria-label={r.lastError} />
                         </Tooltip>
                       ) : (
                         <Tooltip title={t('pages.xray.outboundSub.statusOk')}>
-                          <CheckCircleOutlined style={{ color: '#008771' }} />
+                          <CheckCircleOutlined
+                            style={{ color: '#008771' }}
+                            aria-label={t('pages.xray.outboundSub.statusOk')}
+                          />
                         </Tooltip>
                       ),
                   },
@@ -950,6 +993,7 @@ export default function OutboundsTab({
                     render: (_: unknown, r: OutboundSub) => (
                       <Switch
                         size="small"
+                        aria-label={t('pages.xray.outboundSub.colEnabled')}
                         checked={!!r.enabled}
                         loading={busyId === r.id}
                         onChange={() => toggleEnabled(r)}
@@ -964,14 +1008,14 @@ export default function OutboundsTab({
                         <Button
                           aria-label={t('edit')}
                           size="small"
-                          icon={<EditOutlined />}
+                          icon={<EditOutlined aria-hidden />}
                           onClick={() => openEditSub(r)}
                           title={t('edit')}
                         />
                         <Button
                           aria-label={t('pages.xray.outboundSub.refreshNow')}
                           size="small"
-                          icon={<ReloadOutlined />}
+                          icon={<ReloadOutlined aria-hidden />}
                           loading={refreshingId === r.id}
                           onClick={() => refreshOne(r.id)}
                           title={t('pages.xray.outboundSub.refreshNow')}
@@ -986,7 +1030,7 @@ export default function OutboundsTab({
                             aria-label={t('delete')}
                             size="small"
                             danger
-                            icon={<DeleteOutlined />}
+                            icon={<DeleteOutlined aria-hidden />}
                           />
                         </Popconfirm>
                       </Space>

frontend/src/pages/xray/outbounds/SubscriptionOutbounds.tsx

@@ -109,7 +109,7 @@ export default function SubscriptionOutbounds({
     const r = testResult(subscriptionTestStates, key);
     if (!r)
       return isTesting(subscriptionTestStates, key) ? (
-        <LoadingOutlined />
+        <LoadingOutlined aria-label={t('loading')} />
       ) : (
         <span className="empty">—</span>
       );
@@ -127,7 +127,7 @@ export default function SubscriptionOutbounds({
           size={isMobile ? 'small' : undefined}
           loading={isTesting(subscriptionTestStates, key)}
           disabled={!record.tag || isUntestable(record) || isTesting(subscriptionTestStates, key)}
-          icon={<ThunderboltOutlined />}
+          icon={<ThunderboltOutlined aria-hidden />}
           onClick={() => onTestSubscription(record as unknown as Record<string, unknown>, testMode)}
         />
       </Tooltip>

frontend/src/pages/xray/outbounds/TestResultPopover.tsx

@@ -79,7 +79,7 @@ export default function TestResultPopover({ result: r, children }: TestResultPop
     >
       {children ?? (
         <span className={r.success ? 'pill-ok' : 'pill-fail'}>
-          {r.success ? <CheckCircleFilled /> : <CloseCircleFilled />}
+          {r.success ? <CheckCircleFilled aria-hidden /> : <CloseCircleFilled aria-hidden />}
           {r.success ? <span>{r.delay}&nbsp;ms</span> : <span>failed</span>}
         </span>
       )}

frontend/src/pages/xray/outbounds/protocols/amneziawg.tsx

@@ -39,7 +39,7 @@ export default function AmneziawgFields() {
           />
         </FormField>
         <Button
-          icon={<ReloadOutlined />}
+          icon={<ReloadOutlined aria-hidden />}
           aria-label={t('regenerate')}
           onClick={() => {
             const pair = Wireguard.generateKeypair();
@@ -93,7 +93,7 @@ export default function AmneziawgFields() {
         <Button
           size="small"
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           aria-label={t('add')}
           onClick={() =>
             appendPeer({
@@ -182,14 +182,14 @@ function PeerAllowedIPs({ peerIndex }: { peerIndex: number }) {
           </FormField>
           {fields.length > 1 && (
             <InputAddon ariaLabel={t('remove')} onClick={() => remove(ipIdx)}>
-              <MinusOutlined />
+              <MinusOutlined aria-hidden />
             </InputAddon>
           )}
         </Space.Compact>
       ))}
       <Button
         size="small"
-        icon={<PlusOutlined />}
+        icon={<PlusOutlined aria-hidden />}
         aria-label={t('add')}
         onClick={() => append('')}
       />

frontend/src/pages/xray/outbounds/protocols/dns.tsx

@@ -42,7 +42,7 @@ export default function DnsFields() {
         <Button
           size="small"
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           aria-label={t('add')}
           onClick={() => append({ action: 'direct', qType: '', domain: '', rCode: 0 })}
         />

frontend/src/pages/xray/outbounds/protocols/freedom.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AutoComplete, Button, Form, Input, InputNumber, Select, Switch } from 'antd';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
@@ -16,6 +17,7 @@ interface FragmentValue {
 
 export default function FreedomFields() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
 
   const fragment = (useWatch({ control, name: 'settings.fragment' }) ?? {}) as FragmentValue;
@@ -68,8 +70,9 @@ export default function FreedomFields() {
         />
       </FormField>
 
-      <Form.Item label="Fragment">
+      <Form.Item label="Fragment" htmlFor={`${uid}-fragment`}>
         <Switch
+          id={`${uid}-fragment`}
           checked={fragmentEnabled}
           onChange={(checked) => {
             setValue(
@@ -130,8 +133,9 @@ export default function FreedomFields() {
         </>
       )}
 
-      <Form.Item label={t('pages.settings.subFormats.noises')}>
+      <Form.Item label={t('pages.settings.subFormats.noises')} htmlFor={`${uid}-noises`}>
         <Switch
+          id={`${uid}-noises`}
           checked={noiseFields.length > 0}
           onChange={(checked) => {
             if (checked) {
@@ -146,7 +150,7 @@ export default function FreedomFields() {
             size="small"
             type="primary"
             className="ml-8"
-            icon={<PlusOutlined />}
+            icon={<PlusOutlined aria-hidden />}
             aria-label={t('add')}
             onClick={() =>
               appendNoise({ type: 'rand', packet: '10-20', delay: '10-16', applyTo: 'ip' })
@@ -212,7 +216,7 @@ export default function FreedomFields() {
         <Button
           size="small"
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           aria-label={t('add')}
           onClick={() =>
             appendFinalRule({ action: 'allow', network: '', port: '', ip: [], blockDelay: '' })

frontend/src/pages/xray/outbounds/protocols/wireguard.tsx

@@ -24,14 +24,14 @@ function AllowedIPsList({ peerIndex }: { peerIndex: number }) {
           </FormField>
           {fields.length > 1 && (
             <InputAddon ariaLabel={t('remove')} onClick={() => remove(ipIdx)}>
-              <MinusOutlined />
+              <MinusOutlined aria-hidden />
             </InputAddon>
           )}
         </Space.Compact>
       ))}
       <Button
         size="small"
-        icon={<PlusOutlined />}
+        icon={<PlusOutlined aria-hidden />}
         aria-label={t('add')}
         onClick={() => append('')}
       />
@@ -61,7 +61,7 @@ export default function WireguardFields() {
             />
           </FormField>
           <Button
-            icon={<ReloadOutlined />}
+            icon={<ReloadOutlined aria-hidden />}
             aria-label={t('regenerate')}
             onClick={() => {
               const pair = Wireguard.generateKeypair();
@@ -94,7 +94,7 @@ export default function WireguardFields() {
         <Button
           size="small"
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           aria-label={t('add')}
           onClick={() =>
             appendPeer({

frontend/src/pages/xray/outbounds/transport/hysteria.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Select, Switch } from 'antd';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -10,6 +11,7 @@ const MASQ_DOT = 'streamSettings.hysteriaSettings.masquerade';
 
 export default function HysteriaForm() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const masquerade = useWatch({ control, name: MASQ_DOT }) as { type?: string } | undefined;
   return (
@@ -33,8 +35,9 @@ export default function HysteriaForm() {
         <InputNumber min={2} max={600} style={{ width: '100%' }} />
       </FormField>
 
-      <Form.Item label={t('pages.inbounds.form.masquerade')}>
+      <Form.Item label={t('pages.inbounds.form.masquerade')} htmlFor={`${uid}-masquerade`}>
         <Switch
+          id={`${uid}-masquerade`}
           checked={!!masquerade}
           onChange={(checked) =>
             setValue(

frontend/src/pages/xray/outbounds/transport/masque.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, Select, Switch } from 'antd';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -12,6 +13,7 @@ const BASE = ['streamSettings', 'masqueSettings'] as const;
 // refuses user/pass next to warp; host and path then default to Cloudflare's endpoint.
 export default function MasqueForm() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const warp = useWatch({ control, name: 'streamSettings.masqueSettings.warp' });
   const warpOn = warp != null;
@@ -24,8 +26,14 @@ export default function MasqueForm() {
       <FormField label={t('path')} name={[...BASE, 'path']}>
         <Input placeholder={warpOn ? '/' : MASQUE_DEFAULT_PATH} />
       </FormField>
-      <Form.Item label="WARP" tooltip={t('pages.xray.outboundForm.masqueWarpDesc')}>
+      <Form.Item
+        label="WARP"
+        htmlFor={`${uid}-warp`}
+        tooltip={t('pages.xray.outboundForm.masqueWarpDesc')}
+      >
         <Switch
+          id={`${uid}-warp`}
+          aria-describedby={`${uid}-warp-hint`}
           checked={warpOn}
           onChange={(on) => {
             setValue(
@@ -38,6 +46,9 @@ export default function MasqueForm() {
             }
           }}
         />
+        <span id={`${uid}-warp-hint`} hidden>
+          {t('pages.xray.outboundForm.masqueWarpDesc')}
+        </span>
       </Form.Item>
       {warpOn ? (
         <>

frontend/src/pages/xray/outbounds/transport/raw.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, Switch } from 'antd';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -7,6 +8,7 @@ import { FormField } from '@/components/form/rhf';
 
 export default function RawForm() {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const type = (useWatch({
     control,
@@ -14,8 +16,9 @@ export default function RawForm() {
   }) ?? 'none') as string;
   return (
     <>
-      <Form.Item label={`HTTP ${t('camouflage')}`}>
+      <Form.Item label={`HTTP ${t('camouflage')}`} htmlFor={`${uid}-httpCamouflage`}>
         <Switch
+          id={`${uid}-httpCamouflage`}
           checked={type === 'http'}
           onChange={(checked) =>
             setValue(

frontend/src/pages/xray/outbounds/transport/sockopt.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Select, Switch } from 'antd';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
@@ -24,6 +25,7 @@ export default function SockoptForm({
   showDomainStrategy = true,
 }: SockoptFormProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const { control, setValue } = useFormContext();
   const sockopt = useWatch({ control, name: 'streamSettings.sockopt' });
   const hasSockopt = !!sockopt;
@@ -36,8 +38,9 @@ export default function SockoptForm({
   ).map((tg) => ({ value: tg, label: tg }));
   return (
     <>
-      <Form.Item label={t('pages.xray.outboundForm.sockopts')}>
+      <Form.Item label={t('pages.xray.outboundForm.sockopts')} htmlFor={`${uid}-sockopt`}>
         <Switch
+          id={`${uid}-sockopt`}
           checked={hasSockopt}
           onChange={(checked) => {
             setValue(
@@ -164,8 +167,9 @@ export default function SockoptForm({
           >
             <InputNumber min={0} />
           </FormField>
-          <Form.Item label="Happy Eyeballs">
+          <Form.Item label="Happy Eyeballs" htmlFor={`${uid}-happyEyeballs`}>
             <Switch
+              id={`${uid}-happyEyeballs`}
               checked={hasHe}
               onChange={(v) => {
                 setValue(

frontend/src/pages/xray/outbounds/useOutboundColumns.tsx

@@ -84,7 +84,7 @@ export function useOutboundColumns({
               <Button
                 shape="circle"
                 size="small"
-                icon={<EditOutlined />}
+                icon={<EditOutlined aria-hidden />}
                 aria-label={t('edit')}
                 onClick={() => openEdit(index)}
               />
@@ -98,7 +98,8 @@ export function useOutboundColumns({
                             key: 'top',
                             label: (
                               <>
-                                <VerticalAlignTopOutlined /> {t('pages.xray.outbound.moveToTop')}
+                                <VerticalAlignTopOutlined aria-hidden />{' '}
+                                {t('pages.xray.outbound.moveToTop')}
                               </>
                             ),
                             onClick: () => setFirst(index),
@@ -109,7 +110,7 @@ export function useOutboundColumns({
                       key: 'up',
                       label: (
                         <>
-                          <ArrowUpOutlined /> {t('pages.inbounds.form.moveUp')}
+                          <ArrowUpOutlined aria-hidden /> {t('pages.inbounds.form.moveUp')}
                         </>
                       ),
                       disabled: index === 0,
@@ -119,7 +120,7 @@ export function useOutboundColumns({
                       key: 'down',
                       label: (
                         <>
-                          <ArrowDownOutlined /> {t('pages.inbounds.form.moveDown')}
+                          <ArrowDownOutlined aria-hidden /> {t('pages.inbounds.form.moveDown')}
                         </>
                       ),
                       disabled: index === rows.length - 1,
@@ -129,7 +130,7 @@ export function useOutboundColumns({
                       key: 'reset',
                       label: (
                         <>
-                          <RetweetOutlined /> {t('pages.inbounds.resetTraffic')}
+                          <RetweetOutlined aria-hidden /> {t('pages.inbounds.resetTraffic')}
                         </>
                       ),
                       onClick: () => onResetTraffic(rows[index].tag || ''),
@@ -139,7 +140,7 @@ export function useOutboundColumns({
                       danger: true,
                       label: (
                         <>
-                          <DeleteOutlined /> {t('delete')}
+                          <DeleteOutlined aria-hidden /> {t('delete')}
                         </>
                       ),
                       onClick: () => confirmDelete(index),
@@ -150,7 +151,7 @@ export function useOutboundColumns({
                 <Button
                   shape="circle"
                   size="small"
-                  icon={<MoreOutlined />}
+                  icon={<MoreOutlined aria-hidden />}
                   aria-label={t('more')}
                 />
               </Dropdown>
@@ -317,7 +318,7 @@ export function useOutboundColumns({
           const r = testResult(outboundTestStates, record.key);
           if (!r)
             return isTesting(outboundTestStates, record.key) ? (
-              <LoadingOutlined />
+              <LoadingOutlined aria-label={t('loading')} />
             ) : (
               <span className="empty">—</span>
             );
@@ -338,7 +339,7 @@ export function useOutboundColumns({
               shape="circle"
               loading={isTesting(outboundTestStates, record.key)}
               disabled={isUntestable(record) || isTesting(outboundTestStates, record.key)}
-              icon={<ThunderboltOutlined />}
+              icon={<ThunderboltOutlined aria-hidden />}
               aria-label={t('check')}
               onClick={() => onTest(record.key, testMode)}
             />

frontend/src/pages/xray/overrides/NordModal.tsx

@@ -382,7 +382,7 @@ export default function NordModal({
                         type="primary"
                         className="nord-login-action"
                         loading={loading}
-                        icon={<LoginOutlined />}
+                        icon={<LoginOutlined aria-hidden />}
                         onClick={login}
                       >
                         {t('login')}
@@ -402,7 +402,7 @@ export default function NordModal({
                         type="primary"
                         className="nord-login-action"
                         loading={loading}
-                        icon={<SaveOutlined />}
+                        icon={<SaveOutlined aria-hidden />}
                         onClick={saveKey}
                       >
                         {t('save')}

frontend/src/pages/xray/overrides/PiaModal.tsx

@@ -340,7 +340,7 @@ export default function PiaModal({
                 type="primary"
                 className="mt-10"
                 loading={loading}
-                icon={<LoginOutlined />}
+                icon={<LoginOutlined aria-hidden />}
                 onClick={() => void login()}
               >
                 {t('login')}

frontend/src/pages/xray/overrides/WarpModal.tsx

@@ -373,7 +373,12 @@ export default function WarpModal({
       <Modal open={open} title="Cloudflare WARP" footer={null} onCancel={onClose}>
         <FormProvider {...methods}>
           {!hasWarp ? (
-            <Button type="primary" loading={loading} icon={<ApiOutlined />} onClick={register}>
+            <Button
+              type="primary"
+              loading={loading}
+              icon={<ApiOutlined aria-hidden />}
+              onClick={register}
+            >
               {t('pages.xray.warp.createAccount')}
             </Button>
           ) : (
@@ -404,7 +409,7 @@ export default function WarpModal({
                 type="primary"
                 danger
                 className="mt-8"
-                icon={<DeleteOutlined />}
+                icon={<DeleteOutlined aria-hidden />}
                 onClick={delConfig}
               >
                 {t('pages.xray.warp.deleteAccount')}
@@ -491,7 +496,7 @@ export default function WarpModal({
                 <Button
                   loading={loading}
                   type="primary"
-                  icon={<SyncOutlined />}
+                  icon={<SyncOutlined aria-hidden />}
                   onClick={getConfig}
                 >
                   {t('refresh')}
@@ -500,7 +505,7 @@ export default function WarpModal({
                   loading={loading}
                   type="primary"
                   className="ml-8"
-                  icon={<SyncOutlined />}
+                  icon={<SyncOutlined aria-hidden />}
                   onClick={changeIp}
                 >
                   {t('pages.xray.warp.changeIp', 'Change IP')}
@@ -573,7 +578,7 @@ export default function WarpModal({
                         type="primary"
                         loading={loading}
                         className="ml-8"
-                        icon={<PlusOutlined />}
+                        icon={<PlusOutlined aria-hidden />}
                         onClick={addOutbound}
                       >
                         {t('pages.xray.warp.addOutbound')}
@@ -591,7 +596,7 @@ export default function WarpModal({
             type="primary"
             className="mt-8"
             loading={loading}
-            icon={<PlusOutlined />}
+            icon={<PlusOutlined aria-hidden />}
             onClick={addMasqueOutbound}
           >
             {t('pages.xray.warp.addMasqueOutbound')}

frontend/src/pages/xray/routing/RouteTester.tsx

@@ -124,7 +124,7 @@ export default function RouteTester({ inboundTags, isMobile }: RouteTesterProps)
         <Col xs={fieldSpan} sm={3}>
           <Button
             type="primary"
-            icon={<AimOutlined />}
+            icon={<AimOutlined aria-hidden />}
             loading={testing}
             disabled={!dest.trim()}
             onClick={run}

frontend/src/pages/xray/routing/RoutingTab.tsx

@@ -363,7 +363,11 @@ export default function RoutingTab({
         items={[
           {
             key: 'basic',
-            label: catTabLabel(<ControlOutlined />, t('pages.xray.basicRouting'), isMobile),
+            label: catTabLabel(
+              <ControlOutlined aria-hidden />,
+              t('pages.xray.basicRouting'),
+              isMobile,
+            ),
             children: (
               <RoutingBasic
                 templateSettings={templateSettings}
@@ -373,11 +377,15 @@ export default function RoutingTab({
           },
           {
             key: 'rules',
-            label: catTabLabel(<UnorderedListOutlined />, t('pages.xray.Routings'), isMobile),
+            label: catTabLabel(
+              <UnorderedListOutlined aria-hidden />,
+              t('pages.xray.Routings'),
+              isMobile,
+            ),
             children: (
               <Space orientation="vertical" size="middle" style={{ width: '100%' }}>
                 <Space wrap>
-                  <Button type="primary" icon={<PlusOutlined />} onClick={openAdd}>
+                  <Button type="primary" icon={<PlusOutlined aria-hidden />} onClick={openAdd}>
                     {t('pages.xray.Routings')}
                   </Button>
                   <Dropdown
@@ -386,13 +394,13 @@ export default function RoutingTab({
                       items: [
                         {
                           key: 'import',
-                          icon: <ImportOutlined />,
+                          icon: <ImportOutlined aria-hidden />,
                           label: t('pages.xray.importRules'),
                           onClick: () => setImportOpen(true),
                         },
                         {
                           key: 'export',
-                          icon: <ExportOutlined />,
+                          icon: <ExportOutlined aria-hidden />,
                           label: t('pages.xray.exportRules'),
                           disabled: rules.length === 0,
                           onClick: exportRules,
@@ -400,7 +408,7 @@ export default function RoutingTab({
                       ],
                     }}
                   >
-                    <Button icon={<MoreOutlined />}>{t('more')}</Button>
+                    <Button icon={<MoreOutlined aria-hidden />}>{t('more')}</Button>
                   </Dropdown>
                 </Space>
 
@@ -444,7 +452,7 @@ export default function RoutingTab({
           },
           {
             key: 'tester',
-            label: catTabLabel(<AimOutlined />, t('pages.xray.routeTester'), isMobile),
+            label: catTabLabel(<AimOutlined aria-hidden />, t('pages.xray.routeTester'), isMobile),
             children: <RouteTester inboundTags={inboundTagOptions} isMobile={isMobile} />,
           },
         ]}

frontend/src/pages/xray/routing/RuleCardList.tsx

@@ -81,7 +81,7 @@ export default function RuleCardList({
                       key: 'edit',
                       label: (
                         <>
-                          <EditOutlined /> {t('edit')}
+                          <EditOutlined aria-hidden /> {t('edit')}
                         </>
                       ),
                       onClick: () => openEdit(index),
@@ -90,7 +90,7 @@ export default function RuleCardList({
                       key: 'up',
                       label: (
                         <>
-                          <ArrowUpOutlined /> {t('pages.inbounds.form.moveUp')}
+                          <ArrowUpOutlined aria-hidden /> {t('pages.inbounds.form.moveUp')}
                         </>
                       ),
                       disabled: index === 0,
@@ -100,7 +100,7 @@ export default function RuleCardList({
                       key: 'down',
                       label: (
                         <>
-                          <ArrowDownOutlined /> {t('pages.inbounds.form.moveDown')}
+                          <ArrowDownOutlined aria-hidden /> {t('pages.inbounds.form.moveDown')}
                         </>
                       ),
                       disabled: index === rows.length - 1,
@@ -111,7 +111,7 @@ export default function RuleCardList({
                       danger: true,
                       label: (
                         <>
-                          <DeleteOutlined /> {t('delete')}
+                          <DeleteOutlined aria-hidden /> {t('delete')}
                         </>
                       ),
                       onClick: () => confirmDelete(index),
@@ -122,12 +122,13 @@ export default function RuleCardList({
                 <Button
                   shape="circle"
                   size="small"
-                  icon={<MoreOutlined />}
+                  icon={<MoreOutlined aria-hidden />}
                   aria-label={t('more')}
                 />
               </Dropdown>
               <Switch
                 size="small"
+                aria-label={t('enable')}
                 checked={rule.enabled !== false}
                 onChange={(checked) => toggleRule(index, checked)}
                 disabled={isApiRule(rule)}

frontend/src/pages/xray/routing/RuleFormModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input, Modal, Select, Space, Switch, Tooltip } from 'antd';
-import { PlusOutlined, MinusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Modal, Select, Space, Switch } from 'antd';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { InputAddon } from '@/components/ui';
 import { GeoTokenInput } from '@/components/geodata';
@@ -195,33 +195,24 @@ export default function RuleFormModal({
 
           <FormField
             name="sourceIP"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('pages.xray.ruleForm.sourceIps')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.xray.ruleForm.sourceIps')}
+            tooltip={t('pages.xray.rules.useComma')}
           >
             <GeoTokenInput kind="ip" placeholder="0.0.0.0/8, fc00::/7, geoip:ir" />
           </FormField>
 
           <FormField
             name="sourcePort"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('pages.xray.ruleForm.sourcePort')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.xray.ruleForm.sourcePort')}
+            tooltip={t('pages.xray.rules.useComma')}
           >
             <Input placeholder="53,443,1000-2000" />
           </FormField>
 
           <FormField
             name="vlessRoute"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('pages.xray.ruleForm.vlessRoute')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.xray.ruleForm.vlessRoute')}
+            tooltip={t('pages.xray.rules.useComma')}
           >
             <Input placeholder="53,443,1000-2000" />
           </FormField>
@@ -238,7 +229,7 @@ export default function RuleFormModal({
             <Button
               size="small"
               aria-label={t('add')}
-              icon={<PlusOutlined />}
+              icon={<PlusOutlined aria-hidden />}
               onClick={() => methods.setValue('attrs', [...attrs, ['', ''] as [string, string]])}
             />
           </Form.Item>
@@ -270,7 +261,7 @@ export default function RuleFormModal({
                 />
                 <Button
                   aria-label={t('remove')}
-                  icon={<MinusOutlined />}
+                  icon={<MinusOutlined aria-hidden />}
                   onClick={() =>
                     methods.setValue(
                       'attrs',
@@ -282,35 +273,18 @@ export default function RuleFormModal({
             ))}
           </Form.Item>
 
-          <FormField
-            name="ip"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                IP <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
-          >
+          <FormField name="ip" label="IP" tooltip={t('pages.xray.rules.useComma')}>
             <GeoTokenInput kind="ip" placeholder="0.0.0.0/8, fc00::/7, geoip:ir" />
           </FormField>
 
-          <FormField
-            name="domain"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('domainName')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
-          >
+          <FormField name="domain" label={t('domainName')} tooltip={t('pages.xray.rules.useComma')}>
             <GeoTokenInput kind="domain" placeholder="google.com, geosite:cn" />
           </FormField>
 
           <FormField
             name="user"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('pages.xray.ruleForm.user')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.xray.ruleForm.user')}
+            tooltip={t('pages.xray.rules.useComma')}
             transform={{
               input: (value) => csv(typeof value === 'string' ? value : ''),
               output: (value) => (Array.isArray(value) ? value.join(',') : ''),
@@ -336,11 +310,8 @@ export default function RuleFormModal({
 
           <FormField
             name="port"
-            label={
-              <Tooltip title={t('pages.xray.rules.useComma')}>
-                {t('pages.inbounds.port')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.inbounds.port')}
+            tooltip={t('pages.xray.rules.useComma')}
           >
             <Input placeholder="53,443,1000-2000" />
           </FormField>
@@ -361,11 +332,8 @@ export default function RuleFormModal({
 
           <FormField
             name="balancerTag"
-            label={
-              <Tooltip title={t('pages.xray.ruleForm.balancerTagTooltip')}>
-                {t('pages.xray.ruleForm.balancerTag')} <QuestionCircleOutlined aria-hidden="true" />
-              </Tooltip>
-            }
+            label={t('pages.xray.ruleForm.balancerTag')}
+            tooltip={t('pages.xray.ruleForm.balancerTagTooltip')}
           >
             <Select options={balancerTags.map((tag) => ({ value: tag, label: tag || '(none)' }))} />
           </FormField>

frontend/src/pages/xray/routing/useRoutingColumns.tsx

@@ -84,7 +84,7 @@ export function useRoutingColumns({
               <Button
                 shape="circle"
                 size="small"
-                icon={<EditOutlined />}
+                icon={<EditOutlined aria-hidden />}
                 aria-label={t('edit')}
                 onClick={() => openEdit(index)}
               />
@@ -99,7 +99,7 @@ export function useRoutingColumns({
                           key: 'edit',
                           label: (
                             <>
-                              <EditOutlined /> {t('edit')}
+                              <EditOutlined aria-hidden /> {t('edit')}
                             </>
                           ),
                           onClick: () => openEdit(index),
@@ -110,7 +110,7 @@ export function useRoutingColumns({
                     key: 'up',
                     label: (
                       <>
-                        <ArrowUpOutlined /> {t('pages.inbounds.form.moveUp')}
+                        <ArrowUpOutlined aria-hidden /> {t('pages.inbounds.form.moveUp')}
                       </>
                     ),
                     disabled: index === 0,
@@ -120,7 +120,7 @@ export function useRoutingColumns({
                     key: 'down',
                     label: (
                       <>
-                        <ArrowDownOutlined /> {t('pages.inbounds.form.moveDown')}
+                        <ArrowDownOutlined aria-hidden /> {t('pages.inbounds.form.moveDown')}
                       </>
                     ),
                     disabled: index === rowsLength - 1,
@@ -131,7 +131,7 @@ export function useRoutingColumns({
                     danger: true,
                     label: (
                       <>
-                        <DeleteOutlined /> {t('delete')}
+                        <DeleteOutlined aria-hidden /> {t('delete')}
                       </>
                     ),
                     onClick: () => confirmDelete(index),
@@ -139,7 +139,12 @@ export function useRoutingColumns({
                 ],
               }}
             >
-              <Button shape="circle" size="small" icon={<MoreOutlined />} aria-label={t('more')} />
+              <Button
+                shape="circle"
+                size="small"
+                icon={<MoreOutlined aria-hidden />}
+                aria-label={t('more')}
+              />
             </Dropdown>
           </div>
         ),
@@ -152,6 +157,7 @@ export function useRoutingColumns({
         render: (_v, _r, index) => (
           <Switch
             size="small"
+            aria-label={t('enable')}
             checked={_r.enabled !== false}
             onChange={(checked) => toggleRule(index, checked)}
             disabled={isApiRule(_r)}