fix: fixed navigation keys in dropdown

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/focus-trap.ts

@@ -12,17 +12,36 @@ export class FocusTrap {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Tab') {
-      const focusableElements = Array.from(this.trapElement.querySelectorAll<HTMLElement>('[role="option"]')).filter(
-        (element) => element.style.display !== 'none' && element.tabIndex !== -1
-      );
-      if (!focusableElements.length) {
-        return;
+    const navigationKeys = ['Tab', 'ArrowDown', 'ArrowUp'];
+    const focusableElements = Array.from(this.trapElement.querySelectorAll<HTMLElement>('[role="option"]')).filter(
+      (element) => element.style.display !== 'none' && element.tabIndex !== -1
+    );
+    if (!navigationKeys.includes(event.key) || focusableElements.length === 0) {
+      return;
+    }
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.key === 'ArrowUp') {
+      if (document.activeElement === firstElement) {
+        lastElement.focus();
+      } else {
+        const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement);
+        focusableElements[currentIndex - 1].focus();
       }
+    }
 
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
+    if (event.key === 'ArrowDown') {
+      if (document.activeElement === lastElement) {
+        firstElement.focus();
+      } else {
+        const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement);
+        focusableElements[currentIndex + 1].focus();
+      }
+    }
 
+    if (event.key === 'Tab') {
       if (event.shiftKey) {
         if (document.activeElement === firstElement) {
           lastElement.focus();

dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css

@@ -883,6 +883,10 @@
   font: var(--font-h4);
 }
 
+.library-name--link:focus-visible {
+  outline: var(--focus-outline);
+}
+
 @media (width < 900px) {
   .library-name--link {
     height: 52px;
@@ -1250,6 +1254,10 @@
   background-color: var(--color-w10);
 }
 
+.navigation-controls--btn:focus-visible {
+  outline: var(--focus-outline);
+}
+
 @media (width < 900px) {
   .navigation-controls--btn {
     width: 52px;
@@ -1890,7 +1898,7 @@
 
 :root {
   --color-background: var(--color-background-page);
-  --focus-outline: var(--focus-outline);
+  --focus-outline: 4px solid var(--color-key-blue-05);
 }
 
 .theme-dark {