mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-10-24 14:55:02 +03:00
Alireza Ahmadi
e2184777a0
* 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.
26 lines
1001 B
TypeScript
26 lines
1001 B
TypeScript
import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
|
|
import { Tooltip } from 'antd';
|
|
|
|
/* Builds a settings category tab label: icon + text on desktop, and on
|
|
mobile just the icon with the text moved into a tooltip — mirroring the
|
|
old top tab bar's icons-only behaviour. */
|
|
export function catTabLabel(icon: ReactNode, text: ReactNode, iconsOnly: boolean): ReactNode {
|
|
if (iconsOnly) {
|
|
// Callers hide the icon for the desktop label; here it is the tab's only name.
|
|
const labelledIcon =
|
|
typeof text === 'string' && isValidElement(icon)
|
|
? cloneElement(icon as ReactElement<{ 'aria-label'?: string; 'aria-hidden'?: boolean }>, {
|
|
'aria-label': text,
|
|
'aria-hidden': undefined,
|
|
})
|
|
: icon;
|
|
return <Tooltip title={text}>{labelledIcon}</Tooltip>;
|
|
}
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
|
{icon}
|
|
<span>{text}</span>
|
|
</span>
|
|
);
|
|
}
|