mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-30 23:28:52 +01:00
♿ fix: Address Accessibility Issues (#10260)
* chore: add i18n localization comment for AlwaysMakeProd component * feat: enhance accessibility by adding aria-label and aria-labelledby to Switch component * feat: add aria-labels for accessibility in Agent and Assistant avatar buttons * fix: add switch aria-labels for accessibility in various components * feat: add aria-labels and localization keys for accessibility in DataTable, DataTableColumnHeader, and OGDialogTemplate components * chore: refactor out nested ternary * feat: add aria-label to DataTable filter button for My Files modal * feat: add aria-labels for Buttons and localization strings * feat: add aria-labels to Checkboxes in Agent Builder * feat: enhance accessibility by adding aria-label and aria-labelledby to Checkbox component * feat: add aria-label to FileSearchCheckbox in Agent Builder * feat: add aria-label to Prompts text input area * feat: enhance accessibility by adding aria-label and aria-labelledby to TextAreaAutosize component * feat: remove improper role: "list" prop from List in Conversations.tsx to enhance accessibility and stop aria rules conflicting within react-virtualized component * feat: enhance accessibility by allowing tab navigation and adding ring highlights for conversation title editing accept/reject buttons * feat: add aria-label to Copy Link button in the conversation share modal * feat: add title to QR code svg in conversation share modal to describe the image content * feat: enhance accessibility by making Agent Avatar upload keyboard navigable and round out highlight border on focus * feat: enhance accessibility by adding aria attributes around alerting users with screen readers to invalid email address inputs in the Agent Builder * feat: add aria-labels to buttons in Advanced panel of Agent Builder * feat: enhance accessibility by making FileUpload and Clear All buttons in PresetItems keyboard navigable * feat: enchance accessiblity by indexing view and delete button aria-labels in shared links management modal to their specific chat titles * feat: add border highlighting on focus for AnimatedSearchInput * feat: add category description to aria-labels for prompts in ListCard * feat: add proper scoping to rows and columns in table headers * feat: add localized aria-labelling to EditTextPart's TextAreaAutosize component and base dynamic paramters panel components and their supporting translation keys * feat: add localized aria-labels and aria-labelledBy to Checkbox components without them * feat: add localized aria-labeledBy for endpoint settings Sliders * feat: add localized aria-labels for TextareaAutosize components * chore: remove unused i18n string * feat: add localized aria-label for BookmarkForm Checkbox * fix: add stopPropagation onKeyDown for Preview and Edit menu items in prompts that was causing the prompts to inadvertently be sent when triggered with keyboard navigation when Auto-send Prompts was toggled on * fix: switch TableCell to TableHead for title cells according to harvard issue #789 * fix: add more descriptive localization key for file filter button in DataTable * chore: remove self-explanatory code comment from RenameForm * fix: remove stray bg-yellow highlight that was left in during debugging * fix: add aria-label to model configurator panel back button * fix: undo incorrect hoist of tool name split for aria-label and span in MCPInput --------- Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Dustin Healy
GitHub
parent
33d6b337bc
commit
0446d0e190
74 changed files with 427 additions and 131 deletions
|
|
@ -56,6 +56,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -152,6 +153,7 @@ const AdminSettings = () => {
|
|||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const AdvancedButton: React.FC<AdvancedButtonProps> = ({ setActivePanel }) => {
|
|||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
onClick={() => setActivePanel(Panel.advanced)}
|
||||
aria-label={localize('com_ui_advanced')}
|
||||
>
|
||||
<Settings2 className="h-4 w-4 cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_advanced')}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default function AdvancedPanel() {
|
|||
onClick={() => {
|
||||
setActivePanel(Panel.builder);
|
||||
}}
|
||||
aria-label={localize('com_ui_back_to_builder')}
|
||||
>
|
||||
<div className="advanced-panel-content flex w-full items-center justify-center gap-2">
|
||||
<ChevronLeft />
|
||||
|
|
|
|||
|
|
@ -146,6 +146,9 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
|
|||
<button
|
||||
className="rounded-xl p-1 transition hover:bg-surface-hover"
|
||||
onClick={() => removeAgentAt(idx)}
|
||||
aria-label={localize('com_ui_remove_agent_from_chain', {
|
||||
0: getAgentDetails(agentId)?.name || localize('com_ui_agent'),
|
||||
})}
|
||||
>
|
||||
<X size={18} className="text-text-secondary" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,11 @@ function Avatar({
|
|||
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
<Popover.Trigger asChild>
|
||||
<button type="button" className="h-20 w-20">
|
||||
<button
|
||||
type="button"
|
||||
className="f h-20 w-20 focus:rounded-full focus:ring-2 focus:ring-ring"
|
||||
aria-label={localize('com_ui_upload_agent_avatar_label')}
|
||||
>
|
||||
{previewUrl ? <AgentAvatarRender url={previewUrl} progress={progress} /> : <NoImage />}
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
|
|
|
|||
|
|
@ -420,9 +420,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
type="text"
|
||||
placeholder={localize('com_ui_support_contact_name_placeholder')}
|
||||
aria-label="Support contact name"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={error ? 'support-contact-name-error' : undefined}
|
||||
/>
|
||||
{error && (
|
||||
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
|
||||
<span
|
||||
id="support-contact-name-error"
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
{error.message}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -455,9 +462,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
type="email"
|
||||
placeholder={localize('com_ui_support_contact_email_placeholder')}
|
||||
aria-label="Support contact email"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={error ? 'support-contact-email-error' : undefined}
|
||||
/>
|
||||
{error && (
|
||||
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
|
||||
<span
|
||||
id="support-contact-email-error"
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
{error.message}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -283,6 +283,13 @@ export default function AgentPanel() {
|
|||
setCurrentAgentId(undefined);
|
||||
}}
|
||||
disabled={agentQuery.isInitialLoading}
|
||||
aria-label={
|
||||
localize('com_ui_create') +
|
||||
' ' +
|
||||
localize('com_ui_new') +
|
||||
' ' +
|
||||
localize('com_ui_agent')
|
||||
}
|
||||
>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{localize('com_ui_create') +
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ function SwitchItem({
|
|||
className="ml-4"
|
||||
data-testid={id}
|
||||
disabled={disabled}
|
||||
aria-label={label}
|
||||
/>
|
||||
</div>
|
||||
</HoverCard>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
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')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -81,7 +82,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
</button>
|
||||
<div className="ml-2 flex gap-2">
|
||||
{isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
|
||||
<button type="button" onClick={() => setIsDialogOpen(true)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
aria-label={localize('com_ui_add_api_key')}
|
||||
>
|
||||
<KeyRoundIcon className="h-5 w-5 text-text-primary" />
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ export default function ApiKeyDialog({
|
|||
<Button
|
||||
onClick={onRevoke}
|
||||
className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
|
||||
aria-label={localize('com_ui_revoke')}
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ function FileSearchCheckbox() {
|
|||
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')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -104,15 +104,16 @@ export function AvatarMenu({
|
|||
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-850 dark:text-white"
|
||||
sideOffset={5}
|
||||
>
|
||||
<div
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded-lg p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
|
||||
tabIndex={-1}
|
||||
tabIndex={0}
|
||||
data-orientation="vertical"
|
||||
onClick={onItemClick}
|
||||
>
|
||||
{localize('com_ui_upload_image')}
|
||||
</div>
|
||||
</button>
|
||||
{/* <Popover.Close
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
|
||||
|
|
|
|||
|
|
@ -210,10 +210,15 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
|
|||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<Checkbox id="trust" checked={field.value} onCheckedChange={field.onChange} />
|
||||
<Checkbox
|
||||
id="trust-checkbox"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
aria-labelledby="trust-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label htmlFor="trust" className="flex flex-col">
|
||||
<Label id="trust-label" htmlFor="trust-checkbox" className="flex flex-col">
|
||||
{localize('com_ui_trust_app')}
|
||||
<span className="text-xs text-text-secondary">
|
||||
{localize('com_agents_mcp_trust_subtext')}
|
||||
|
|
@ -269,6 +274,10 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
|
|||
checked={selectedTools.includes(tool)}
|
||||
onCheckedChange={() => handleToolToggle(tool)}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
aria-label={tool
|
||||
.split('_')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ')}
|
||||
/>
|
||||
<span className="text-token-text-primary">
|
||||
{tool
|
||||
|
|
|
|||
|
|
@ -162,6 +162,12 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
}
|
||||
}}
|
||||
tabIndex={isExpanded ? 0 : -1}
|
||||
aria-label={
|
||||
selectedTools.length === serverInfo.tools?.length &&
|
||||
selectedTools.length > 0
|
||||
? localize('com_ui_deselect_all')
|
||||
: localize('com_ui_select_all')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -252,6 +258,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
className={cn(
|
||||
'relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
|
||||
)}
|
||||
aria-label={subTool.metadata.name}
|
||||
/>
|
||||
<span className="text-token-text-primary select-none">
|
||||
{subTool.metadata.name}
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ export default function ModelPanel({
|
|||
onClick={() => {
|
||||
setActivePanel(Panel.builder);
|
||||
}}
|
||||
aria-label={localize('com_ui_back_to_builder')}
|
||||
>
|
||||
<div className="model-panel-content flex w-full items-center justify-center gap-2">
|
||||
<ChevronLeft />
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ 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')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -250,7 +250,11 @@ export default function ApiKeyDialog({
|
|||
}}
|
||||
buttons={
|
||||
isToolAuthenticated && (
|
||||
<Button onClick={onRevoke} className="bg-red-500 text-white hover:bg-red-600">
|
||||
<Button
|
||||
onClick={onRevoke}
|
||||
className="bg-red-500 text-white hover:bg-red-600"
|
||||
aria-label={localize('com_ui_revoke')}
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const VersionButton = ({ setActivePanel }: VersionButtonProps) => {
|
|||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
onClick={() => setActivePanel(Panel.version)}
|
||||
aria-label={localize('com_ui_agent_version')}
|
||||
>
|
||||
<History className="h-4 w-4 cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_agent_version')}
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ const BookmarkTable = () => {
|
|||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full gap-2 text-sm"
|
||||
aria-label={localize('com_ui_bookmarks_new')}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<BookmarkPlusIcon className="size-4" />
|
||||
|
|
|
|||
|
|
@ -213,7 +213,11 @@ function Avatar({
|
|||
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
<Popover.Trigger asChild>
|
||||
<button type="button" className="h-20 w-20">
|
||||
<button
|
||||
type="button"
|
||||
className="h-20 w-20"
|
||||
aria-label={localize('com_ui_upload_avatar_label')}
|
||||
>
|
||||
{previewUrl ? <AssistantAvatar url={previewUrl} progress={progress} /> : <NoImage />}
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default function Code({ version }: { version: number | string }) {
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.code_interpreter}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -44,6 +45,7 @@ export default function Code({ version }: { version: number | string }) {
|
|||
}
|
||||
>
|
||||
<label
|
||||
id={Capabilities.code_interpreter}
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={Capabilities.code_interpreter}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@ export default function ImageVision() {
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.image_vision}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<label
|
||||
id={Capabilities.image_vision}
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={Capabilities.image_vision}
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -60,11 +60,13 @@ export default function Retrieval({
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.retrieval}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<label
|
||||
id={Capabilities.retrieval}
|
||||
className={cn(
|
||||
'form-check-label text-token-text-primary w-full select-none',
|
||||
isDisabled ? 'cursor-no-drop opacity-50' : 'cursor-pointer',
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
|
|||
variant="ghost"
|
||||
className="hover:bg-surface-hover"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
aria-label={localize('com_ui_name')}
|
||||
>
|
||||
{localize('com_ui_name')}
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
|
|
@ -40,6 +41,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
|
|||
variant="ghost"
|
||||
className="hover:bg-surface-hover"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
aria-label={localize('com_ui_date')}
|
||||
>
|
||||
{localize('com_ui_date')}
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -127,7 +127,12 @@ function MCPPanelContent() {
|
|||
|
||||
return (
|
||||
<div className="h-auto max-w-full space-y-4 overflow-x-hidden py-2">
|
||||
<Button variant="outline" onClick={handleGoBackToList} size="sm">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleGoBackToList}
|
||||
size="sm"
|
||||
aria-label={localize('com_ui_back')}
|
||||
>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
{localize('com_ui_back')}
|
||||
</Button>
|
||||
|
|
@ -166,6 +171,7 @@ function MCPPanelContent() {
|
|||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleConfigRevoke(selectedServerNameForEditing)}
|
||||
aria-label={localize('com_ui_oauth_revoke')}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{localize('com_ui_oauth_revoke')}
|
||||
|
|
@ -188,6 +194,7 @@ function MCPPanelContent() {
|
|||
variant="outline"
|
||||
className="flex-1 justify-start dark:hover:bg-gray-700"
|
||||
onClick={() => handleServerClickToEdit(server.serverName)}
|
||||
aria-label={localize('com_ui_edit') + ' ' + server.serverName}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{server.serverName}</span>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const LabelController: React.FC<LabelControllerProps> = ({ control, memoryPerm,
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -141,6 +142,7 @@ const AdminSettings = () => {
|
|||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@ export default function MemoryCreateDialog({
|
|||
onClick={handleSave}
|
||||
disabled={isLoading || !key.trim() || !value.trim()}
|
||||
className="text-white"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
>
|
||||
{isLoading ? <Spinner className="size-4" /> : localize('com_ui_create')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -192,6 +192,7 @@ export default function MemoryEditDialog({
|
|||
type="button"
|
||||
variant="submit"
|
||||
onClick={handleSave}
|
||||
aria-label={localize('com_ui_save')}
|
||||
disabled={isLoading || !key.trim() || !value.trim()}
|
||||
className="text-white"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -305,7 +305,11 @@ export default function MemoryViewer() {
|
|||
<div className="flex w-full justify-end">
|
||||
<MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button variant="outline" className="w-full bg-transparent">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full bg-transparent"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden />
|
||||
{localize('com_ui_create_memory')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ function DynamicCheckbox({
|
|||
checked={selectedValue}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
className="mt-[2px] focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@ function DynamicSlider({
|
|||
min={range ? range.min : 0}
|
||||
step={range ? (range.step ?? 1) : 1}
|
||||
controls={false}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
|
|
@ -192,6 +193,7 @@ function DynamicSlider({
|
|||
id={`${settingKey}-dynamic-setting-input`}
|
||||
disabled={readonly}
|
||||
value={getDisplayValue(selectedValue)}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
onChange={() => ({})}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
|
|
@ -214,6 +216,7 @@ function DynamicSlider({
|
|||
onValueChange={(value) => handleValueChange(value[0])}
|
||||
onDoubleClick={() => setInputValue(defaultValue as string | number)}
|
||||
max={max}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
min={range ? range.min : 0}
|
||||
step={range ? (range.step ?? 1) : 1}
|
||||
className="flex h-4 w-full"
|
||||
|
|
|
|||
|
|
@ -67,6 +67,9 @@ function DynamicSwitch({
|
|||
onCheckedChange={handleCheckedChange}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
aria-label={
|
||||
labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey
|
||||
}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ function DynamicTextarea({
|
|||
disabled={readonly}
|
||||
value={inputValue ?? ''}
|
||||
onChange={setInputValue}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
placeholder={
|
||||
placeholderCode
|
||||
? (localize(placeholder as TranslationKeys) ?? placeholder)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue