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.
This commit is contained in:
Alireza Ahmadi
2026-10-23 18:29:47 +02:00
committed by GitHub
parent 775b2b0b26
commit e2184777a0
156 changed files with 2373 additions and 863 deletions
@@ -48,7 +48,11 @@ export default function SubscriptionGeneralTab({
items={[
{
key: '1',
label: catTabLabel(<SettingOutlined />, t('pages.settings.panelSettings'), isMobile),
label: catTabLabel(
<SettingOutlined aria-hidden />,
t('pages.settings.panelSettings'),
isMobile,
),
children: (
<>
<SettingListItem
@@ -153,7 +157,11 @@ export default function SubscriptionGeneralTab({
},
{
key: '2',
label: catTabLabel(<InfoCircleOutlined />, t('pages.settings.information'), isMobile),
label: catTabLabel(
<InfoCircleOutlined aria-hidden />,
t('pages.settings.information'),
isMobile,
),
children: (
<>
<SettingListItem
@@ -273,7 +281,7 @@ export default function SubscriptionGeneralTab({
},
{
key: '3',
label: catTabLabel(<IdcardOutlined />, t('pages.settings.profile'), isMobile),
label: catTabLabel(<IdcardOutlined aria-hidden />, t('pages.settings.profile'), isMobile),
children: (
<>
<SettingListItem
@@ -379,7 +387,11 @@ export default function SubscriptionGeneralTab({
},
{
key: '4',
label: catTabLabel(<SafetyCertificateOutlined />, t('pages.settings.certs'), isMobile),
label: catTabLabel(
<SafetyCertificateOutlined aria-hidden />,
t('pages.settings.certs'),
isMobile,
),
children: (
<>
<SettingListItem
@@ -407,7 +419,7 @@ export default function SubscriptionGeneralTab({
},
{
key: '5',
label: catTabLabel(<BranchesOutlined />, 'Happ', isMobile),
label: catTabLabel(<BranchesOutlined aria-hidden />, 'Happ', isMobile),
children: (
<HappSettingsContent
allSetting={allSetting}
@@ -419,7 +431,7 @@ export default function SubscriptionGeneralTab({
},
{
key: '6',
label: catTabLabel(<NodeIndexOutlined />, 'Clash / Mihomo', isMobile),
label: catTabLabel(<NodeIndexOutlined aria-hidden />, 'Clash / Mihomo', isMobile),
children: (
<>
<SettingListItem
@@ -452,7 +464,7 @@ export default function SubscriptionGeneralTab({
},
{
key: '7',
label: catTabLabel(<CompassOutlined />, 'Incy', isMobile),
label: catTabLabel(<CompassOutlined aria-hidden />, 'Incy', isMobile),
children: (
<IncySettingsContent
allSetting={allSetting}