view_primitives 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf3e09110faf5ce30ed81d7760ab59bbf397fcdd1bfd907748e481d2ad31ae82
-  data.tar.gz: bfc5afe878bd677f57a02cf6a69169125a081490702f3194cd95113b0a8901ad
+  metadata.gz: 8a5109ecc704c72bc80c4ae941a18ddfeb527aa2fc0a16b2608727837877d5fd
+  data.tar.gz: 82e5650f28e6c1d13cd42b12026fdf3d770e0ef0e036382165fd39e02b3b1dcc
 SHA512:
-  metadata.gz: c3f2433c648728f95e0dceb2f22352866d7e868aff1b302527d6cc16298bd4251dae28a6c2753b91fd67fb4511edf5b6c38d1dc71a3f7ff1384bb65c1c93a55d
-  data.tar.gz: 10711ae4e2f413503f34621b3a3c0ffcf77b0ea80e9162fd2a38e2d2265690eaed83d16dccfd84b38d79d4c686f55eabe502e6c661cfb507c1379404cc12849e
+  metadata.gz: a65f979e1a4dd2b36870109dc289ffde247517da993b2a09d51281a013a16a4af3df8871437bd9b7ebffa306551a90a0465f92710a3b4af8edb25860843651d6
+  data.tar.gz: dccadc722af4f1a3fe69202f1442174966598d4bfc5269c524319b8b23bf3ced177651a518b62ad976085d465546ace0601912cbf1df53acb0a6f97263c0b29d

data/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.4] - 2026-09-18
+
+### Fixed
+
+- **DropdownMenu** trigger now carries `aria-haspopup="menu"`, `aria-controls`, and syncs `aria-expanded` on open/close/click-outside — screen readers previously had no way to know the trigger toggled a menu (#10)
+- **Sidebar** collapse toggle carries `aria-expanded`/`aria-controls`, kept in sync by the Stimulus controller
+- **Menubar** menu triggers carry `aria-haspopup="menu"`, `aria-controls`, and synced `aria-expanded`, matching the pattern already used by `MegaMenu`/`NavigationMenu`/`Navbar`
+- **Popover** trigger carries `aria-controls` and a synced `aria-expanded`, same pattern as `DropdownMenu`
+- **Dialog**, **AlertDialog**, **Drawer**, **Sheet**, **Command** triggers carry `aria-haspopup="dialog"`
+- **HoverCard** content now also reveals on keyboard focus (`:focus-within`), not just mouse hover
+- **Combobox** input carries the full ARIA 1.2 combobox pattern — `role="combobox"`, `aria-autocomplete`, `aria-expanded`, `aria-controls`, `aria-activedescendant` — and the option list is keyboard-navigable with <kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>Enter</kbd>/<kbd>Esc</kbd>
+
 ## [0.2.3] - 2026-09-02
 
 ### Fixed

data/lib/generators/view_primitives/add/templates/alert_dialog/alert_dialog_component.rb.tt

@@ -19,7 +19,10 @@ module UI
 
     def call
       content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
+        concat content_tag(:span, trigger,
+          class: "contents",
+          "aria-haspopup": "dialog",
+          data: { action: "click->dialog#open" }) if trigger
         concat panel
       end
     end

data/lib/generators/view_primitives/add/templates/combobox/combobox_component.rb.tt

@@ -5,7 +5,8 @@ module UI
     INPUT  = UI::Styles::INPUT
     PANEL  = "#{UI::Styles::POPOVER_PANEL} top-full left-0 mt-1 w-full overflow-hidden"
     LIST   = "max-h-[200px] overflow-y-auto p-1"
-    OPTION = "#{UI::Styles::MENU_ITEM} w-full cursor-pointer hover:bg-accent hover:text-accent-foreground"
+    OPTION = "#{UI::Styles::MENU_ITEM} w-full cursor-pointer hover:bg-accent hover:text-accent-foreground " \
+             "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
     EMPTY  = "py-4 text-center text-sm text-muted-foreground"
 
     def initialize(name:, options: [], value: nil, placeholder: "Select...", **html_attrs)
@@ -41,13 +42,19 @@ module UI
       selected_label = @options.find { |o| o[:value].to_s == @value }&.dig(:label)
       tag.input(
         type: "text",
+        role: "combobox",
         placeholder: @placeholder,
         value: selected_label,
         autocomplete: "off",
+        "aria-autocomplete": "list",
+        "aria-expanded": "false",
+        "aria-controls": list_id,
         class: INPUT,
         data: {
           combobox_target: "input",
-          action: "focus->combobox#open input->combobox#filter"
+          action: "focus->combobox#open input->combobox#filter " \
+                  "keydown.down->combobox#next keydown.up->combobox#prev " \
+                  "keydown.enter->combobox#choose keydown.esc->combobox#close"
         }
       )
     end
@@ -57,20 +64,24 @@ module UI
         data: { combobox_target: "panel" },
         hidden: true,
         class: PANEL) do
