🛗 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

client/src/locales/en/translation.json

@@ -378,9 +378,12 @@
   "com_files_downloading": "Downloading Files",
   "com_files_filter": "Filter files...",
   "com_files_filter_by": "Filter files by...",
+  "com_files_filter_input": "Filter listed files by name...",
   "com_files_no_results": "No results.",
   "com_files_number_selected": "{{0}} of {{1}} items(s) selected",
   "com_files_preparing_download": "Preparing download...",
+  "com_files_result_found": "{{count}} result found",
+  "com_files_results_found": "{{count}} results found",
   "com_files_sharepoint_picker_title": "Pick Files",
   "com_files_table": "something needs to go here. was empty",
   "com_files_upload_local_machine": "From Local Computer",
@@ -392,6 +395,7 @@
   "com_nav_account_settings": "Account Settings",
   "com_nav_always_make_prod": "Always make new versions production",
   "com_nav_archive_created_at": "Date Archived",
+  "com_nav_archive_created_at_sort": "Sort by Date Archived",
   "com_nav_archive_name": "Name",
   "com_nav_archived_chats": "Archived chats",
   "com_nav_at_command": "@-Command",
@@ -568,6 +572,7 @@
   "com_nav_theme_dark": "Dark",
   "com_nav_theme_light": "Light",
   "com_nav_theme_system": "System",
+  "com_nav_toggle_sidebar": "Toggle sidebar",
   "com_nav_tool_dialog": "Assistant Tools",
   "com_nav_tool_dialog_agents": "Agent Tools",
   "com_nav_tool_dialog_description": "Assistant must be saved to persist tool selections.",
@@ -619,7 +624,8 @@
   "com_ui_action_button": "Action Button",
   "com_ui_active": "Active",
   "com_ui_add": "Add",
-  "com_ui_add_api_key": "Add API Key",
+  "com_ui_add_code_interpreter_api_key": "Add Code Interpreter API Key",
+  "com_ui_add_web_search_api_keys": "Add Web Search API Keys",
   "com_ui_add_mcp": "Add MCP",
   "com_ui_add_mcp_server": "Add MCP Server",
   "com_ui_add_model_preset": "Add a model or preset for an additional response",
@@ -794,6 +800,7 @@
   "com_ui_controls": "Controls",
   "com_ui_contact_admin_if_issue_persists": "Contact the Admin if the issue persists",
   "com_ui_conversation_label": "{{title}} conversation",
+  "com_ui_convo_archived": "Conversation archived",
   "com_ui_convo_delete_error": "Failed to delete conversation",
   "com_ui_convo_delete_success": "Conversation successfully deleted",
   "com_ui_copied": "Copied!",
@@ -811,7 +818,9 @@
   "com_ui_create_memory": "Create Memory",
   "com_ui_create_new_agent": "Create New Agent",
   "com_ui_create_prompt": "Create Prompt",
+  "com_ui_create_prompt_page": "New Prompt Configuration Page",
   "com_ui_creating_image": "Creating image. May take a moment",
+  "com_ui_creation_date_sort": "Sort by Creation Date",
   "com_ui_current": "Current",
   "com_ui_currently_production": "Currently in production",
   "com_ui_custom": "Custom",
@@ -1007,6 +1016,8 @@
   "com_ui_librechat_code_api_key": "Get your LibreChat Code Interpreter API key",
   "com_ui_librechat_code_api_subtitle": "Secure. Multi-language. Input/Output Files.",
   "com_ui_librechat_code_api_title": "Run AI Code",
+  "com_ui_link_copied": "Link copied",
+  "com_ui_link_refreshed": "Link refreshed",
   "com_ui_loading": "Loading...",
   "com_ui_locked": "Locked",
   "com_ui_logo": "{{0}} Logo",
@@ -1059,6 +1070,7 @@
   "com_ui_more_info": "More info",
   "com_ui_my_prompts": "My Prompts",
   "com_ui_name": "Name",
+  "com_ui_name_sort": "Sort by Name",
   "com_ui_new": "New",
   "com_ui_new_chat": "New chat",
   "com_ui_new_conversation_title": "New Conversation Title",
@@ -1110,6 +1122,8 @@
   "com_ui_privacy_policy": "Privacy policy",
   "com_ui_privacy_policy_url": "Privacy Policy URL",
   "com_ui_prompt": "Prompt",
+  "com_ui_prompt_group_button": "{{name}} prompt, {{category}} category",
+  "com_ui_prompt_group_button_no_category": "{{name}} prompt",
   "com_ui_prompt_groups": "Prompt Groups List",
   "com_ui_prompt_input": "Prompt input",
   "com_ui_prompt_input_field": "Prompt text input field",
@@ -1152,6 +1166,8 @@
   "com_ui_resource": "resource",
   "com_ui_response": "Response",
   "com_ui_result": "Result",
+  "com_ui_result_found": "{{count}} result found",
+  "com_ui_results_found": "{{count}} results found",
   "com_ui_revoke": "Revoke",
   "com_ui_revoke_info": "Revoke all user provided credentials",
   "com_ui_revoke_key_confirm": "Are you sure you want to revoke this key?",
@@ -1258,6 +1274,9 @@
   "com_ui_opens_new_tab": "(opens in new tab)",
   "com_ui_thinking": "Thinking...",
   "com_ui_thoughts": "Thoughts",
+  "com_ui_toggle_theme": "Toggle theme",
+  "com_ui_dark_theme_enabled": "Dark theme enabled",
+  "com_ui_light_theme_enabled": "Light theme enabled",
   "com_ui_token": "token",
   "com_ui_token_exchange_method": "Token Exchange Method",
   "com_ui_token_url": "Token URL",