From 0d89f53a910c3939e331a08311e7d17c59c88555 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 5 Mar 2026 12:44:19 +0100
Subject: [PATCH] nicolium: fix profile dropdown hotkey navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/dropdown-menu/dropdown-menu.tsx   | 12 ++++++++++++
 packages/nicolium/src/components/modal-root.tsx      |  2 +-
 packages/nicolium/src/components/ui/modal.tsx        |  4 +---
 .../src/features/ui/components/profile-dropdown.tsx  |  3 +++
 packages/nicolium/src/modals/confirmation-modal.tsx  |  2 +-
 .../src/modals/missing-description-modal.tsx         |  2 +-
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/nicolium/src/components/dropdown-menu/dropdown-menu.tsx b/packages/nicolium/src/components/dropdown-menu/dropdown-menu.tsx
index b160ee8b2..172814b1a 100644
--- a/packages/nicolium/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/nicolium/src/components/dropdown-menu/dropdown-menu.tsx
@@ -148,6 +148,18 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({
     }
     document.addEventListener('keydown', handleKeyDown, false);
 
+    if (Component && !items?.length) {
+      const elements = Array.from(
+        ref.current?.querySelectorAll<HTMLElement>(
+          'a, button:not([disabled]), input:not([disabled]), select:not([disabled])',
+        ) ?? [],
+      ).filter((element) => !element.hasAttribute('aria-hidden'));
+      const firstElement = elements[0];
+      if (firstElement) {
+        firstElement.focus();
+      }
+    }
+
     return () => {
       document.removeEventListener('click', handleDocumentClick);
       document.removeEventListener('touchend', handleDocumentClick);
diff --git a/packages/nicolium/src/components/modal-root.tsx b/packages/nicolium/src/components/modal-root.tsx
index 6eaf5c521..fce5dc8af 100644
--- a/packages/nicolium/src/components/modal-root.tsx
+++ b/packages/nicolium/src/components/modal-root.tsx
@@ -260,7 +260,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type, mo
             className='⁂-modal-root__container'
             aria-modal
             aria-labelledby='modal-title'
-            aria-describedby='modal-body'
+            aria-describedby='modal-description'
           >
             {children}
           </div>
diff --git a/packages/nicolium/src/components/ui/modal.tsx b/packages/nicolium/src/components/ui/modal.tsx
index 5115c4006..d10c06c7c 100644
--- a/packages/nicolium/src/components/ui/modal.tsx
+++ b/packages/nicolium/src/components/ui/modal.tsx
@@ -140,9 +140,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(
         )}
 
         <div className='⁂-modal__body'>
-          <div id='modal-body' className='⁂-modal__children'>
-            {children}
-          </div>
+          <div className='⁂-modal__children'>{children}</div>
 
           {confirmationAction && (
             <div className='⁂-modal__actions' data-testid='modal-actions'>
diff --git a/packages/nicolium/src/features/ui/components/profile-dropdown.tsx b/packages/nicolium/src/features/ui/components/profile-dropdown.tsx
index 78148db3e..26c8e0c64 100644
--- a/packages/nicolium/src/features/ui/components/profile-dropdown.tsx
+++ b/packages/nicolium/src/features/ui/components/profile-dropdown.tsx
@@ -19,6 +19,7 @@ import ThemeToggle from './theme-toggle';
 import type { Account as AccountEntity } from 'pl-api';
 
 const messages = defineMessages({
+  openDropdown: { id: 'profile_dropdown.open_dropdown', defaultMessage: 'Open profile dropdown' },
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   theme: { id: 'profile_dropdown.theme', defaultMessage: 'Theme' },
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
@@ -116,6 +117,8 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
       <button
         className='w-full rounded-lg focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
         type='button'
+        title={intl.formatMessage(messages.openDropdown)}
+        aria-label={intl.formatMessage(messages.openDropdown)}
       >
         {children}
       </button>
diff --git a/packages/nicolium/src/modals/confirmation-modal.tsx b/packages/nicolium/src/modals/confirmation-modal.tsx
index d82d1d899..010bf50dd 100644
--- a/packages/nicolium/src/modals/confirmation-modal.tsx
+++ b/packages/nicolium/src/modals/confirmation-modal.tsx
@@ -68,7 +68,7 @@ const ConfirmationModal: React.FC<BaseModalProps & ConfirmationModalProps> = ({
       secondaryAction={onSecondary && handleSecondary}
     >
       <Stack space={4}>
-        <Text>{message}</Text>
+        <Text id='modal-description'>{message}</Text>
 
         {checkbox && (
           <List>
diff --git a/packages/nicolium/src/modals/missing-description-modal.tsx b/packages/nicolium/src/modals/missing-description-modal.tsx
index ed072c1fa..32394bdd7 100644
--- a/packages/nicolium/src/modals/missing-description-modal.tsx
+++ b/packages/nicolium/src/modals/missing-description-modal.tsx
@@ -35,7 +35,7 @@ const MissingDescriptionModal: React.FC<BaseModalProps & MissingDescriptionModal
         onClose('MISSING_DESCRIPTION');
       }}
     >
-      <p className='text-gray-600 dark:text-gray-300'>
+      <p className='text-gray-600 dark:text-gray-300' id='modal-description'>
         <FormattedMessage
           id='missing_description_modal.description'
           defaultMessage='Continue anyway?'