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/sub/SubQrButton.tsx

@@ -25,7 +25,12 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
 
   return (
     <>
-      <Button icon={<QrcodeOutlined />} aria-label="QR" title="QR" onClick={() => setOpen(true)} />
+      <Button
+        icon={<QrcodeOutlined aria-hidden />}
+        aria-label="QR"
+        title="QR"
+        onClick={() => setOpen(true)}
+      />
       <Modal
         open={open}
         onCancel={() => setOpen(false)}
@@ -49,6 +54,7 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
           />
         </div>
         <Input.TextArea
+          aria-label={t('subscription.tabLinks')}
           className="sub-qr-modal-link"
           value={value}
           readOnly
@@ -56,10 +62,15 @@ export default function SubQrButton({ value, label, onCopy }: SubQrButtonProps)
           autoSize={{ minRows: 2, maxRows: 5 }}
         />
         <div className="sub-qr-modal-actions">
-          <Button type="primary" size="large" icon={<CopyOutlined />} onClick={() => onCopy(value)}>
+          <Button
+            type="primary"
+            size="large"
+            icon={<CopyOutlined aria-hidden />}
+            onClick={() => onCopy(value)}
+          >
             {t('copy')}
           </Button>
-          <Button size="large" icon={<DownloadOutlined />} onClick={saveQr}>
+          <Button size="large" icon={<DownloadOutlined aria-hidden />} onClick={saveQr}>
             {t('subscription.saveQr')}
           </Button>
         </div>