Command Palette

The .pl-c-command is a Cmd+K quick-action search overlay. It uses the Popover API for top-layer rendering and @starting-style for smooth enter/exit. Porchlight provides the visual structure; the app owns filtering, activation, and keyboard state.

Semantic HTML

<button
  popovertarget="cmdk"
  aria-haspopup="dialog"
  aria-controls="cmdk"
  aria-expanded="false"
>
  Open
</button>

<div
  popover
  class="pl-c-command"
  id="cmdk"
  role="dialog"
  aria-labelledby="cmdk-title"
>
  <h2 id="cmdk-title" class="pl-u-sr-only">Command palette</h2>
  <input
    class="pl-c-command__search"
    role="combobox"
    aria-expanded="true"
    aria-controls="cmdk-list"
    aria-activedescendant="cmdk-create"
    aria-label="Search commands"
    placeholder="Type a command..."
  />
  <div
    class="pl-c-command__body"
    id="cmdk-list"
    role="listbox"
    aria-label="Commands"
  >
    <div
      class="pl-c-command__group"
      role="group"
      aria-labelledby="cmdk-actions-heading"
    >
      <h3
        class="pl-c-command__heading"
        id="cmdk-actions-heading"
        role="presentation"
      >
        Actions
      </h3>
      <button
        class="pl-c-command__item"
        id="cmdk-create"
        type="button"
        role="option"
        aria-selected="true"
        data-selected
      >
        <svg class="pl-c-command__icon">...</svg>
        <span>Create project</span>
        <span class="pl-c-command__shortcut">C</span>
      </button>
    </div>
  </div>
  <footer class="pl-c-command__footer">
    <span>↑↓ navigate</span>
    <span>↵ select</span>
    <span>esc close</span>
  </footer>
</div>

This is a combobox with listbox options representing commands, not an ARIA menu: keep focus on .pl-c-command__search while arrow keys move the active option. Give each visual section role="group" and an accessible name; keep non-option headings presentational so the listbox contains only groups and options. Synchronize the opener’s aria-expanded, the search input’s aria-activedescendant, each item’s aria-selected, and optional data-selected for styling. Enter should activate the selected command; Escape can call hidePopover().

Class contract