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/clients/ConfigBlock.tsx

@@ -38,12 +38,17 @@ export default function ConfigBlock({
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     <div className="config-block-actions" onClick={(e: MouseEvent) => e.stopPropagation()}>
       <Tooltip title={t('copy')}>
-        <Button size="small" icon={<CopyOutlined />} aria-label={t('copy')} onClick={copy} />
+        <Button
+          size="small"
+          icon={<CopyOutlined aria-hidden />}
+          aria-label={t('copy')}
+          onClick={copy}
+        />
       </Tooltip>
       <Tooltip title={t('download')}>
         <Button
           size="small"
-          icon={<DownloadOutlined />}
+          icon={<DownloadOutlined aria-hidden />}
           aria-label={t('download')}
           onClick={() => FileManager.downloadTextFile(text, fileName)}
         />
@@ -56,7 +61,11 @@ export default function ConfigBlock({
           content={<QrPanel value={text} remark={qrRemark || label} size={220} />}
         >
           <Tooltip title={t('pages.clients.qrCode')}>
-            <Button size="small" icon={<QrcodeOutlined />} aria-label={t('pages.clients.qrCode')} />
+            <Button
+              size="small"
+              icon={<QrcodeOutlined aria-hidden />}
+              aria-label={t('pages.clients.qrCode')}
+            />
           </Tooltip>
         </Popover>
       )}