From 0e5ee379b397c4fdf02c39c7253b7352a9b113fa Mon Sep 17 00:00:00 2001
From: Daniel Lew <dlew@users.noreply.github.com>
Date: Sat, 28 Feb 2026 15:58:50 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=81=EF=B8=8F=E2=80=8D=F0=9F=97=A8?=
 =?UTF-8?q?=EF=B8=8F=20fix:=20Replace=20Select=20with=20Menu=20in=20Accoun?=
 =?UTF-8?q?tSettings=20for=20Screen=20Reader=20Accuracy=20(#11980)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AccountSettings was using Select, but it makes more sense (for a11y)
to use Menu. The Select has the wrong role & behavior for the purpose
of AccountSettings; the "listbox" role it uses is for selecting
values in a form.

Menu matches the actual content better for screen readers; the
"menu" role is more appropriate for selecting one of a number of links.
---
 client/src/components/Nav/AccountSettings.tsx | 44 +++++++------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Nav/AccountSettings.tsx b/client/src/components/Nav/AccountSettings.tsx
index e3f97160eb..cf80f89ca2 100644
--- a/client/src/components/Nav/AccountSettings.tsx
+++ b/client/src/components/Nav/AccountSettings.tsx
@@ -1,5 +1,5 @@
 import { useState, memo, useRef } from 'react';
-import * as Select from '@ariakit/react/select';
+import * as Menu from '@ariakit/react/menu';
 import { FileText, LogOut } from 'lucide-react';
 import { LinkIcon, GearIcon, DropdownMenuSeparator, Avatar } from '@librechat/client';
 import { MyFilesModal } from '~/components/Chat/Input/Files/MyFilesModal';
@@ -20,8 +20,8 @@ function AccountSettings() {
   const accountSettingsButtonRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <Select.SelectProvider>
-      <Select.Select
+    <Menu.MenuProvider>
+      <Menu.MenuButton
         ref={accountSettingsButtonRef}
         aria-label={localize('com_nav_account_settings')}
         data-testid="nav-user"
@@ -38,8 +38,8 @@ function AccountSettings() {
         >
           {user?.name ?? user?.username ?? localize('com_nav_user')}
         </div>
-      </Select.Select>
-      <Select.SelectPopover
+      </Menu.MenuButton>
+      <Menu.Menu
         className="account-settings-popover popover-ui z-[125] w-[305px] rounded-lg md:w-[244px]"
         style={{
           transformOrigin: 'bottom',
@@ -59,43 +59,29 @@ function AccountSettings() {
             <DropdownMenuSeparator />
           </>
         )}
-        <Select.SelectItem
-          value=""
-          onClick={() => setShowFiles(true)}
-          className="select-item text-sm"
-        >
+        <Menu.MenuItem onClick={() => setShowFiles(true)} className="select-item text-sm">
           <FileText className="icon-md" aria-hidden="true" />
           {localize('com_nav_my_files')}
-        </Select.SelectItem>
+        </Menu.MenuItem>
         {startupConfig?.helpAndFaqURL !== '/' && (
-          <Select.SelectItem
-            value=""
+          <Menu.MenuItem
             onClick={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
             className="select-item text-sm"
           >
             <LinkIcon aria-hidden="true" />
             {localize('com_nav_help_faq')}
-          </Select.SelectItem>
+          </Menu.MenuItem>
         )}
-        <Select.SelectItem
-          value=""
-          onClick={() => setShowSettings(true)}
-          className="select-item text-sm"
-        >
+        <Menu.MenuItem onClick={() => setShowSettings(true)} className="select-item text-sm">
           <GearIcon className="icon-md" aria-hidden="true" />
           {localize('com_nav_settings')}
-        </Select.SelectItem>
+        </Menu.MenuItem>
         <DropdownMenuSeparator />
-        <Select.SelectItem
-          aria-selected={true}
-          onClick={() => logout()}
-          value="logout"
-          className="select-item text-sm"
-        >
+        <Menu.MenuItem onClick={() => logout()} className="select-item text-sm">
           <LogOut className="icon-md" aria-hidden="true" />
           {localize('com_nav_log_out')}
-        </Select.SelectItem>
-      </Select.SelectPopover>
+        </Menu.MenuItem>
+      </Menu.Menu>
       {showFiles && (
         <MyFilesModal
           open={showFiles}
@@ -104,7 +90,7 @@ function AccountSettings() {
         />
       )}
       {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
-    </Select.SelectProvider>
+    </Menu.MenuProvider>
   );
 }