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/test/document-lang.test.tsx

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+// Screen readers choose their voice from <html lang>; the shipped html says "en"
+// for every locale, so NVDA read Persian panels with an English voice (s-ui#1293).
+describe('readyI18n page language', () => {
+  afterEach(() => {
+    document.cookie = 'lang=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+    document.cookie = 'subLang=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+    document.documentElement.lang = 'en';
+  });
+
+  it.each([
+    ['panel', 'lang', 'fa-IR'],
+    ['subscription', 'subLang', 'zh-TW'],
+  ] as const)('sets <html lang> to the active %s locale', async (scope, cookie, locale) => {
+    vi.resetModules();
+    document.cookie = `${cookie}=${locale}; path=/`;
+    const { readyI18n } = await import('@/i18n/react');
+
+    await readyI18n(scope);
+
+    expect(document.documentElement.lang).toBe(locale);
+  });
+
+  it('falls back to en-US when the cookie names an unknown locale', async () => {
+    vi.resetModules();
+    document.cookie = 'lang=xx-XX; path=/';
+    const { readyI18n } = await import('@/i18n/react');
+
+    await readyI18n('panel');
+
+    expect(document.documentElement.lang).toBe('en-US');
+  });
+});