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
@@ -533,7 +533,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(clientSettings.tgId, t)}
/>
@@ -552,7 +552,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(link.link, t)}
/>
@@ -573,7 +573,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(subLink, t)}
/>
@@ -595,7 +595,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(subJsonLink, t)}
/>
@@ -714,7 +714,7 @@ export default function InboundInfoModal({
<Button
size="small"
className="value-copy"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(encryptionLabel, t)}
/>
@@ -984,7 +984,7 @@ export default function InboundInfoModal({
<Button
size="small"
type="text"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(`${account.user}:${account.pass}`, t)}
/>
@@ -1100,7 +1100,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(`${account.user}:${account.pass}`, t)}
/>
@@ -1201,7 +1201,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(cfg, t)}
/>
@@ -1209,7 +1209,7 @@ export default function InboundInfoModal({
<Tooltip title={t('download')}>
<Button
size="small"
icon={<DownloadOutlined />}
icon={<DownloadOutlined aria-hidden />}
aria-label={t('download')}
onClick={() =>
downloadText(cfg, peerConfFileName(idx, j, all.length))
@@ -1230,7 +1230,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(link, t)}
/>
@@ -1261,7 +1261,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(cfg, t)}
/>
@@ -1269,7 +1269,7 @@ export default function InboundInfoModal({
<Tooltip title={t('download')}>
<Button
size="small"
icon={<DownloadOutlined />}
icon={<DownloadOutlined aria-hidden />}
aria-label={t('download')}
onClick={() => downloadText(cfg, peerConfFileName(idx, j, all.length))}
/>
@@ -1288,7 +1288,7 @@ export default function InboundInfoModal({
<Tooltip title={t('copy')}>
<Button
size="small"
icon={<CopyOutlined />}
icon={<CopyOutlined aria-hidden />}
aria-label={t('copy')}
onClick={() => copyText(link, t)}
/>