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/i18n/AntdRootConfig.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { ConfigProvider } from 'antd';
+import type { ConfigProviderProps } from 'antd/es/config-provider';
+import type { Locale } from 'antd/es/locale';
+
+const antdLocaleLoaders: Record<string, () => Promise<{ default: Locale }>> = {
+  'ar-EG': () => import('antd/es/locale/ar_EG'),
+  'es-ES': () => import('antd/es/locale/es_ES'),
+  'fa-IR': () => import('antd/es/locale/fa_IR'),
+  'id-ID': () => import('antd/es/locale/id_ID'),
+  'ja-JP': () => import('antd/es/locale/ja_JP'),
+  'pt-BR': () => import('antd/es/locale/pt_BR'),
+  'ru-RU': () => import('antd/es/locale/ru_RU'),
+  'tr-TR': () => import('antd/es/locale/tr_TR'),
+  'uk-UA': () => import('antd/es/locale/uk_UA'),
+  'vi-VN': () => import('antd/es/locale/vi_VN'),
+  'zh-CN': () => import('antd/es/locale/zh_CN'),
+  'zh-TW': () => import('antd/es/locale/zh_TW'),
+};
+
+// Undefined keeps antd's built-in en_US.
+let antdLocale: Locale | undefined;
+
+export async function loadAntdLocale(language: string): Promise<void> {
+  antdLocale = (await antdLocaleLoaders[language]?.())?.default;
+}
+
+// A Form.Item tooltip icon sits inside its <label>, so its "question-circle" name
+// became part of every hinted field's name. FormField exposes the hint as a description.
+const FORM_CONFIG: ConfigProviderProps['form'] = {
+  tooltip: { icon: <QuestionCircleOutlined aria-hidden /> },
+};
+
+export function AntdRootConfig({ children }: { children: ReactNode }) {
+  return (
+    <ConfigProvider locale={antdLocale} form={FORM_CONFIG}>
+      {children}
+    </ConfigProvider>
+  );
+}

frontend/src/i18n/react.ts

@@ -3,6 +3,7 @@ import { initReactI18next } from 'react-i18next';
 
 import { LanguageManager } from '@/utils';
 import type { LanguageScope } from '@/utils';
+import { loadAntdLocale } from './AntdRootConfig';
 import enUS from '../../../internal/web/translation/en-US.json';
 
 const FALLBACK = 'en-US';
@@ -43,6 +44,9 @@ export async function readyI18n(scope: LanguageScope = 'panel') {
       await i18next.changeLanguage(active);
     }
   }
+  // The html files ship lang="en"; screen readers pick their voice from it (s-ui#1293).
+  document.documentElement.lang = i18next.language;
+  await loadAntdLocale(i18next.language);
   return i18next;
 }