mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-31 07:38:52 +01:00
🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)
* feat: add light/dark differentiation on text color for login footer links for more accessible contrast in light mode * feat: add darker color focus ring on ThemeSelector in light mode for more accessible contrast * feat: increase contrast on text color for rendered error messages in light and dark mode so that they pass the 4.5:1 accessibility contrast threshold against their backgrounds * feat: add more accessible color vars to style.css for better contrast against light/dark backgrounds * feat: un-nest DropdownMenu from ListCard and make them siblings instead for better accessibility * feat: tweak --border-heavy in light mode so that it uses --gray-410 rather than --gray-400 so that the contrast ratio threshold is hit for accessibility * feat: switch email and password input border to border-heavy for more accessible contrast on Login page * fix: add proper focus ring for Action menu button in Prompts Sidenav * fix: align light and dark focus rings with surrounding elements on preview/edit menu dropdown button in Prompt Card * fix: remove aria-hidden on parent div with focusable child element according to accessibility guidelines * fix: add missing aria-readonly false property that should have been in previous accessibility PR * feat: add horizontal padding on rowRenderer's CellMeasurer div so that focus ring on rows doesnt clip behind virtualized table borders side-to-side (still need to figure out vertical clipping on final row / a better solution to be able to get overflows to work properly within the virtualized table) * feat: remove render prop override so that Share and Delete Buttons in Conversation dropdown can be pressed with Enter keystroke * fix: undo additional colors and changes to --surface-hover the initial changes came from a misunderstanding of contrast threshold requirements for hover effect accessibility * feat: better layout for non-nested prompt card / action menu combination * fix: add proper focus restoration behavior for Preview modal on close * fix: undo change to --border-heavy in light mode * fix: set borders for login input boxes back to light * feat: add announcement for state change when link copied to clipboard in conversation share modal * feat: add announcement to Refresh Link button * feat: add announcement for archiving chats * feat: make date sections in conversation history list <h2> rather than generic <div> for improved screen reader support * feat: ensure Share Link modal is accessible at high zoom percentage and low viewport width / height requirements by adding max height and overflow attributes to allow scrolling * feat: bold toast text so that it hits font size accessibility threshold (above 14 px when bolded - change makes text 16 px bold) so that the more disruptive contrast change of the toast background color is no longer necessary. The background color would need to achieve a 4.5:1 contrast ratio, which would significantly affect the established aesthetic of the current toast system if achieved. * fix: do not render side nav when it is hidden to avoid keyboard navigation with screen reader * fix: add side nav button state change announcements and don't render components that were previosuly reachable via keyboard navigation while in the side nav * feat: add tooltip anchor for Model Select * fix: only hide the model selector, export, and temp chat buttons when in mobile view and the sidenav is expanded * feat: add aria-haspopup support for MenuItems and add aria-haspopup: 'dialog' for Share and Delete buttons in ConvoOptions * feat: add label for DataTable search so that it does not rely on placeholder attribute for function identification * feat: make X buttons on dialogs 24x24px to achieve AA compliance * feat: add announcements for the search bar for model selector * feat: persistent label for DataTable * feat: make filter files text contrast compliant * feat: add non-color visual indicator to AudioRecorder listening state * feat: add aria-expanded attribute to tool call dropdown for screen reader * feat: add high contrast and rounded outlines for focus indicators on Run Code and Copy Code buttons for code blocks * fix: change Button to anchor tag in Shared Links component when linking to original conversation * fix: allow overflow in datatable cells so that focus indicators dont get cut off * feat: round out focus outline for link name in SharedLinks modal * feat: add aria-controls and aria-haspopup: "dialog" to SharedLinks delete button and modal * feat: add aria-controls for dropdown menu items on ConvoOptions for share and delete modals * feat: add trigger ref to 2FA button and modal in settings menu so focus returns to button on modal close * feat: add refs so that open sidebar and close sidebar buttons transfer focus to one another * chore: formatting * feat: make sure settings modal is accessible at 200% zoom for screen size 1366x768 viewport * feat: round out focus outline for link names in archived chats modal * feat: add result announcements for screen reader in DataTable search * feat: simplify layout for checkbox / api key components for better accessibility * feat: return focus to chat input on prompt variables modal close * feat: add persistent labels to TextareaAutosize Inputs in Variable form * feat: tighten max width so side scrolling not necessary at 400% zoom for VariableForm modal * feat: add persistent labels to prompt management page * feat: announce results found for search bars in prompts page and improve them in datatable * feat: de-nest DashGroupItem buttons in Prompts page to allow better navigation and comply with accessibility standard * feat: add heading for new prompt creation page for screen readers * feat: remove non-compliant description truncation for small screen sizes by making labels static on small enough viewport width * feat: add mobile view sidebar for prompts page * feat: add bolded text on select for AdvancedSwitch so that there is a visual indicator of selection and it does not rely solely on color as an indication of state * feat: add persistent labels to ModelSelector search inputs * feat: align aria-label with visual label for speech recognition users * feat: make MemoryCreateDialog accessible at 400% zoom (introduce max viewport height attr and make scrollable) * feat: add persistent label to Filter input for DataTable in file attach sidebar menu * feat: add persistent label for bookmark filter input in bookmarks sidebar menu * feat: add alert for screen readers for invalid inputs when editting bookmarks * feat: bold font in BookmarkForm error readout to pass contrast compliance thresholds for 14pt text * feat: align aria-label with visual label for BookmarkForm Ttile input * feat: add 400% zoom support for ALL modals utilizing OriginalDialog to prevent clipping * feat: remove state change on aria label and give consistent labelling for button, offload state change notification to the announcement div and make more assertive * feat: add aria-labels which convey that the buttons are sortable (divergence from visual text because iconography is used to signify sort functionality) * feat: add supplemental visuals to indicate link is clickable other than color in SharedLinks * feat: increase saturation to hit contrast threshold minimums on Link color in SharedLinks * feat: stop DataTable from disappearing at 400% zoom in SharedLinks * feat: increase contrast to hit contrast threshold minimums on Animated Search Input visual indicators * feat: add aria-label for AnimatedSearchInput (doesn't require explicit labelling because of Search icon) * fix: stop long example variable declaration from clipping at high zoom in variables info * feat: add aria-label to bettter describe sort button functionality for vision impaired users * chore: remove unused translation key * chore: address ESLint comments * fix: modify test to account for new alert on theme toggle switch for login page * chore: interpolate translation key
This commit is contained in:
Dustin Healy
Danny Avila
parent
ac68e629e6
commit
2989ebd649
62 changed files with 935 additions and 414 deletions
|
|
@ -33,9 +33,9 @@ LoadingSpinner.displayName = 'LoadingSpinner';
|
|||
const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<div className="mt-2 pl-2 pt-1 text-text-secondary" style={{ fontSize: '0.7rem' }}>
|
||||
<h2 className="mt-2 pl-2 pt-1 text-text-secondary" style={{ fontSize: '0.7rem' }}>
|
||||
{localize(groupName as TranslationKeys) || groupName}
|
||||
</div>
|
||||
</h2>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
return (
|
||||
<CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
|
||||
{({ registerChild }) => (
|
||||
<div ref={registerChild} style={style}>
|
||||
<div ref={registerChild} style={style} className="px-2">
|
||||
{rendering}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -199,6 +199,7 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
rowHeight={getRowHeight}
|
||||
rowRenderer={rowRenderer}
|
||||
overscanRowCount={10}
|
||||
aria-readonly={false}
|
||||
className="outline-none"
|
||||
style={{ outline: 'none' }}
|
||||
aria-label="Conversations"
|
||||
|
|
|
|||
|
|
@ -191,7 +191,9 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
|
|||
? 'pointer-events-auto max-w-[28px] scale-x-100 opacity-100'
|
||||
: 'pointer-events-none max-w-0 scale-x-0 opacity-0 group-focus-within:pointer-events-auto group-focus-within:max-w-[28px] group-focus-within:scale-x-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:max-w-[28px] group-hover:scale-x-100 group-hover:opacity-100',
|
||||
)}
|
||||
aria-hidden={!(isPopoverActive || isActiveConvo)}
|
||||
// Removing aria-hidden to fix accessibility issue: ARIA hidden element must not be focusable or contain focusable elements
|
||||
// but not sure what its original purpose was, so leaving the property commented out until it can be cleared safe to delete.
|
||||
// aria-hidden={!(isPopoverActive || isActiveConvo)}
|
||||
>
|
||||
{!renaming && <ConvoOptions {...convoOptionsProps} />}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ function ConvoOptions({
|
|||
const deleteButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const [showShareDialog, setShowShareDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [announcement, setAnnouncement] = useState('');
|
||||
|
||||
const archiveConvoMutation = useArchiveConvoMutation();
|
||||
|
||||
|
|
@ -94,6 +95,10 @@ function ConvoOptions({
|
|||
{ conversationId: convoId, isArchived: true },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setAnnouncement(localize('com_ui_convo_archived'));
|
||||
setTimeout(() => {
|
||||
setAnnouncement('');
|
||||
}, 10000);
|
||||
if (currentConvoId === convoId || currentConvoId === 'new') {
|
||||
newConversation();
|
||||
navigate('/c/new', { replace: true });
|
||||
|
|
@ -137,7 +142,8 @@ function ConvoOptions({
|
|||
show: startupConfig && startupConfig.sharedLinksEnabled,
|
||||
hideOnClick: false,
|
||||
ref: shareButtonRef,
|
||||
render: (props) => <button {...props} />,
|
||||
ariaHasPopup: 'dialog' as const,
|
||||
ariaControls: 'share-conversation-dialog',
|
||||
},
|
||||
{
|
||||
label: localize('com_ui_rename'),
|
||||
|
|
@ -170,7 +176,8 @@ function ConvoOptions({
|
|||
icon: <Trash className="icon-sm mr-2 text-text-primary" aria-hidden="true" />,
|
||||
hideOnClick: false,
|
||||
ref: deleteButtonRef,
|
||||
render: (props) => <button {...props} />,
|
||||
ariaHasPopup: 'dialog' as const,
|
||||
ariaControls: 'delete-conversation-dialog',
|
||||
},
|
||||
],
|
||||
[
|
||||
|
|
@ -190,6 +197,9 @@ function ConvoOptions({
|
|||
|
||||
return (
|
||||
<>
|
||||
<span className="sr-only" aria-live="polite" aria-atomic="true">
|
||||
{announcement}
|
||||
</span>
|
||||
<DropdownPopup
|
||||
portal={true}
|
||||
mountByState={true}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export function DeleteConversationDialog({
|
|||
<OGDialogHeader>
|
||||
<OGDialogTitle>{localize('com_ui_delete_conversation')}</OGDialogTitle>
|
||||
</OGDialogHeader>
|
||||
<div className="w-full truncate">
|
||||
<div id="delete-conversation-dialog" className="w-full truncate">
|
||||
<Trans
|
||||
i18nKey="com_ui_delete_confirm_strong"
|
||||
values={{ item: title }}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,15 @@ export default function ShareButton({
|
|||
const [showQR, setShowQR] = useState(false);
|
||||
const [sharedLink, setSharedLink] = useState('');
|
||||
const [isCopying, setIsCopying] = useState(false);
|
||||
const [announcement, setAnnouncement] = useState('');
|
||||
const copyLink = useCopyToClipboard({ text: sharedLink });
|
||||
const copyLinkAndAnnounce = (setIsCopying: React.Dispatch<React.SetStateAction<boolean>>) => {
|
||||
setAnnouncement(localize('com_ui_link_copied'));
|
||||
copyLink(setIsCopying);
|
||||
setTimeout(() => {
|
||||
setAnnouncement('');
|
||||
}, 1000);
|
||||
};
|
||||
const latestMessage = useRecoilValue(store.latestMessageFamily(0));
|
||||
const { data: share, isLoading } = useGetSharedLinkQuery(conversationId);
|
||||
|
||||
|
|
@ -60,9 +68,9 @@ export default function ShareButton({
|
|||
showCloseButton={true}
|
||||
showCancelButton={false}
|
||||
title={localize('com_ui_share_link_to_chat')}
|
||||
className="max-w-[550px]"
|
||||
className="max-h-[90vh] max-w-[550px] overflow-y-auto"
|
||||
main={
|
||||
<div>
|
||||
<div id="share-conversation-dialog">
|
||||
<div className="h-full py-2 text-text-primary">
|
||||
{(() => {
|
||||
if (isLoading === true) {
|
||||
|
|
@ -74,7 +82,7 @@ export default function ShareButton({
|
|||
: localize('com_ui_share_create_message');
|
||||
})()}
|
||||
</div>
|
||||
<div className="relative items-center rounded-lg p-2">
|
||||
<div className="relative items-center overflow-auto rounded-lg p-2">
|
||||
{showQR && (
|
||||
<div className="mb-4 flex flex-col items-center">
|
||||
<QRCodeSVG
|
||||
|
|
@ -90,6 +98,9 @@ export default function ShareButton({
|
|||
{shareId && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-surface-secondary p-2">
|
||||
<div className="flex-1 break-all text-sm text-text-secondary">{sharedLink}</div>
|
||||
<span className="sr-only" aria-live="polite" aria-atomic="true">
|
||||
{announcement}
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
|
|
@ -98,7 +109,7 @@ export default function ShareButton({
|
|||
if (isCopying) {
|
||||
return;
|
||||
}
|
||||
copyLink(setIsCopying);
|
||||
copyLinkAndAnnounce(setIsCopying);
|
||||
}}
|
||||
className={cn('shrink-0', isCopying ? 'cursor-default' : '')}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ export default function SharedLinkButton({
|
|||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [announcement, setAnnouncement] = useState('');
|
||||
const shareId = share?.shareId ?? '';
|
||||
|
||||
const { mutateAsync: mutate, isLoading: isCreateLoading } = useCreateSharedLinkMutation({
|
||||
|
|
@ -85,6 +86,10 @@ export default function SharedLinkButton({
|
|||
const updateShare = await mutateAsync({ shareId });
|
||||
const newLink = generateShareLink(updateShare.shareId);
|
||||
setSharedLink(newLink);
|
||||
setAnnouncement(localize('com_ui_link_refreshed'));
|
||||
setTimeout(() => {
|
||||
setAnnouncement('');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const createShareLink = async () => {
|
||||
|
|
@ -129,19 +134,24 @@ export default function SharedLinkButton({
|
|||
<TooltipAnchor
|
||||
description={localize('com_ui_refresh_link')}
|
||||
render={(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
onClick={() => updateSharedLink()}
|
||||
aria-label={localize('com_ui_refresh_link')}
|
||||
variant="outline"
|
||||
disabled={isUpdateLoading}
|
||||
>
|
||||
{isUpdateLoading ? (
|
||||
<Spinner className="size-4" />
|
||||
) : (
|
||||
<RotateCw className="size-4" aria-hidden="true" />
|
||||
)}
|
||||
</Button>
|
||||
<>
|
||||
<span className="sr-only" aria-live="polite" aria-atomic="true">
|
||||
{announcement}
|
||||
</span>
|
||||
<Button
|
||||
{...props}
|
||||
onClick={() => updateSharedLink()}
|
||||
variant="outline"
|
||||
disabled={isUpdateLoading}
|
||||
aria-label={localize('com_ui_refresh_link')}
|
||||
>
|
||||
{isUpdateLoading ? (
|
||||
<Spinner className="size-4" />
|
||||
) : (
|
||||
<RotateCw className="size-4" aria-hidden="true" />
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue