phlex_kit 0.8.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f17bf0029690be129f5e5d77449b9ebb5632d22151ed3508789683b135a7e03f
-  data.tar.gz: 2145e97971f4fba1e283d979f454562839a76bae767c29755d3e9ff01639e306
+  metadata.gz: 6b7f736afc68bb09cd4706468a8a92b9b4d6085844e0e6813b12181c5b28a9fc
+  data.tar.gz: 480e8e1bc05eb96f3d05a409664737207d76a384cd2ea82d6c401c4298c42c45
 SHA512:
-  metadata.gz: 67b7a4e80b51796f3bfc1177be569bf13d064e01b491c5be427baf7275ca87f4fd45d243dfd5f3bdf49fd48735b00fe084ea17e93d48cca62d5b28401c33ca0e
-  data.tar.gz: fd0c992227463320e3869ac7917b8ac63c7bbbd5bc468388de7ef00cbec003e0f333c37dde32711c8fed263bb95abbdde2b9bef1789990e8070f4b2b6fc16d29
+  metadata.gz: 62a50bb438b7c8814f8f32e91619b24f9ba41a3a668991c384b56bcc9fa3f317c9967dc12411a52372476e59b35ad3ef0675f11ad94a0f640d2619d25f02d8e9
+  data.tar.gz: 385f3b984cde9d92cd1e3e21dd78c95583e327f7a57a914183c64504029bf72cb515f29eb155311cd8ecb3cbb2cda053af205e31a161ddb2031333e0ad5f9013

data/app/components/phlex_kit/accordion/accordion_content.rb

@@ -1,10 +1,19 @@
 module PhlexKit
   class AccordionContent < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    # Pass `open: true` alongside AccordionItem(open: true) so the content is
+    # readable without JS — the closed-state hidden + height:0 otherwise makes
+    # a server-rendered open item unreachable pre-hydration.
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
+
     def view_template(&)
       # role="region" + aria-labelledby → trigger id (wired by the controller
       # in connect(), which also assigns the ids), per the APG accordion pattern.
-      div(**mix({ class: "pk-accordion-content", role: "region", data: { phlex_kit__accordion_target: "content", state: "closed" }, style: "height: 0px;", hidden: true }, @attrs), &)
+      base = { class: "pk-accordion-content", role: "region", data: { phlex_kit__accordion_target: "content", state: @open ? "open" : "closed" } }
+      base.merge!(style: "height: 0px;", hidden: true) unless @open
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/accordion/accordion_controller.js

