fix(studio): activate source popup fixtures through keyboard and focus

Author: Bill Leoutsakos

scripts/design-studio/test-fixtures-e2e.mjs

@@ -41,6 +41,9 @@ try {
     ['tooltip', { state: 'open', export: 'Tooltip.Content' }, '[role=tooltip]'],
     ['dropdown-menu-sub-content', { action: 'open-submenu' }, '[data-studio-submenu]'],
     ['popover', { action: 'open-folder' }, '[data-studio-back-button]'],
+    ['chip-dropdown', { state: 'open' }, '[role=menu]'],
+    ['chip-select', { state: 'open' }, '[role=menu]'],
+    ['combobox', { state: 'open', axis: 'editable', value: 'true' }, '[role=listbox]'],
   ])
     for (const theme of ['light', 'dark'])
       for (const size of [16, 20]) {

tools/design-studio/_components/studio-fixture.tsx

@@ -396,7 +396,14 @@ export function StudioFixture({
       if (!trigger || activated) return
       activated = true
       observer.disconnect()
-      trigger.click()
+      trigger.focus()
+      if (trigger.getAttribute('aria-haspopup') === 'menu') {
+        trigger.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        )
+      } else {
+        trigger.click()
+      }
     }
     const observer = new MutationObserver(activate)
     observer.observe(document.body, { childList: true, subtree: true })