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/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;
 }