fix(frontend): make inbound forms accessible to screen readers (#7025)

Expose selectable options and selected values, associate validation guidance with controls, and contain keyboard focus in inbound dialogs. Preserve create and edit serialization and add Chromium keyboard and accessibility checks.

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

@@ -1,3 +1,4 @@
+import { NativeSelect } from '@/components/form/NativeSelect';
 import { useState, useId } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -112,7 +113,9 @@ export default function RealityForm({
         name={['streamSettings', 'realitySettings', 'settings', 'fingerprint']}
         label="uTLS"
       >
-        <Select options={Object.values(UTLS_FINGERPRINT).map((fp) => ({ value: fp, label: fp }))} />
+        <NativeSelect
+          options={Object.values(UTLS_FINGERPRINT).map((fp) => ({ value: fp, label: fp }))}
+        />
       </FormField>
       <Form.Item
         htmlFor={`${uid}-target`}

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

@@ -1,3 +1,4 @@
+import { NativeSelect } from '@/components/form/NativeSelect';
 import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -154,7 +155,7 @@ function CertRow({
         name={['streamSettings', 'tlsSettings', 'certificates', index, 'usage']}
         label={t('pages.inbounds.form.usageOption')}
       >
-        <Select
+        <NativeSelect
           style={{ width: '50%' }}
           options={Object.values(USAGE_OPTION).map((u) => ({ value: u, label: u }))}
         />
@@ -212,7 +213,7 @@ function EchSockoptSection() {
             name={['streamSettings', 'tlsSettings', 'echSockopt', 'domainStrategy']}
             label={t('pages.xray.wireguard.domainStrategy')}
           >
-            <Select
+            <NativeSelect
               options={Object.values(DOMAIN_STRATEGY_OPTION).map((v) => ({ value: v, label: v }))}
             />
           </FormField>
@@ -354,14 +355,14 @@ export default function TlsForm({
       <Form.Item htmlFor={`${uid}-minVersion`} label={t('pages.inbounds.form.minMaxVersion')}>
         <Space.Compact block>
           <FormField name={['streamSettings', 'tlsSettings', 'minVersion']} noStyle>
-            <Select
+            <NativeSelect
               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
+            <NativeSelect
               aria-label={t('pages.inbounds.form.maxVersion')}
               style={{ width: '50%' }}
               options={Object.values(TLS_VERSION_OPTION).map((v) => ({ value: v, label: v }))}
@@ -370,7 +371,7 @@ export default function TlsForm({
         </Space.Compact>
       </Form.Item>
       <FormField name={['streamSettings', 'tlsSettings', 'settings', 'fingerprint']} label="uTLS">
-        <Select
+        <NativeSelect
           options={[
             { value: '', label: 'None' },
             ...Object.values(UTLS_FINGERPRINT).map((fp) => ({ value: fp, label: fp })),