-        concat content_tag(:div, class: LIST) {
-          concat options_list
-          concat content_tag(:div, "No results.",
-            class: EMPTY,
-            data: { combobox_target: "empty" },
-            hidden: true)
-        }
+        concat content_tag(:div, options_list,
+          id: list_id,
+          role: "listbox",
+          class: LIST)
+        concat content_tag(:div, "No results.",
+          class: EMPTY,
+          role: "status",
+          data: { combobox_target: "empty" },
+          hidden: true)
       end
     end
 
     def options_list
-      safe_join(@options.map { |opt|
-        content_tag(:button, opt[:label],
-          type: "button",
+      safe_join(@options.each_with_index.map { |opt, index|
+        content_tag(:div, opt[:label],
+          id: option_id(index),
+          role: "option",
+          "aria-selected": (opt[:value].to_s == @value).to_s,
           class: OPTION,
           data: {
             combobox_target: "option",
@@ -80,5 +91,13 @@ module UI
           })
       })
     end
+
+    def option_id(index)
+      "#{list_id}-option-#{index}"
+    end
+
+    def list_id
+      @list_id ||= "combobox-list-#{object_id}"
+    end
   end
 end

data/lib/generators/view_primitives/add/templates/combobox/combobox_controller.js

@@ -3,13 +3,24 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["input", "hidden", "panel", "option", "empty"]
 
+  connect() {
+    this.activeIndex = -1
+  }
+
+  get visibleOptions() {
+    return this.optionTargets.filter(o => !o.hidden)
+  }
+
   open() {
+    this.inputTarget.setAttribute("aria-expanded", "true")
     this.panelTarget.hidden = false
     this.filter()
   }
 
   close() {
+    this.inputTarget.setAttribute("aria-expanded", "false")
     this.panelTarget.hidden = true
+    this._setActive(-1)
     const selected = this.optionTargets.find(o => o.dataset.comboboxValue === this.hiddenTarget.value)
     this.inputTarget.value = selected ? selected.dataset.comboboxLabel : ""
   }
@@ -23,16 +34,70 @@ export default class extends Controller {
       if (match) visible++
     })
     this.emptyTarget.hidden = visible > 0
+    this._setActive(-1)
+  }
+
+  next(event) {
+    event.preventDefault()
+    this._move(1)
+  }
+
+  prev(event) {
+    event.preventDefault()
+    this._move(-1)
+  }
+
+  choose(event) {
+    if (this.panelTarget.hidden) return
+    event.preventDefault()
+    const option = this.visibleOptions[this.activeIndex]
+    if (option) this._select(option)
   }
 
   select(event) {
-    const { comboboxValue, comboboxLabel } = event.currentTarget.dataset
-    this.hiddenTarget.value = comboboxValue
-    this.inputTarget.value = comboboxLabel
-    this.panelTarget.hidden = true
+    this._select(event.currentTarget)
   }
 
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
+
+  _move(step) {
+    if (this.panelTarget.hidden) {
+      this.open()
+      return
+    }
+
+    const options = this.visibleOptions
+    if (options.length === 0) return
+
+    const next = this.activeIndex === -1
+      ? (step > 0 ? 0 : options.length - 1)
+      : (this.activeIndex + step + options.length) % options.length
+
+    this._setActive(next)
+  }
+
+  _setActive(index) {
+    const options = this.visibleOptions
+    options.forEach(o => { o.dataset.active = "false" })
+
+    this.activeIndex = index
+    const active = options[index]
+    if (active) {
+      active.dataset.active = "true"
+      active.scrollIntoView({ block: "nearest" })
+      this.inputTarget.setAttribute("aria-activedescendant", active.id)
+    } else {
+      this.inputTarget.removeAttribute("aria-activedescendant")
+    }
+  }
+
+  _select(option) {
+    const { comboboxValue, comboboxLabel } = option.dataset
+    this.hiddenTarget.value = comboboxValue
+    this.inputTarget.value = comboboxLabel
+    this.optionTargets.forEach(o => o.setAttribute("aria-selected", String(o === option)))
+    this.close()
+  }
 }

data/lib/generators/view_primitives/add/templates/command/command_component.rb.tt

@@ -34,7 +34,10 @@ module UI
 
     def call
       content_tag(:div, data: { controller: "command" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->command#open" }, class: "contents") if trigger
+        concat content_tag(:span, trigger,
+          class: "contents",
+          "aria-haspopup": "dialog",
+          data: { action: "click->command#open" }) if trigger
         concat panel
       end
     end

data/lib/generators/view_primitives/add/templates/dialog/dialog_component.rb.tt

@@ -22,7 +22,10 @@ module UI
 
     def call
       content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
+        concat content_tag(:span, trigger,
+          class: "contents",
+          "aria-haspopup": "dialog",
+          data: { action: "click->dialog#open" }) if trigger
         concat panel
       end
     end

data/lib/generators/view_primitives/add/templates/drawer/drawer_component.rb.tt

@@ -18,7 +18,10 @@ module UI
 
     def call
       content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
+        concat content_tag(:span, trigger,
+          class: "contents",
+          "aria-haspopup": "dialog",
+          data: { action: "click->dialog#open" }) if trigger
         concat panel
       end
     end

data/lib/generators/view_primitives/add/templates/dropdown_menu/dropdown_controller.js

@@ -1,17 +1,22 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["panel"]
+  static targets = ["trigger", "panel"]
 
   toggle() {
-    this.panelTarget.hidden = !this.panelTarget.hidden
+    this._setOpen(this.panelTarget.hidden)
   }
 
   close() {
-    this.panelTarget.hidden = true
+    this._setOpen(false)
   }
 
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
+
+  _setOpen(open) {
+    this.panelTarget.hidden = !open
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", String(open))
+  }
 }

data/lib/generators/view_primitives/add/templates/dropdown_menu/dropdown_menu_component.rb.tt

@@ -33,20 +33,34 @@ module UI
           action: "click@document->dropdown#closeOnClickOutside"
         },
         **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->dropdown#toggle" }, class: "contents") if trigger
+        concat trigger_wrapper if trigger
         concat panel
       end
     end
 
     private
 
+    def trigger_wrapper
+      content_tag(:span, trigger,
+        class: "contents",
+        data: { dropdown_target: "trigger", action: "click->dropdown#toggle" },
+        "aria-haspopup": "menu",
+        "aria-expanded": "false",
+        "aria-controls": panel_id)
+    end
+
     def panel
       content_tag(:div,
+        id: panel_id,
         data: { dropdown_target: "panel" },
         hidden: true,
         class: cn(PANEL, ALIGN.fetch(@align, ALIGN[:start]), @extra_class)) do
         concat content
       end
     end
+
+    def panel_id
+      @panel_id ||= "dropdown-panel-#{object_id}"
+    end
   end
 end

data/lib/generators/view_primitives/add/templates/hover_card/hover_card_component.rb.tt

@@ -5,7 +5,7 @@ module UI
     renders_one :trigger
 
     CARD_BASE = "#{UI::Styles::POPOVER_PANEL} w-64 p-4 " \
-                "opacity-0 group-hover:opacity-100 pointer-events-none " \
+                "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 pointer-events-none " \
                 "transition-opacity duration-200"
 
     POSITIONS = {

data/lib/generators/view_primitives/add/templates/menubar/menubar_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["menu", "panel"]
+  static targets = ["menu", "trigger", "panel"]
 
   get openIndex() {
     return this.panelTargets.findIndex(p => !p.hidden)
@@ -10,10 +10,9 @@ export default class extends Controller {
   toggle(event) {
     const menu = event.currentTarget.closest("[data-menubar-target='menu']")
     const index = this.menuTargets.indexOf(menu)
-    const panel = this.panelTargets[index]
-    const wasOpen = !panel.hidden
+    const wasOpen = !this.panelTargets[index].hidden
     this.closeAll()
-    if (!wasOpen) panel.hidden = false
+    if (!wasOpen) this._open(index)
   }
 
   openOnHover(event) {
@@ -21,14 +20,20 @@ export default class extends Controller {
     const menu = event.currentTarget.closest("[data-menubar-target='menu']")
     const index = this.menuTargets.indexOf(menu)
     this.closeAll()
-    this.panelTargets[index].hidden = false
+    this._open(index)
   }
 
   closeAll() {
     this.panelTargets.forEach(p => p.hidden = true)
+    this.triggerTargets.forEach(t => t.setAttribute("aria-expanded", "false"))
   }
 
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.closeAll()
   }
+
+  _open(index) {
+    this.panelTargets[index].hidden = false
+    this.triggerTargets[index].setAttribute("aria-expanded", "true")
+  }
 }

data/lib/generators/view_primitives/add/templates/menubar/menubar_menu_component.rb.tt

@@ -20,8 +20,12 @@ module UI
           @label,
           type: "button",
           class: TRIGGER,
-          data: { action: "click->menubar#toggle mouseenter->menubar#openOnHover" })
+          "aria-haspopup": "menu",
+          "aria-expanded": "false",
+          "aria-controls": panel_id,
+          data: { menubar_target: "trigger", action: "click->menubar#toggle mouseenter->menubar#openOnHover" })
         concat content_tag(:div,
+          id: panel_id,
           data: { menubar_target: "panel" },
           hidden: true,
           class: cn(PANEL, @extra_class)) {
@@ -29,5 +33,11 @@ module UI
         }
       end
     end