@@ -15,8 +15,11 @@ export default class extends Controller {
 
   connect() {
     this.wireAria()
+    // Apply the initial state without animating (the initial valueChanged
+    // callback is skipped — it fires before connect()).
     const d = this.animationDurationValue
     this.animationDurationValue = 0
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", this.openValue ? "true" : "false")
     this.openValue ? this.open() : this.close()
     this.animationDurationValue = d
   }
@@ -34,11 +37,18 @@ export default class extends Controller {
     if (!root || root.dataset.type !== "single") return
     root.querySelectorAll('[data-controller~="phlex-kit--accordion"]').forEach((el) => {
       if (el === this.element) return
+      // Skip items of a NESTED accordion — querySelectorAll descends into
+      // item content, and opening an outer item collapsed inner ones too.
+      if (el.closest(".pk-accordion") !== root) return
       const ctrl = this.application.getControllerForElementAndIdentifier(el, "phlex-kit--accordion")
       if (ctrl && ctrl.openValue) ctrl.openValue = false
     })
   }
-  openValueChanged(isOpen) {
+  openValueChanged(isOpen, wasOpen) {
+    // Stimulus fires the initial value callback BEFORE connect() — before
+    // connect zeroes the duration — so a server-rendered open item visibly
+    // animated open on every page load. connect() applies the initial state.
+    if (wasOpen === undefined) return
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
     isOpen ? this.open() : this.close()
   }
@@ -78,9 +88,12 @@ export default class extends Controller {
     c.removeAttribute("hidden")
     c.dataset.state = "open"
     const h = c.scrollHeight
-    c.animate([{ height: c.style.height || "0px" }, { height: `${h}px` }],
+    const a = c.animate([{ height: c.style.height || "0px" }, { height: `${h}px` }],
       { duration: this.animationDurationValue, easing: "ease-in-out" })
     c.style.height = `${h}px`
+    // Settle at auto, not the frozen pixel height — with overflow hidden a
+    // later content growth (or a resize that rewraps text) silently clipped.
+    a.finished.then(() => { if (c.dataset.state === "open") c.style.height = "auto" }).catch(() => {})
   }
 
   hide() {

data/app/components/phlex_kit/alert_dialog/alert_dialog_content.rb

@@ -13,9 +13,12 @@ module PhlexKit
 
     def view_template(&block)
       template(**mix({ data: { phlex_kit__alert_dialog_target: "content" } }, @attrs)) do
-        div(data: { controller: "phlex-kit--alert-dialog" }) do
+        # keydown on the clone root: focus is trapped inside the panel, so
+        # Escape/Tab always bubble here; tabindex="-1" on the panel is the
+        # focus fallback when the dialog has no focusable children.
+        div(data: { controller: "phlex-kit--alert-dialog", action: "keydown->phlex-kit--alert-dialog#keydown" }) do
           div(class: "pk-alert-dialog-overlay", "aria-hidden": "true")
-          div(role: "alertdialog", "aria-modal": "true", class: [ "pk-alert-dialog-panel", fetch_option(SIZES, @size, :size) ].compact.join(" "), &block)
+          div(role: "alertdialog", "aria-modal": "true", tabindex: "-1", class: [ "pk-alert-dialog-panel", fetch_option(SIZES, @size, :size) ].compact.join(" "), &block)
         end
       end
     end

data/app/components/phlex_kit/alert_dialog/alert_dialog_controller.js

@@ -1,24 +1,98 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Ported from ruby_ui's phlex-kit--alert-dialog controller. open() clones the
-// <template> content into <body> as a modal (the clone carries its own instance
-// of this controller); dismiss() removes it. The only change from upstream: lock
-// body scroll via inline style rather than a Tailwind `overflow-hidden` class.
+// <template> content into <body> as a modal; the clone carries its own
+// instance of this controller, which owns the full modal contract for the
+// clone's lifetime (mirroring sheet_content_controller): scroll lock, initial
+// focus (the Cancel action when present — APG wants the least destructive
+// control), Tab focus trap, Escape-to-dismiss, focus restore to the opener,
+// and aria-labelledby/-describedby wiring to Title/Description. connect and
+// disconnect exactly bracket the clone, so removal by any path restores state.
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
+
 export default class extends Controller {
   static targets = ["content"];
   static values = { open: { type: Boolean, default: false } };
 
   connect() {
-    if (this.openValue) this.open();
+    // The source element holds the <template>; the clone in <body> does not.
+    if (this.hasContentTarget) {
+      if (this.openValue) this.open();
+      return;
+    }
+    this.opener = document.activeElement;
+    this.previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    this.#wireAria();
+    const focusables = this.#focusables();
+    const cancel = focusables.find((el) => (el.dataset.action || "").includes("#dismiss"));
+    (cancel || focusables[0] || this.#panel())?.focus();
+  }
+
+  disconnect() {
+    if (this.hasContentTarget) return;
+    document.body.style.overflow = this.previousOverflow;
+    if (this.opener?.isConnected) this.opener.focus();
   }
 
   open() {
+    // Double-open guard: Enter+click (or a double-click) on the trigger must
+    // not stack a second clone over the first.
+    if (this.clone?.isConnected) return;
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    document.body.style.overflow = "hidden";
+    this.clone = document.body.lastElementChild;
   }
 
   dismiss() {
-    document.body.style.overflow = "";
     this.element.remove();
   }
+
+  keydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.dismiss();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusables = this.#focusables();
+    if (focusables.length === 0) {
+      event.preventDefault();
+      this.#panel()?.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === this.#panel())) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  #panel() {
+    return this.element.querySelector('[role="alertdialog"]');
+  }
+
+  #focusables() {
+    const panel = this.#panel();
+    if (!panel) return [];
+    return [...panel.querySelectorAll(FOCUSABLE)].filter((el) => el.getClientRects().length > 0);
+  }
+
+  #wireAria() {
+    const panel = this.#panel();
+    if (!panel) return;
+    const wire = (attr, selector) => {
+      if (panel.getAttribute(attr)) return;
+      const el = this.element.querySelector(selector);
+      if (!el) return;
+      if (!el.id) el.id = `pk-alert-dialog-${Math.random().toString(36).slice(2, 10)}`;
+      panel.setAttribute(attr, el.id);
+    };
+    wire("aria-labelledby", ".pk-alert-dialog-title");
+    wire("aria-describedby", ".pk-alert-dialog-description");
+  }
 }

data/app/components/phlex_kit/aspect_ratio/aspect_ratio.rb

@@ -5,16 +5,20 @@ module PhlexKit
   # `.pk-aspect-ratio*` (aspect_ratio.css).
   class AspectRatio < BaseComponent
     def initialize(aspect_ratio: "16/9", **attrs)
-      unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")
-        raise ArgumentError, %(aspect_ratio must be a "w/h" string (e.g. "16/9"))
+      # Both terms must be positive integers — "16/0" yields Infinity% and
+      # "a/b" NaN% padding, silently breaking the layout.
+      unless aspect_ratio.is_a?(String) && aspect_ratio.match?(%r{\A[1-9]\d*/[1-9]\d*\z})
+        raise ArgumentError, %(aspect_ratio must be a "w/h" string of positive integers (e.g. "16/9"))
       end
       @aspect_ratio = aspect_ratio
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(class: "pk-aspect-ratio", style: "padding-bottom: #{padding_bottom}%") do
-        div(**mix({ class: "pk-aspect-ratio-inner" }, @attrs), &block)
+      # **mix on the ROOT (kit rule) — caller attrs previously landed on the
+      # inner div and could never reach the actual root element.
+      div(**mix({ class: "pk-aspect-ratio", style: "padding-bottom: #{padding_bottom}%" }, @attrs)) do
+        div(class: "pk-aspect-ratio-inner", &block)
       end
     end
 

data/app/components/phlex_kit/calendar/calendar_body.rb

@@ -7,7 +7,15 @@ module PhlexKit
     end
 
     def view_template
-      table(**mix({ class: "pk-calendar-body", data: { phlex_kit__calendar_target: "calendar" } }, @attrs))
+      table(**mix({
+        class: "pk-calendar-body",
+        data: {
+          phlex_kit__calendar_target: "calendar",
+          # Delegated arrow-key/Home/End navigation for the day grid (the
+          # buttons are re-rendered wholesale, so the action lives here).
+          action: "keydown->phlex-kit--calendar#onKeydown"
+        }
+      }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/calendar/calendar_controller.js

@@ -119,6 +119,7 @@ export default class extends Controller {
     }
     this.selectedDatesValue = current;
     this.updateCalendar();
+    this.pushToOutlets();
     this.dispatchChange();
   }
 
@@ -192,7 +193,66 @@ export default class extends Controller {
       this.titleTarget.textContent = this.monthAndYear();
     }
     this.syncDropdowns();
+    // innerHTML replacement drops focus — remember the focused day so
+    // keyboard selection/month hops don't strand focus on <body>.
+    const focusedDay = this.calendarTarget.contains(document.activeElement)
+      ? document.activeElement.dataset?.day
+      : null;
     this.calendarTarget.innerHTML = this.calendarHTML();
+    this.ensureGridTabStop(focusedDay);
+  }
+
+  // Roving tabindex: exactly one day button is tabbable — the previously
+  // focused day (refocused across re-renders), else the selected day (its
+  // template ships tabindex="0"), else today, else the first enabled day of
+  // the current month. Without this, a calendar with no selection has no
+  // keyboard entry point at all.
+  ensureGridTabStop(focusedDay) {
+    const days = [...this.calendarTarget.querySelectorAll(".pk-calendar-day:not([disabled])")];
+    if (!days.length) return;
+    const focused = focusedDay ? days.find((d) => d.dataset.day === focusedDay) : null;
+    const stop =
+      focused ||
+      days.find((d) => d.getAttribute("tabindex") === "0") ||
+      days.find((d) => d.classList.contains("today")) ||
+      days.find((d) => !d.classList.contains("other")) ||
+      days[0];
+    days.forEach((d) => d.setAttribute("tabindex", d === stop ? "0" : "-1"));
+    if (focused) stop.focus({ preventScroll: true });
+  }
+
+  // Arrow keys move by day/week, Home/End jump within the rendered week row;
+  // crossing a month boundary re-renders the grid on the target month.
+  // Enter/Space activate natively (the days are real <button>s).
+  onKeydown(e) {
+    const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    const day = e.target.closest?.("[data-day]");
+    if (!day) return;
+
+    let target;
+    if (e.key in STEPS) {
+      target = this.parseDate(day.dataset.day);
+      target.setDate(target.getDate() + STEPS[e.key]);
+    } else if (e.key === "Home" || e.key === "End") {
+      const rowDays = [...day.closest("tr").querySelectorAll("[data-day]")];
+      target = this.parseDate(rowDays[e.key === "Home" ? 0 : rowDays.length - 1].dataset.day);
+    } else {
+      return;
+    }
+    e.preventDefault();
+
+    const iso = this.isoDate(target);
+    if (this.isDateDisabled(iso)) return; // min/max/booked boundary: stay put
+
+    if (target.getMonth() !== this.viewDate().getMonth() || target.getFullYear() !== this.viewDate().getFullYear()) {
+      this.viewDateValue = iso; // re-renders the grid on the target month
+    }
+    const next = this.calendarTarget.querySelector(`[data-day="${iso}"]:not([disabled])`);
+    if (!next) return;
+    this.calendarTarget.querySelectorAll(".pk-calendar-day").forEach((d) => {
+      d.setAttribute("tabindex", d === next ? "0" : "-1");
+    });
+    next.focus({ preventScroll: true });
   }
 
   syncDropdowns() {
@@ -404,8 +464,10 @@ export default class extends Controller {
       PPPP: `${dayOfWeek}, ${monthName} ${day}${daySuffix}, ${year}`,
     };
 
+    // Longest tokens first: MMMM must precede MM or the alternation eats
+    // "MMMM" as two "MM"s and renders the month number twice.
     const formattedDate = format.replace(
-      /yyyy|MM|dd|HH|mm|ss|EEEE|MMMM|do|PPPP/g,
+      /yyyy|MMMM|MM|dd|HH|mm|ss|EEEE|PPPP|do/g,
       (matched) => map[matched],
     );
     return formattedDate;

data/app/components/phlex_kit/chart/chart_controller.js

@@ -59,8 +59,12 @@ export default class extends Controller {
   defaultThemeColor(index) {
     const color = this.seriesColor(index)
     const translucentFill = ["line", "radar"].includes(this.optionsValue.type)
+    // color-mix, not hex + "33": the token may be any CSS color — the shipped
+    // zinc/neutral themes use oklch(...), and appending an alpha suffix to
+    // those produced invalid colors (fills silently broke).
+    const translucent = `color-mix(in oklab, ${color} 20%, transparent)`
     return {
-      backgroundColor: this.isCircular() ? undefined : (translucentFill ? color + "33" : color),
+      backgroundColor: this.isCircular() ? undefined : (translucentFill ? translucent : color),
       hoverBackgroundColor: color,
       borderColor: color,
       borderWidth: 2,

data/app/components/phlex_kit/clipboard/clipboard_popover.rb

@@ -6,7 +6,9 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&block)
-      div(class: "pk-clipboard-popover pk-hidden", data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
+      # role="status": the shown/hidden confirmation is a live region, so
+      # screen readers announce "Copied!" instead of a silent visual flash.
+      div(class: "pk-clipboard-popover pk-hidden", role: "status", data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
         div(**mix({ class: "pk-clipboard-popover-inner" }, @attrs), &block)
       end
     end

data/app/components/phlex_kit/combobox/combobox_controller.js

@@ -120,7 +120,13 @@ export default class extends Controller {
 
   toggleAllItems() {
     const isChecked = this.toggleAllTarget.checked
-    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.inputTargets.forEach(input => {
+      if (input.checked === isChecked) return
+      input.checked = isChecked
+      // Programmatic .checked flips fire no event — host listeners and the
+      // form-field validation must still hear select-all (uncheck() does this).
+      input.dispatchEvent(new Event("change", { bubbles: true }))
+    })
     this.updateTriggerContent()
   }
 
@@ -207,7 +213,11 @@ export default class extends Controller {
       e.preventDefault()
       e.stopPropagation() // the button sits inside the trigger's click-to-open area
     }
-    this.inputTargets.forEach(input => input.checked = false)
+    this.inputTargets.forEach(input => {
+      if (!input.checked) return
+      input.checked = false
+      input.dispatchEvent(new Event("change", { bubbles: true })) // see toggleAllItems
+    })
     if (this.hasToggleAllTarget) this.toggleAllTarget.checked = false
     this.updateTriggerContent()
   }
@@ -287,6 +297,9 @@ export default class extends Controller {
 
     this.selectedItemIndex = null
     this.clearActiveDescendant()
+    // Also drop the highlight itself: a filtered-out option that kept
+    // aria-current="true" stayed the Enter target while invisible.
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
 
     this.inputTargets.forEach((input) => {
       const text = this.inputContent(input).toLowerCase()

data/app/components/phlex_kit/context_menu/context_menu_checkbox_item.rb

@@ -14,9 +14,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-context-menu-item pk-context-menu-checkbox-item",
-        role: "menuitemcheckbox"
+        role: "menuitemcheckbox",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked)
+        input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
+              tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do
           render Icon.new(:check, size: nil)
         end

data/app/components/phlex_kit/context_menu/context_menu_controller.js

@@ -74,14 +74,64 @@ export default class extends Controller {
         e.preventDefault()
         items[items.length - 1]?.focus()
         break
+      case "Enter":
+      case " ":
+        // Explicit click so label rows (checkbox/radio) activate — labels
+        // have no native keyboard activation (and this gives links Space).
+        if (index >= 0) {
+          e.preventDefault()
+          items[index].click()
+        }
+        break
+      case "ArrowRight":
+        // On a sub trigger, enter the submenu (focus reveals it via
+        // :focus-within, making its rows visible to the roving nav).
+        if (document.activeElement?.matches(".pk-context-menu-sub-trigger")) {
+          e.preventDefault()
+          this.enterSub(document.activeElement)
+        }
+        break
+      case "ArrowLeft": {
+        // Inside a submenu, step back to its trigger (closes it on focus-out).
+        const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
+        if (sub) {
+          e.preventDefault()
+          sub.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-trigger")?.focus()
+        }
+        break
+      }
     }
   }
 
+  enterSub(trigger) {
+    trigger.focus()
+    const panel = trigger.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-content")
+    if (!panel) return
+    const first = [...panel.querySelectorAll("[role^=\"menuitem\"]")]
+      .find((el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0)
+    first?.focus()
+  }
+
+  // Mirrors a checkbox/radio row's native input state onto the row's
+  // aria-checked (radios also reset their group's siblings).
+  syncChecked(e) {
+    const input = e.target
+    const group = input.name
+      ? this.element.querySelectorAll(`input[name="${CSS.escape(input.name)}"]`)
+      : [input]
+    group.forEach((i) => i.closest("[role^=\"menuitem\"]")?.setAttribute("aria-checked", i.checked))
+  }
+
   anchor() {
     return this.hasTriggerTarget ? this.triggerTarget : this.element
   }
 
   items() {
-    return this.menuItemTargets.filter((el) => !el.closest("[data-disabled]") && !el.closest(".pk-hidden"))
+    // getClientRects also skips rows inside a CLOSED sub panel (its
+    // display:none comes from the hover/focus-within CSS, not .pk-hidden) —
+    // focus() on those silently fails and the roving nav jams there.
+    return this.menuItemTargets.filter(
+      (el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0
+    )
   }
 }

data/app/components/phlex_kit/context_menu/context_menu_radio_item.rb

@@ -13,9 +13,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-context-menu-item pk-context-menu-radio-item",
-        role: "menuitemradio"
+        role: "menuitemradio",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :radio, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked)
+        input(type: :radio, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
+              tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do
           # A filled selection dot is geometry, not icon-library vocabulary —
           # identical across icon_library settings (matches the dropdown).

data/app/components/phlex_kit/context_menu/context_menu_sub_trigger.rb

@@ -6,8 +6,11 @@ module PhlexKit
       div(**mix({
         class: "pk-context-menu-item pk-context-menu-sub-trigger",
         role: "menuitem",
-        tabindex: "0",
-        aria: { haspopup: "menu" }
+        # -1: roving focus reaches it via arrows (focus-within opens the sub);
+        # tabindex 0 made it a stray tab stop inside the menu.
+        tabindex: "-1",
+        aria: { haspopup: "menu" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
         block&.call
         render Icon.new(:chevron_right, size: nil, class: "pk-context-menu-sub-chevron")

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -54,9 +54,10 @@
   text-decoration: none; /* href items render as <a> — no UA underline at rest */
   outline: none;
 }
+/* Keyboard nav moves real focus — :focus is the highlight (no aria-selected:
+   that attribute is unsupported on menuitems and AT ignores it). */
 .pk-dropdown-menu-item:hover,
-.pk-dropdown-menu-item:focus,
-.pk-dropdown-menu-item[aria-selected="true"] { background: var(--pk-accent); text-decoration: none; }
+.pk-dropdown-menu-item:focus { background: var(--pk-accent); text-decoration: none; }
 
 .pk-dropdown-menu-label { margin: 0; padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
 .pk-dropdown-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_checkbox_item.rb

@@ -14,9 +14,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-dropdown-menu-item pk-dropdown-menu-checkbox-item",
-        role: "menuitemcheckbox"
+        role: "menuitemcheckbox",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__dropdown_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :checkbox, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        input(type: :checkbox, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked,
+              tabindex: "-1", data: { action: "change->phlex-kit--dropdown-menu#syncChecked" })
         span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) { check_icon }
         yield if block
       end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_content.rb

@@ -14,7 +14,9 @@ module PhlexKit
 
     def view_template(&block)
       div(class: wrapper_classes, popover: "manual", data: { phlex_kit__dropdown_menu_target: "content" }) do
-        div(**mix({ class: "pk-dropdown-menu-viewport" }, @attrs), &block)
+        # role="menu" on the items' direct parent — the rows render
+        # role="menuitem", which is invalid ARIA without a menu ancestor.
+        div(**mix({ class: "pk-dropdown-menu-viewport", role: "menu" }, @attrs), &block)
       end
     end