mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-31 15:48:51 +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
|
|
@ -1,3 +1,4 @@
|
|||
import { useRef } from 'react';
|
||||
import { KeyRoundIcon } from 'lucide-react';
|
||||
import { AuthType, AgentCapabilities } from 'librechat-data-provider';
|
||||
import { useFormContext, Controller, useWatch } from 'react-hook-form';
|
||||
|
|
@ -17,7 +18,8 @@ import { ESide } from '~/common';
|
|||
export default function Action({ authType = '', isToolAuthenticated = false }) {
|
||||
const localize = useLocalize();
|
||||
const methods = useFormContext<AgentForm>();
|
||||
const { control, setValue, getValues } = methods;
|
||||
const { control, setValue } = methods;
|
||||
const apiKeyButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const {
|
||||
onSubmit,
|
||||
isDialogOpen,
|
||||
|
|
@ -27,9 +29,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
} = useCodeApiKeyForm({
|
||||
onSubmit: () => {
|
||||
setValue(AgentCapabilities.execute_code, true, { shouldDirty: true });
|
||||
setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
|
||||
},
|
||||
onRevoke: () => {
|
||||
setValue(AgentCapabilities.execute_code, false, { shouldDirty: true });
|
||||
setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -56,42 +60,44 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
id="execute-code-checkbox"
|
||||
checked={runCodeIsEnabled ? runCodeIsEnabled : isToolAuthenticated && field.value}
|
||||
onCheckedChange={handleCheckboxChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
|
||||
aria-label={localize('com_ui_run_code')}
|
||||
aria-labelledby="execute-code-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center space-x-2"
|
||||
onClick={() => {
|
||||
const value = !getValues(AgentCapabilities.execute_code);
|
||||
handleCheckboxChange(value);
|
||||
}}
|
||||
<label
|
||||
id="execute-code-label"
|
||||
htmlFor="execute-code-checkbox"
|
||||
className="form-check-label text-token-text-primary cursor-pointer"
|
||||
>
|
||||
<label
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={AgentCapabilities.execute_code}
|
||||
>
|
||||
{localize('com_ui_run_code')}
|
||||
</label>
|
||||
</button>
|
||||
{localize('com_ui_run_code')}
|
||||
</label>
|
||||
<div className="ml-2 flex gap-2">
|
||||
{isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
|
||||
{isUserProvided && (
|
||||
<button
|
||||
ref={apiKeyButtonRef}
|
||||
type="button"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
aria-label={localize('com_ui_add_api_key')}
|
||||
aria-label={localize('com_ui_add_code_interpreter_api_key')}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={isDialogOpen}
|
||||
>
|
||||
<KeyRoundIcon className="h-5 w-5 text-text-primary" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
<HoverCardTrigger>
|
||||
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
|
||||
<HoverCardTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center"
|
||||
aria-label={localize('com_agents_code_interpreter')}
|
||||
>
|
||||
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
</div>
|
||||
<HoverCardPortal>
|
||||
|
|
@ -114,6 +120,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
isToolAuthenticated={isToolAuthenticated}
|
||||
handleSubmit={keyFormMethods.handleSubmit}
|
||||
isUserProvided={authType === AuthType.USER_PROVIDED}
|
||||
triggerRef={apiKeyButtonRef}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { ESide } from '~/common';
|
|||
function FileSearchCheckbox() {
|
||||
const localize = useLocalize();
|
||||
const methods = useFormContext<AgentForm>();
|
||||
const { control, setValue, getValues } = methods;
|
||||
const { control } = methods;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -28,33 +28,31 @@ function FileSearchCheckbox() {
|
|||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
id="file-search-checkbox"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-label={localize('com_agents_enable_file_search')}
|
||||
aria-labelledby="file-search-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center space-x-2"
|
||||
onClick={() =>
|
||||
setValue(AgentCapabilities.file_search, !getValues(AgentCapabilities.file_search), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
<label
|
||||
id="file-search-label"
|
||||
htmlFor="file-search-checkbox"
|
||||
className="form-check-label text-token-text-primary cursor-pointer"
|
||||
>
|
||||
<label
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={AgentCapabilities.file_search}
|
||||
{localize('com_agents_enable_file_search')}
|
||||
</label>
|
||||
<HoverCardTrigger asChild className="ml-2">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center"
|
||||
aria-label={localize('com_agents_file_search_info')}
|
||||
>
|
||||
{localize('com_agents_enable_file_search')}
|
||||
</label>
|
||||
<HoverCardTrigger>
|
||||
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
|
||||
</HoverCardTrigger>
|
||||
</button>
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardPortal>
|
||||
<HoverCardContent side={ESide.Top} className="w-80">
|
||||
<div className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { KeyRoundIcon } from 'lucide-react';
|
||||
import { useRef } from 'react';
|
||||
import { AuthType, AgentCapabilities } from 'librechat-data-provider';
|
||||
import { useFormContext, Controller, useWatch } from 'react-hook-form';
|
||||
import {
|
||||
|
|
@ -23,7 +24,8 @@ export default function Action({
|
|||
}) {
|
||||
const localize = useLocalize();
|
||||
const methods = useFormContext<AgentForm>();
|
||||
const { control, setValue, getValues } = methods;
|
||||
const { control, setValue } = methods;
|
||||
const apiKeyButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const {
|
||||
onSubmit,
|
||||
isDialogOpen,
|
||||
|
|
@ -33,9 +35,11 @@ export default function Action({
|
|||
} = useSearchApiKeyForm({
|
||||
onSubmit: () => {
|
||||
setValue(AgentCapabilities.web_search, true, { shouldDirty: true });
|
||||
setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
|
||||
},
|
||||
onRevoke: () => {
|
||||
setValue(AgentCapabilities.web_search, false, { shouldDirty: true });
|
||||
setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -62,6 +66,7 @@ export default function Action({
|
|||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
id="web-search-checkbox"
|
||||
checked={
|
||||
webSearchIsEnabled ? webSearchIsEnabled : isToolAuthenticated && field.value
|
||||
}
|
||||
|
|
@ -69,33 +74,37 @@ export default function Action({
|
|||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
|
||||
aria-label={localize('com_ui_web_search')}
|
||||
aria-labelledby="web-search-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center space-x-2"
|
||||
onClick={() => {
|
||||
const value = !getValues(AgentCapabilities.web_search);
|
||||
handleCheckboxChange(value);
|
||||
}}
|
||||
<label
|
||||
id="web-search-label"
|
||||
htmlFor="web-search-checkbox"
|
||||
className="form-check-label text-token-text-primary cursor-pointer"
|
||||
>
|
||||
<label
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={AgentCapabilities.web_search}
|
||||
>
|
||||
{localize('com_ui_web_search')}
|
||||
</label>
|
||||
</button>
|
||||
{localize('com_ui_web_search')}
|
||||
</label>
|
||||
<div className="ml-2 flex gap-2">
|
||||
{isUserProvided && (isToolAuthenticated || webSearchIsEnabled) && (
|
||||
<button type="button" onClick={() => setIsDialogOpen(true)}>
|
||||
{isUserProvided && (
|
||||
<button
|
||||
ref={apiKeyButtonRef}
|
||||
type="button"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
aria-label={localize('com_ui_add_web_search_api_keys')}
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
<KeyRoundIcon className="h-5 w-5 text-text-primary" />
|
||||
</button>
|
||||
)}
|
||||
<HoverCardTrigger>
|
||||
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
|
||||
<HoverCardTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center"
|
||||
aria-label={localize('com_agents_search_info')}
|
||||
>
|
||||
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
</div>
|
||||
<HoverCardPortal>
|
||||
|
|
@ -116,6 +125,7 @@ export default function Action({
|
|||
register={keyFormMethods.register}
|
||||
isToolAuthenticated={isToolAuthenticated}
|
||||
handleSubmit={keyFormMethods.handleSubmit}
|
||||
triggerRef={apiKeyButtonRef}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -66,13 +66,21 @@ const BookmarkTable = () => {
|
|||
return (
|
||||
<BookmarkContext.Provider value={{ bookmarks }}>
|
||||
<div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex items-center gap-4">
|
||||
<Input
|
||||
placeholder={localize('com_ui_bookmarks_filter')}
|
||||
id="bookmarks-filter"
|
||||
placeholder=" "
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
aria-label={localize('com_ui_bookmarks_filter')}
|
||||
className="peer"
|
||||
/>
|
||||
<label
|
||||
htmlFor="bookmarks-filter"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
|
||||
>
|
||||
{localize('com_ui_bookmarks_filter')}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
|
||||
|
|
|
|||
|
|
@ -182,13 +182,21 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
|
||||
return (
|
||||
<div role="region" aria-label={localize('com_files_table')} className="mt-2 space-y-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex items-center gap-4">
|
||||
<Input
|
||||
placeholder={localize('com_files_filter')}
|
||||
id="filename-filter"
|
||||
placeholder=" "
|
||||
value={filenameFilter ?? ''}
|
||||
onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
|
||||
aria-label={localize('com_files_filter')}
|
||||
className="peer"
|
||||
/>
|
||||
<label
|
||||
htmlFor="filename-filter"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
|
||||
>
|
||||
{localize('com_files_filter')}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ export default function MemoryCreateDialog({
|
|||
<OGDialogTemplate
|
||||
title={localize('com_ui_create_memory')}
|
||||
showCloseButton={false}
|
||||
className="w-11/12 md:max-w-lg"
|
||||
className="max-h-[90vh] w-11/12 overflow-y-auto md:max-w-lg"
|
||||
main={
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@ export default function MemoryViewer() {
|
|||
<Switch
|
||||
checked={referenceSavedMemories}
|
||||
onCheckedChange={handleMemoryToggle}
|
||||
aria-label={localize('com_ui_reference_saved_memories')}
|
||||
aria-label={localize('com_ui_use_memory')}
|
||||
disabled={updateMemoryPreferencesMutation.isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue