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/components/geodata/GeoTokenInput.tsx

@@ -30,6 +30,7 @@ export interface GeoTokenInputProps {
   kind: GeoTokenKind;
   placeholder?: string;
   id?: string;
+  'aria-describedby'?: string;
   ref?: Ref<InputRef>;
 }
 
@@ -40,6 +41,7 @@ export default function GeoTokenInput({
   kind,
   placeholder,
   id,
+  'aria-describedby': ariaDescribedBy,
   ref,
 }: GeoTokenInputProps) {
   const { t } = useTranslation();
@@ -92,6 +94,7 @@ export default function GeoTokenInput({
         <Input
           ref={ref}
           id={id}
+          aria-describedby={ariaDescribedBy}
           value={value}
           placeholder={placeholder}
           onChange={(event) => onChange?.(event.target.value)}
@@ -99,7 +102,7 @@ export default function GeoTokenInput({
         />
         <Tooltip title={t('pages.xray.geoBrowser.openTooltip')}>
           <Button
-            icon={<DatabaseOutlined />}
+            icon={<DatabaseOutlined aria-hidden />}
             aria-label={t('pages.xray.geoBrowser.openTooltip')}
             onClick={() => setBrowsing(true)}
           />