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/form/RemarkTemplateField.tsx

@@ -22,6 +22,9 @@ interface RemarkTemplateFieldProps {
   multiline?: boolean;
   rows?: number;
   metadataOnly?: boolean;
+  id?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 /**
@@ -37,6 +40,9 @@ export default function RemarkTemplateField({
   multiline = false,
   rows,
   metadataOnly = false,
+  id,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
 }: RemarkTemplateFieldProps) {
   const { t } = useTranslation();
   const inputRef = useRef<InputRef>(null);
@@ -76,7 +82,7 @@ export default function RemarkTemplateField({
         <Button
           type="text"
           size="small"
-          icon={<CodeOutlined />}
+          icon={<CodeOutlined aria-hidden />}
           aria-label={t('pages.hosts.remarkVars.title')}
           style={{ marginInlineEnd: -7 }}
         />
@@ -90,6 +96,9 @@ export default function RemarkTemplateField({
         <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
           <Input.TextArea
             ref={textAreaRef}
+            id={id}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
             value={value}
             maxLength={maxLength}
             placeholder={placeholder}
@@ -101,6 +110,9 @@ export default function RemarkTemplateField({
       ) : (
         <Input
           ref={inputRef}
+          id={id}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           value={value}
           maxLength={maxLength}
           placeholder={placeholder}