Files
3x-ui/frontend/src/main.tsx
T
Alireza Ahmadi e2184777a0 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.
2026-10-23 18:29:47 +02:00

63 lines
1.8 KiB
TypeScript

import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router/dom';
import { message } from 'antd';
import 'antd/dist/reset.css';
import '@/styles/utils.css';
import '@/styles/page-shell.css';
import '@/styles/page-cards.css';
import { setupHttp } from '@/api/http-init';
import { readyI18n } from '@/i18n/react';
import { AntdRootConfig } from '@/i18n/AntdRootConfig';
import { ThemeProvider } from '@/hooks/useTheme';
import { QueryProvider } from '@/api/QueryProvider';
import { router } from '@/routes';
// A stale tab keeps this entry's old chunk URLs after a deploy. Reload once per
// panel base path and entry URL; the same bundle must not loop on a real outage.
const chunkRecoveryKey = `xui:chunk-recovery:${window.X_UI_BASE_PATH || '/'}:${import.meta.url}`;
let chunkRecoveryCommitted = false;
window.addEventListener('vite:preloadError', (event) => {
if (chunkRecoveryCommitted) return;
chunkRecoveryCommitted = true;
let shouldReload = false;
try {
if (sessionStorage.getItem(chunkRecoveryKey) == null) {
sessionStorage.setItem(chunkRecoveryKey, '1');
shouldReload = true;
}
} catch {
chunkRecoveryCommitted = false;
return;
}
if (!shouldReload) {
chunkRecoveryCommitted = false;
return;
}
event.preventDefault();
location.reload();
});
setupHttp();
const messageContainer = document.getElementById('message');
if (messageContainer) {
message.config({ getContainer: () => messageContainer });
}
readyI18n().then(() => {
const root = document.getElementById('app');
if (root) {
createRoot(root).render(
<AntdRootConfig>
<ThemeProvider>
<QueryProvider>
<RouterProvider router={router} />
</QueryProvider>
</ThemeProvider>
</AntdRootConfig>,
);
}
});