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

@@ -156,7 +156,12 @@ export default function SubscriptionBalancersTab({
       width: 80,
       align: 'center' as const,
       render: (_: unknown, r: SubBalancer) => (
-        <Switch size="small" checked={r.enabled} onChange={() => toggleEnabled(r)} />
+        <Switch
+          size="small"
+          aria-label={t('pages.settings.subBalancers.enabled')}
+          checked={r.enabled}
+          onChange={() => toggleEnabled(r)}
+        />
       ),
     },
     {
@@ -168,7 +173,7 @@ export default function SubscriptionBalancersTab({
           <Button
             aria-label={t('edit')}
             size="small"
-            icon={<EditOutlined />}
+            icon={<EditOutlined aria-hidden />}
             title={t('edit')}
             onClick={() => {
               setEditing(r);
@@ -181,7 +186,12 @@ export default function SubscriptionBalancersTab({
             cancelText={t('cancel')}
             onConfirm={() => remove(r.id)}
           >
-            <Button aria-label={t('delete')} size="small" danger icon={<DeleteOutlined />} />
+            <Button
+              aria-label={t('delete')}
+              size="small"
+              danger
+              icon={<DeleteOutlined aria-hidden />}
+            />
           </Popconfirm>
         </Space>
       ),
@@ -212,7 +222,7 @@ export default function SubscriptionBalancersTab({
       <div style={{ marginBottom: 12 }}>
         <Button
           type="primary"
-          icon={<PlusOutlined />}
+          icon={<PlusOutlined aria-hidden />}
           onClick={() => {
             setEditing(null);
             setModalOpen(true);
@@ -332,7 +342,7 @@ export default function SubscriptionBalancersTab({
           {
             key: 'balancers',
             label: catTabLabel(
-              <DeploymentUnitOutlined />,
+              <DeploymentUnitOutlined aria-hidden />,
               t('pages.settings.subBalancers.tabBalancers'),
               isMobile,
             ),
@@ -341,7 +351,7 @@ export default function SubscriptionBalancersTab({
           {
             key: 'observatory',
             label: catTabLabel(
-              <RadarChartOutlined />,
+              <RadarChartOutlined aria-hidden />,
               t('pages.settings.subBalancers.tabObservatory'),
               isMobile,
             ),