👁️‍🗨️ fix: Replace Select with Menu in AccountSettings for Screen Reader Accuracy (#11980)

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

@@ -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>
+    <Menu.MenuProvider>
-      <Select.Select
+      <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>
+      </Menu.MenuButton>
-      <Select.SelectPopover
+      <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
+        <Menu.MenuItem onClick={() => setShowFiles(true)} className="select-item text-sm">
-          value=""
-          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
+          <Menu.MenuItem
-            value=""
             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
+        <Menu.MenuItem onClick={() => setShowSettings(true)} className="select-item text-sm">
-          value=""
-          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
+        <Menu.MenuItem onClick={() => logout()} className="select-item text-sm">
-          aria-selected={true}
-          onClick={() => logout()}
-          value="logout"
-          className="select-item text-sm"
-        >
           <LogOut className="icon-md" aria-hidden="true" />
           {localize('com_nav_log_out')}
-        </Select.SelectItem>
+        </Menu.MenuItem>
-      </Select.SelectPopover>
+      </Menu.Menu>
       {showFiles && (
         <MyFilesModal
           open={showFiles}
@@ -104,7 +90,7 @@ function AccountSettings() {
         />
       )}
       {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
-    </Select.SelectProvider>
+    </Menu.MenuProvider>
   );
 }