From 6fc6471010101f30ac8150db0dad732279450768 Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Tue, 9 Dec 2025 17:17:23 -0800
Subject: [PATCH] =?UTF-8?q?=E2=98=B0=20fix:=20Side=20Panel=20Accessibility?=
 =?UTF-8?q?=20Improvements=20(#10830)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: pad cards so focus outline doesn't clip in prompts list

* feat: pad snippet top for space between text and button

* fix: prompt menu focus outline clipping with overflow-visible

* fix: clipping in AgentBuilder for advanced and admin buttons

* fix: clipping in memory panel for admin settings

* fix: better contrast thresholds on focus outlines for admin settings and advanced buttons in agent builder

* fix: better contrast thresholds on focus outlines for admin settings  button in memory panel

* fix: clipping on focus outline for manage files button in files panel

* fix: focus outline clipping table cells for files panel table

* fix: clipping on new bookmark button in bookmarks panel

* fix: clipping on Admin Settings button in MCP Settings panel

* fix: better contrast threshold outline and aria-label for Admin Settings button in MCP Settings panel

* fix: misaligned globe because of new unnested menu button positioning

* fix: localize global group aria-label

* fix: screen reader not reading out proper prompt name for dropdown menu button
---
 .../Prompts/Groups/ChatGroupItem.tsx           | 18 ++++++++++--------
 .../Prompts/Groups/GroupSidePanel.tsx          |  2 +-
 .../src/components/Prompts/Groups/ListCard.tsx |  2 +-
 .../SidePanel/Agents/AdminSettings.tsx         |  4 ++--
 .../Agents/Advanced/AdvancedButton.tsx         |  2 +-
 .../components/SidePanel/Agents/AgentPanel.tsx |  2 +-
 .../SidePanel/Bookmarks/BookmarkPanel.tsx      |  2 +-
 .../src/components/SidePanel/Files/Panel.tsx   |  2 +-
 .../components/SidePanel/Files/PanelTable.tsx  |  5 +++++
 .../SidePanel/MCPBuilder/MCPAdminSettings.tsx  |  5 +++--
 .../SidePanel/MCPBuilder/MCPBuilderPanel.tsx   |  2 +-
 .../SidePanel/Memories/AdminSettings.tsx       |  4 ++--
 .../SidePanel/Memories/MemoryViewer.tsx        |  2 +-
 client/src/locales/en/translation.json         |  1 +
 packages/client/src/components/Accordion.tsx   |  2 +-
 15 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Prompts/Groups/ChatGroupItem.tsx b/client/src/components/Prompts/Groups/ChatGroupItem.tsx
index e985eb9461..be4b8ae3cf 100644
--- a/client/src/components/Prompts/Groups/ChatGroupItem.tsx
+++ b/client/src/components/Prompts/Groups/ChatGroupItem.tsx
@@ -55,7 +55,7 @@ function ChatGroupItem({
 
   return (
     <>
-      <div className="relative my-2 items-stretch justify-between rounded-xl border border-border-light shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg">
+      <div className="relative my-2 items-stretch justify-between rounded-xl border border-border-light px-1 shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg">
         <ListCard
           name={group.name}
           category={group.category ?? ''}
@@ -65,13 +65,15 @@ function ChatGroupItem({
               ? group.oneliner
               : (group.productionPrompt?.prompt ?? '')
           }
-        >
-          <div className="flex flex-row items-center gap-2">
-            {groupIsGlobal === true && (
-              <EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
-            )}
+        ></ListCard>
+        {groupIsGlobal === true && (
+          <div className="absolute right-14 top-[16px]">
+            <EarthIcon
+              className="icon-md text-green-400"
+              aria-label={localize('com_ui_sr_global_prompt')}
+            />
           </div>
-        </ListCard>
+        )}
         <div className="absolute right-0 top-0 mr-1 mt-2.5 items-start pl-2">
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
@@ -79,7 +81,7 @@ function ChatGroupItem({
                 ref={triggerButtonRef}
                 id={`prompt-actions-${group._id}`}
                 type="button"
-                aria-label={localize('com_ui_sr_actions_menu', { name: group.name })}
+                aria-label={localize('com_ui_sr_actions_menu', { 0: group.name })}
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
diff --git a/client/src/components/Prompts/Groups/GroupSidePanel.tsx b/client/src/components/Prompts/Groups/GroupSidePanel.tsx
index 6001a1565f..1eca604af1 100644
--- a/client/src/components/Prompts/Groups/GroupSidePanel.tsx
+++ b/client/src/components/Prompts/Groups/GroupSidePanel.tsx
@@ -55,7 +55,7 @@ export default function GroupSidePanel({
           />
         </div>
       )}
-      <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
+      <div className="flex flex-1 flex-col gap-2 overflow-visible">
         {children}
         <div className={cn('relative flex h-full flex-col', isChatRoute ? '' : 'px-2 md:px-0')}>
           <List
diff --git a/client/src/components/Prompts/Groups/ListCard.tsx b/client/src/components/Prompts/Groups/ListCard.tsx
index 417d700736..0503a69aa6 100644
--- a/client/src/components/Prompts/Groups/ListCard.tsx
+++ b/client/src/components/Prompts/Groups/ListCard.tsx
@@ -50,7 +50,7 @@ export default function ListCard({
       </div>
       <div
         id={`card-snippet-${name}`}
-        className="ellipsis max-w-full select-none text-balance text-sm text-text-secondary"
+        className="ellipsis max-w-full select-none text-balance pt-1 text-sm text-text-secondary"
       >
         {snippet}
       </div>
diff --git a/client/src/components/SidePanel/Agents/AdminSettings.tsx b/client/src/components/SidePanel/Agents/AdminSettings.tsx
index 103a4283f1..7bc064685f 100644
--- a/client/src/components/SidePanel/Agents/AdminSettings.tsx
+++ b/client/src/components/SidePanel/Agents/AdminSettings.tsx
@@ -152,7 +152,7 @@ const AdminSettings = () => {
         <Button
           size={'sm'}
           variant={'outline'}
-          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
           aria-label={localize('com_ui_admin_settings')}
         >
           <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
@@ -218,7 +218,7 @@ const AdminSettings = () => {
                 type="button"
                 onClick={handleSubmit(onSubmit)}
                 disabled={isSubmitting || isLoading}
-                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring-primary"
               >
                 {localize('com_ui_save')}
               </button>
diff --git a/client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx b/client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx
index 07f73fd2bb..8ce635d6a8 100644
--- a/client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx
+++ b/client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx
@@ -15,7 +15,7 @@ const AdvancedButton: React.FC<AdvancedButtonProps> = ({ setActivePanel }) => {
     <Button
       size={'sm'}
       variant={'outline'}
-      className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+      className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
       onClick={() => setActivePanel(Panel.advanced)}
       aria-label={localize('com_ui_advanced')}
     >
diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index 729eea7ebd..f167a35521 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -476,7 +476,7 @@ export default function AgentPanel() {
     <FormProvider {...methods}>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden"
+        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-visible"
         aria-label="Agent configuration form"
       >
         <div className="mx-1 mt-2 flex w-full flex-wrap gap-2">
diff --git a/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx b/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
index e611602f5b..342886810a 100644
--- a/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
@@ -6,7 +6,7 @@ const BookmarkPanel = () => {
   const { data } = useConversationTagsQuery();
 
   return (
-    <div className="h-auto max-w-full overflow-x-hidden">
+    <div className="h-auto max-w-full overflow-x-visible">
       <BookmarkContext.Provider value={{ bookmarks: data || [] }}>
         <BookmarkTable />
       </BookmarkContext.Provider>
diff --git a/client/src/components/SidePanel/Files/Panel.tsx b/client/src/components/SidePanel/Files/Panel.tsx
index 8ee584dfbb..9039d9800e 100644
--- a/client/src/components/SidePanel/Files/Panel.tsx
+++ b/client/src/components/SidePanel/Files/Panel.tsx
@@ -7,7 +7,7 @@ export default function FilesPanel() {
   const { data: files = [] } = useGetFiles<TFile[]>();
 
   return (
-    <div className="h-auto max-w-full overflow-x-hidden">
+    <div className="h-auto max-w-full overflow-x-visible">
       <DataTable columns={columns} data={files} />
     </div>
   );
diff --git a/client/src/components/SidePanel/Files/PanelTable.tsx b/client/src/components/SidePanel/Files/PanelTable.tsx
index a33e8d0e48..ca2cc2deec 100644
--- a/client/src/components/SidePanel/Files/PanelTable.tsx
+++ b/client/src/components/SidePanel/Files/PanelTable.tsx
@@ -241,6 +241,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                           }}
+                          className={
+                            isFilenameCell
+                              ? 'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-text-primary'
+                              : ''
+                          }
                           data-skip-refocus="true"
                           key={cell.id}
                           role={isFilenameCell ? 'button' : undefined}
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPAdminSettings.tsx b/client/src/components/SidePanel/MCPBuilder/MCPAdminSettings.tsx
index 81bb39cf58..a6d0a7f80a 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPAdminSettings.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPAdminSettings.tsx
@@ -151,7 +151,8 @@ const MCPAdminSettings = () => {
         <Button
           size={'sm'}
           variant={'outline'}
-          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
+          aria-label={localize('com_ui_admin_settings')}
         >
           <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
           {localize('com_ui_admin_settings')}
@@ -216,7 +217,7 @@ const MCPAdminSettings = () => {
                 type="button"
                 onClick={handleSubmit(onSubmit)}
                 disabled={isSubmitting || isLoading}
-                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
               >
                 {localize('com_ui_save')}
               </button>
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
index 77552a5aff..493b34b122 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
@@ -22,7 +22,7 @@ export default function MCPBuilderPanel() {
   const configDialogProps = getConfigDialogProps();
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="flex h-full w-full flex-col overflow-visible">
       <div role="region" aria-label="MCP Builder" className="mt-2 space-y-2">
         {/* Admin Settings Button */}
         <MCPAdminSettings />
diff --git a/client/src/components/SidePanel/Memories/AdminSettings.tsx b/client/src/components/SidePanel/Memories/AdminSettings.tsx
index a002ea4c2b..efdf5ce7a2 100644
--- a/client/src/components/SidePanel/Memories/AdminSettings.tsx
+++ b/client/src/components/SidePanel/Memories/AdminSettings.tsx
@@ -141,7 +141,7 @@ const AdminSettings = () => {
         <Button
           size={'sm'}
           variant={'outline'}
-          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
           aria-label={localize('com_ui_admin_settings')}
         >
           <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
@@ -206,7 +206,7 @@ const AdminSettings = () => {
               <button
                 type="submit"
                 disabled={isSubmitting || isLoading}
-                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
               >
                 {localize('com_ui_save')}
               </button>
diff --git a/client/src/components/SidePanel/Memories/MemoryViewer.tsx b/client/src/components/SidePanel/Memories/MemoryViewer.tsx
index 1d469780a0..c23b9365fb 100644
--- a/client/src/components/SidePanel/Memories/MemoryViewer.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryViewer.tsx
@@ -239,7 +239,7 @@ export default function MemoryViewer() {
   }
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="flex h-full w-full flex-col">
       <div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-2">
         <div className="relative">
           <Input
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 03133c7c47..8ee4c76d9f 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1285,6 +1285,7 @@
   "com_ui_special_variables_more_info": "You can select special variables from the dropdown: `{{current_date}}` (today's date and day of week), `{{current_datetime}}` (local date and time), `{{utc_iso_datetime}}` (UTC ISO datetime), and `{{current_user}}` (your account name).",
   "com_ui_speech_while_submitting": "Can't submit speech while a response is being generated",
   "com_ui_sr_actions_menu": "Open actions menu for \"{{0}}\" prompt",
+  "com_ui_sr_global_prompt": "Global prompt group",
   "com_ui_stack_trace": "Stack Trace",
   "com_ui_status_prefix": "Status:",
   "com_ui_stop": "Stop",
diff --git a/packages/client/src/components/Accordion.tsx b/packages/client/src/components/Accordion.tsx
index a969531e88..87d6970038 100644
--- a/packages/client/src/components/Accordion.tsx
+++ b/packages/client/src/components/Accordion.tsx
@@ -39,7 +39,7 @@ const AccordionContent = React.forwardRef<
 >(({ className = '', children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-x-visible text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>