nicolium: fix profile dropdown hotkey navigation

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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);

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>

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'>

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>

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>

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?'