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/DateTimePicker.tsx

@@ -19,6 +19,9 @@ interface DateTimePickerProps {
   disabled?: boolean;
   allowClear?: boolean;
   maxDate?: Dayjs;
+  id?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 const LIGHT_THEME = {
@@ -57,6 +60,9 @@ export default function DateTimePicker({
   disabled = false,
   allowClear = true,
   maxDate,
+  id,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
 }: DateTimePickerProps) {
   const { t } = useTranslation();
   const { datepicker } = useDatepicker();
@@ -97,7 +103,11 @@ export default function DateTimePicker({
   useEffect(() => {
     if (datepicker !== 'jalalian') return;
     const input = jalaliRef.current?.querySelector('input');
-    if (input) input.placeholder = placeholder;
+    if (!input) return;
+    input.placeholder = placeholder;
+    if (id) input.id = id;
+    if (ariaLabel) input.setAttribute('aria-label', ariaLabel);
+    if (ariaDescribedBy) input.setAttribute('aria-describedby', ariaDescribedBy);
   });
 
   if (datepicker === 'jalalian') {
@@ -137,7 +147,7 @@ export default function DateTimePicker({
               setClearNonce((n) => n + 1);
             }}
           >
-            <CloseCircleFilled />
+            <CloseCircleFilled aria-hidden />
           </button>
         )}
       </div>
@@ -156,6 +166,9 @@ export default function DateTimePicker({
       disabled={disabled}
       allowClear={allowClear}
       maxDate={maxDate}
+      id={id}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
       style={{ width: '100%' }}
     />
   );

frontend/src/components/form/HeaderMapEditor.tsx

@@ -125,21 +125,23 @@ export default function HeaderMapEditor({ mode, value, onChange }: HeaderMapEdit
           <Input
             value={row.name}
             placeholder="Name"
+            aria-label={t('pages.inbounds.form.headerName')}
             onChange={(e) => setRow(idx, { name: e.target.value })}
           />
           <Input
             value={row.value}
             placeholder="Value"
+            aria-label={t('pages.inbounds.form.headerValue')}
             onChange={(e) => setRow(idx, { value: e.target.value })}
           />
           <Button
             aria-label={t('remove')}
-            icon={<MinusOutlined />}
+            icon={<MinusOutlined aria-hidden />}
             onClick={() => removeRow(idx)}
           />
         </Space.Compact>
       ))}
-      <Button size="small" type="primary" icon={<PlusOutlined />} onClick={addRow}>
+      <Button size="small" type="primary" icon={<PlusOutlined aria-hidden />} onClick={addRow}>
         Add
       </Button>
     </>

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}

frontend/src/components/form/rhf/FormField.tsx

@@ -49,8 +49,13 @@ export function FormField<T extends FieldValues = FieldValues>({
   const { t } = useTranslation();
   const dottedName = toDotted(name) as Path<T>;
   const generatedId = useId();
-  const explicitId = (children as ReactElement<{ id?: string }>).props.id;
-  const fieldId = explicitId ?? generatedId;
+  const hintId = useId();
+  const childOwnProps = (children as ReactElement<{ id?: string; 'aria-describedby'?: string }>)
+    .props;
+  const fieldId = childOwnProps.id ?? generatedId;
+  const describedBy = tooltip
+    ? [childOwnProps['aria-describedby'], hintId].filter(Boolean).join(' ')
+    : undefined;
 
   return (
     <Controller
@@ -74,6 +79,7 @@ export function FormField<T extends FieldValues = FieldValues>({
           onBlur: field.onBlur,
           ref: field.ref,
         };
+        if (describedBy) childProps['aria-describedby'] = describedBy;
         return (
           <Form.Item
             label={label}
@@ -88,6 +94,12 @@ export function FormField<T extends FieldValues = FieldValues>({
             style={style}
           >
             {cloneElement(children as ReactElement<Record<string, unknown>>, childProps)}
+            {/* The tooltip only opens on hover, so screen readers get its text as a description. */}
+            {tooltip && (
+              <span id={hintId} hidden>
+                {tooltip}
+              </span>
+            )}
           </Form.Item>
         );
       }}