feat: added focus trap to dropdown

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+export class FocusTrap {
+  private trapElement: HTMLElement;
+
+  constructor(trapElement: HTMLElement) {
+    this.trapElement = trapElement;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.trapElement.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  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 firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          event.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  }
+
+  public destroy() {
+    this.trapElement.removeEventListener('keydown', this.handleKeyDown);
+  }
+}

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

@@ -3,6 +3,7 @@
  */
 import './styles.scss';
 import { hasAncestorWithClass } from '../utils';
+import { FocusTrap } from './focus-trap';
 
 // page objects selectors
 const DROPDOWN = '[data-role="dropdown"]';
@@ -11,11 +12,12 @@ const DROPDOWN_LIST = '[data-role="dropdown-listbox"]';
 
 function initDropdowns(): void {
   const dropdowns = document.querySelectorAll(DROPDOWN);
-  dropdowns.forEach((dropdown: Element) =>
+  dropdowns.forEach((dropdown: Element) => {
     dropdown.querySelectorAll(DROPDOWN_TOGGLE)?.forEach((button: Element) => {
       button.addEventListener('click', (event) => onToggleDropdown(event, dropdown));
-    })
-  );
+    });
+    addKeyboardNavigation(dropdown as HTMLElement);
+  });
 }
 
 function onToggleDropdown(_: Event, dropdown: Element): void {
@@ -46,6 +48,16 @@ function handleOutsideClick(event: MouseEvent): void {
   }
 }
 
+function addKeyboardNavigation(dropdown: HTMLElement): void {
+  new FocusTrap(dropdown);
+  dropdown.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') {
+      onToggleDropdown(event, dropdown);
+      (dropdown.querySelector(DROPDOWN_TOGGLE) as HTMLElement)?.focus();
+    }
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   initDropdowns();
   document.addEventListener('click', handleOutsideClick);