🙌 a11y: Accessibility Improvements (#4978)

* 🔃 fix: Safeguard against null token in SSE refresh token handling

* 🔃 fix: Update import path for AnnounceOptions in LiveAnnouncer component

* 🔃 a11y: Add aria-live attribute for accessibility in error messages

* fix: prevent double screen reader notification for toast

* 🔃 a11y: Enhance accessibility for main menus and buttons with ARIA roles and labels

* refactor: better alt text for logo on login page #4095

* refactor: remove unused import for DropdownNoState in Voices component

* fix: Focus management issue in the Export Options Modal #4100
This commit is contained in:
Danny Avila 2024-12-13 15:44:22 -05:00 committed by GitHub
parent 763693cc1b
commit 0a5bc503b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 102 additions and 26 deletions

View file

@ -9,8 +9,9 @@ import Footer from './Footer';
const ErrorRender = ({ children }: { children: React.ReactNode }) => (
<div className="mt-16 flex justify-center">
<div
className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
role="alert"
aria-live="assertive"
className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
>
{children}
</div>
@ -36,8 +37,9 @@ function AuthLayout({
}) {
const localize = useLocalize();
const hasStartupConfigError = startupConfigError !== null && startupConfigError !== undefined;
const DisplayError = () => {
if (startupConfigError !== null && startupConfigError !== undefined) {
if (hasStartupConfigError) {
return <ErrorRender>{localize('com_auth_error_login_server')}</ErrorRender>;
} else if (error === 'com_auth_error_invalid_reset_token') {
return (
@ -49,7 +51,7 @@ function AuthLayout({
{localize('com_auth_to_try_again')}
</ErrorRender>
);
} else if (error) {
} else if (error != null && error) {
return <ErrorRender>{localize(error)}</ErrorRender>;
}
return null;
@ -60,7 +62,11 @@ function AuthLayout({
<Banner />
<BlinkAnimation active={isFetching}>
<div className="mt-6 h-10 w-full bg-cover">
<img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />
<img
src="/assets/logo.svg"
className="h-full w-full object-contain"
alt={localize('com_ui_logo', startupConfig?.appTitle ?? 'LibreChat')}
/>
</div>
</BlinkAnimation>
<DisplayError />
@ -70,7 +76,7 @@ function AuthLayout({
<div className="flex flex-grow items-center justify-center">
<div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
{!startupConfigError && !isFetching && (
{!hasStartupConfigError && !isFetching && (
<h1
className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
style={{ userSelect: 'none' }}