🙌 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

@ -1,11 +1,11 @@
import { useState, useId } from 'react';
import { useState, useId, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import * as Ariakit from '@ariakit/react';
import { Upload, Share2 } from 'lucide-react';
import { ShareButton } from '~/components/Conversations/ConvoOptions';
import { useMediaQuery, useLocalize } from '~/hooks';
import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
import { DropdownPopup } from '~/components/ui';
import { ExportModal } from '../Nav';
import store from '~/store';
export default function ExportAndShareMenu({
@ -19,6 +19,7 @@ export default function ExportAndShareMenu({
const [showShareDialog, setShowShareDialog] = useState(false);
const menuId = useId();
const exportButtonRef = useRef<HTMLButtonElement>(null);
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const conversation = useRecoilValue(store.conversationByIndex(0));
@ -68,6 +69,7 @@ export default function ExportAndShareMenu({
setIsOpen={setIsPopoverActive}
trigger={
<Ariakit.MenuButton
ref={exportButtonRef}
id="export-menu-button"
aria-label="Export options"
className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
@ -91,7 +93,8 @@ export default function ExportAndShareMenu({
open={showExports}
onOpenChange={onOpenChange}
conversation={conversation}
aria-label="Export conversation modal"
triggerRef={exportButtonRef}
aria-label={localize('com_ui_export_convo_modal')}
/>
)}
</>