diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index cb7361a72..df3007c12 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -1,23 +1,10 @@
@layer components {
- .fizzy-dialog:is(.panel) {
- --panel-border-color: var(--color-selected-dark);
- --panel-border-radius: 1.4em;
- --panel-size: 45ch;
-
- align-items: stretch;
- box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
- 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
- 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
- 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
- flex-direction: column;
- gap: 2px;
- }
-
- .input:is(.fizzy-menu) {
+ .input:is(.fizzy-menu-trigger) {
--input-border-color: var(--color-selected-dark);
--input-padding: 0.2em 2em 0.2em 0.9em;
background-color: var(--color-canvas);
+ inline-size: auto;
margin-block-start: 0.1em;
::-webkit-search-cancel-button {
@@ -38,7 +25,21 @@
}
}
- .fizzy-dialog__close {
+ .fizzy-menu:is(.panel) {
+ --panel-border-color: var(--color-selected-dark);
+ --panel-border-radius: 1.4em;
+ --panel-size: 45ch;
+
+ align-items: stretch;
+ box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
+ 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
+ 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
+ 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ .fizzy-menu__close {
@media (any-hover: hover) {
display: none;
}
@@ -52,6 +53,7 @@
flex-wrap: wrap;
gap: var(--gap);
inline-size: 100%;
+ list-style: none;
justify-content: center;
margin: var(--block-space) auto calc(var(--block-space-half) / 2);
max-inline-size: 100%;
diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index 578b98ad3..abb1e7947 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -16,7 +16,7 @@ module FiltersHelper
end
def filter_place_menu_item(path, label, icon)
- tag.li class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do
+ tag.li class: "popup__group", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
concat icon_tag(icon)
concat(link_to(path, class: "popup__item btn") do
concat tag.span(label, class: "overflow-ellipsis")
@@ -35,4 +35,12 @@ module FiltersHelper
navigable_list_actionable_items_value: true
}, &block
end
+
+ def filter_hotkey_link(title, path, key, icon)
+ link_to path, class: "popup__group btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
+ concat icon_tag(icon)
+ concat tag.span(title.html_safe)
+ concat tag.kbd(key)
+ end
+ end
end
diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js
index 533c3bb89..a5aa1a94f 100644
--- a/app/javascript/controllers/navigable_list_controller.js
+++ b/app/javascript/controllers/navigable_list_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
import { nextFrame } from "helpers/timing_helpers"
export default class extends Controller {
- static targets = [ "item" ]
+ static targets = [ "item", "input" ]
static values = {
reverseOrder: { type: Boolean, default: false },
selectionAttribute: { type: String, default: "aria-selected" },
@@ -73,6 +73,7 @@ export default class extends Controller {
async #setCurrentFrom(element) {
const selectedItem = this.#visibleItems.find(item => item.contains(element))
+ const id = selectedItem?.getAttribute("id")
if (selectedItem) {
this.#clearSelection()
@@ -80,6 +81,9 @@ export default class extends Controller {
this.currentItem = selectedItem
await nextFrame()
if (this.focusOnSelectionValue) { this.currentItem.focus() }
+ if (this.hasInputTarget && id) {
+ this.inputTarget.setAttribute("aria-activedescendant", id)
+ }
}
}
diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index 7761ce1ad..3b3b6580f 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -5,14 +5,14 @@
<% end %>
<% if Current.user.collections.one? %>
- <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
+ <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= tag.div class: "popup__item btn" do %>
<%= Current.user.collections.first.name %>
GO TO ›
<% end %>
<% end %>
<% elsif Current.user.collections.many? %>
- <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
+ <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collections-all", data: { filter_target: "item", navigable_list_target: "item" } do %>