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