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/ui/notifications/DiscordNotifications.tsx

@@ -13,7 +13,7 @@ import type { NotificationGroupConfig } from './types';
 
 const GROUPS: NotificationGroupConfig[] = [
   {
-    icon: <CloudServerOutlined />,
+    icon: <CloudServerOutlined aria-hidden />,
     title: 'eventGroupOutbound',
     events: [
       { key: 'outbound.down', label: 'eventOutboundDown', settingKey: '' },
@@ -21,12 +21,12 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <ThunderboltOutlined />,
+    icon: <ThunderboltOutlined aria-hidden />,
     title: 'eventGroupXray',
     events: [{ key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' }],
   },
   {
-    icon: <DesktopOutlined />,
+    icon: <DesktopOutlined aria-hidden />,
     title: 'eventGroupNode',
     events: [
       { key: 'node.down', label: 'eventNodeDown', settingKey: '' },
@@ -34,7 +34,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <DashboardOutlined />,
+    icon: <DashboardOutlined aria-hidden />,
     title: 'eventGroupSystem',
     events: [
       {
@@ -72,7 +72,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <SafetyOutlined />,
+    icon: <SafetyOutlined aria-hidden />,
     title: 'eventGroupSecurity',
     events: [{ key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' }],
   },

frontend/src/components/ui/notifications/EmailNotifications.tsx

@@ -13,7 +13,7 @@ import type { NotificationGroupConfig } from './types';
 
 const GROUPS: NotificationGroupConfig[] = [
   {
-    icon: <CloudServerOutlined />,
+    icon: <CloudServerOutlined aria-hidden />,
     title: 'eventGroupOutbound',
     events: [
       {
@@ -36,12 +36,12 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <ThunderboltOutlined />,
+    icon: <ThunderboltOutlined aria-hidden />,
     title: 'eventGroupXray',
     events: [{ key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' }],
   },
   {
-    icon: <DesktopOutlined />,
+    icon: <DesktopOutlined aria-hidden />,
     title: 'eventGroupNode',
     events: [
       { key: 'node.down', label: 'eventNodeDown', settingKey: '' },
@@ -49,7 +49,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <DashboardOutlined />,
+    icon: <DashboardOutlined aria-hidden />,
     title: 'eventGroupSystem',
     events: [
       {
@@ -87,7 +87,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <SafetyOutlined />,
+    icon: <SafetyOutlined aria-hidden />,
     title: 'eventGroupSecurity',
     events: [{ key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' }],
   },

frontend/src/components/ui/notifications/TelegramNotifications.tsx

@@ -13,7 +13,7 @@ import type { NotificationGroupConfig } from './types';
 
 const GROUPS: NotificationGroupConfig[] = [
   {
-    icon: <CloudServerOutlined />,
+    icon: <CloudServerOutlined aria-hidden />,
     title: 'eventGroupOutbound',
     events: [
       {
@@ -36,12 +36,12 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <ThunderboltOutlined />,
+    icon: <ThunderboltOutlined aria-hidden />,
     title: 'eventGroupXray',
     events: [{ key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' }],
   },
   {
-    icon: <DesktopOutlined />,
+    icon: <DesktopOutlined aria-hidden />,
     title: 'eventGroupNode',
     events: [
       { key: 'node.down', label: 'eventNodeDown', settingKey: '' },
@@ -49,7 +49,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <DashboardOutlined />,
+    icon: <DashboardOutlined aria-hidden />,
     title: 'eventGroupSystem',
     events: [
       {
@@ -87,7 +87,7 @@ const GROUPS: NotificationGroupConfig[] = [
     ],
   },
   {
-    icon: <SafetyOutlined />,
+    icon: <SafetyOutlined aria-hidden />,
     title: 'eventGroupSecurity',
     events: [{ key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' }],
   },