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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Input, InputNumber, Modal, Select, Switch, message } from 'antd';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
@@ -59,6 +59,7 @@ export default function SubBalancerFormModal({
   onConfirm,
 }: SubBalancerFormModalProps) {
   const { t } = useTranslation();
+  const uid = useId();
   const [messageApi, messageContextHolder] = message.useMessage();
   const methods = useForm<SubBalancerFormValues>({ defaultValues: initialState(balancer) });
   const isEdit = balancer != null;
@@ -199,6 +200,7 @@ export default function SubBalancerFormModal({
                   return (
                     <div key={id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                       <span
+                        id={`${uid}-weight-${id}`}
                         title={option?.title}
                         style={{
                           minWidth: 0,
@@ -214,6 +216,8 @@ export default function SubBalancerFormModal({
                         name={`memberWeights.${id}`}
                         render={({ field }) => (
                           <InputNumber
+                            aria-labelledby={`${uid}-weight-${id}`}
+                            aria-describedby={`${uid}-weights-hint`}
                             min={0.1}
                             step={0.1}
                             precision={1}
@@ -227,6 +231,9 @@ export default function SubBalancerFormModal({
                   );
                 })}
               </div>
+              <span id={`${uid}-weights-hint`} hidden>
+                {t('pages.settings.subBalancers.weightsHelp')}
+              </span>
             </Form.Item>
           )}