+
+    private
+
+    def panel_id
+      @panel_id ||= "menubar-panel-#{object_id}"
+    end
   end
 end

data/lib/generators/view_primitives/add/templates/popover/popover_component.rb.tt

@@ -31,15 +31,24 @@ module UI
         class: "relative inline-block",
         data: { controller: "popover", action: "click@document->popover#closeOnClickOutside" },
         **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->popover#toggle" }, class: "contents") if trigger
+        concat trigger_wrapper if trigger
         concat panel
       end
     end
 
     private
 
+    def trigger_wrapper
+      content_tag(:span, trigger,
+        class: "contents",
+        data: { popover_target: "trigger", action: "click->popover#toggle" },
+        "aria-expanded": "false",
+        "aria-controls": panel_id)
+    end
+
     def panel
       content_tag(:div,
+        id: panel_id,
         class: cn(
           PANEL_BASE,
           ALIGN.fetch(@align, ALIGN[:start]),
@@ -51,5 +60,9 @@ module UI
         content
       end
     end
+
+    def panel_id
+      @panel_id ||= "popover-panel-#{object_id}"
+    end
   end
 end

data/lib/generators/view_primitives/add/templates/popover/popover_controller.js

@@ -1,17 +1,22 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["panel"]
+  static targets = ["trigger", "panel"]
 
   toggle() {
-    this.panelTarget.hidden = !this.panelTarget.hidden
+    this._setOpen(this.panelTarget.hidden)
   }
 
   close() {
-    this.panelTarget.hidden = true
+    this._setOpen(false)
   }
 
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
+
+  _setOpen(open) {
+    this.panelTarget.hidden = !open
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", String(open))
+  }
 }

data/lib/generators/view_primitives/add/templates/sheet/sheet_component.rb.tt

@@ -30,7 +30,10 @@ module UI
 
     def call
       content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
+        concat content_tag(:span, trigger,
+          class: "contents",
+          "aria-haspopup": "dialog",
+          data: { action: "click->dialog#open" }) if trigger
         concat panel
       end
     end

data/lib/generators/view_primitives/add/templates/sidebar/sidebar_component.rb.tt

@@ -82,17 +82,23 @@ module UI
       content_tag(:button, type: "button",
         class: TOGGLE_CLS,
         "aria-label": "Toggle sidebar",
-        data: { action: "click->sidebar#toggle" }) { chevron_icon }
+        "aria-expanded": (!@collapsed).to_s,
+        "aria-controls": nav_id,
+        data: { action: "click->sidebar#toggle", sidebar_target: "toggle" }) { chevron_icon }
     end
 
     def nav_body
-      content_tag(:nav, class: NAV_CLS) do
+      content_tag(:nav, id: nav_id, class: NAV_CLS) do
         concat safe_join(groups) if groups.any?
         concat content_tag(:div, safe_join(items), class: "flex flex-col gap-0.5") if items.any?
         concat content if content?
       end
     end
 
+    def nav_id
+      @nav_id ||= "sidebar-nav-#{object_id}"
+    end
+
     def chevron_icon
       content_tag(:svg,
         content_tag(:path, nil, d: "m15 18-6-6 6-6", "stroke-linecap": "round", "stroke-linejoin": "round"),

data/lib/generators/view_primitives/add/templates/sidebar/sidebar_controller.js

@@ -1,11 +1,18 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static targets = ["toggle"]
+
   toggle() {
     const collapsed = this.element.dataset.collapsed === "true"
-    this.element.dataset.collapsed = String(!collapsed)
+    this._setCollapsed(!collapsed)
   }
 
-  open()  { this.element.dataset.collapsed = "false" }
-  close() { this.element.dataset.collapsed = "true"  }
+  open()  { this._setCollapsed(false) }
+  close() { this._setCollapsed(true) }
+
+  _setCollapsed(collapsed) {
+    this.element.dataset.collapsed = String(collapsed)
+    if (this.hasToggleTarget) this.toggleTarget.setAttribute("aria-expanded", String(!collapsed))
+  }
 }

data/lib/view_primitives/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ViewPrimitives
-  VERSION = "0.2.3"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: view_primitives
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Alexey Poimtsev
@@ -269,7 +269,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.19
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Primitive view components and helpers for Rails applications
 test_files: []