playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12816 → 13.26.0.pre.alpha.jasoncypretpatch12820

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -0,0 +1,77 @@
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+export class PbDropdownKeyboard {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.dropdownElement = dropdown.element;
+    this.options = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    this.focusedOptionIndex = -1;
+    this.init();
+  }
+
+  init() {
+    this.dropdownElement.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    );
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.dropdown.target.classList.contains("open")) {
+          this.dropdown.showElement(this.dropdown.target);
+          this.dropdown.updateArrowDisplay(true);
+        }
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.focusedOptionIndex !== -1) {
+          this.selectOption();
+        } else {
+          if (!this.dropdown.target.classList.contains("open")) {
+            this.dropdown.showElement(this.dropdown.target);
+            this.dropdown.updateArrowDisplay(true);
+          }
+        }
+        break;
+      case "Escape":
+        this.dropdown.hideElement(this.dropdown.target);
+        break;
+      case "Tab":
+        this.dropdown.hideElement(this.dropdown.target);
+        this.dropdown.updateArrowDisplay(false);
+        this.resetFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  moveFocus(direction) {
+    if (this.focusedOptionIndex !== -1) {
+      this.options[this.focusedOptionIndex].classList.remove(
+        "pb_dropdown_option_focused"
+      );
+    }
+    this.focusedOptionIndex =
+      (this.focusedOptionIndex + direction + this.options.length) %
+      this.options.length;
+    this.options[this.focusedOptionIndex].classList.add(
+      "pb_dropdown_option_focused"
+    );
+  }
+
+  selectOption() {
+    const option = this.options[this.focusedOptionIndex];
+    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
+    this.dropdown.hideElement(this.dropdown.target);
+  }
+}

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-flex" }}
+          style={{ display: "inline-block" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}

data/app/pb_kits/playbook/playbook-rails.js

@@ -33,6 +33,9 @@ PbTable.start()
 import PbTextarea from './pb_textarea'
 PbTextarea.start()
 
+import PbDropdown from './pb_dropdown'
+PbDropdown.start()
+
 import PbAdvancedTable from './pb_advanced_table'
 PbAdvancedTable.start()