diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index e416a6b15..c34b61e03 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -33,7 +33,7 @@ module FiltersHelper tag.dialog class: "margin-block-start-half popup panel flex-column align-start gap-half fill-white shadow txt-small", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter", aria: { label: label, aria_description: label }, - controller: "navigable-list", + controller: "navigable-list dialog-focus", dialog_target: "dialog", navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true @@ -41,7 +41,7 @@ module FiltersHelper end def filter_title(title) - tag.strong title, class: "popup__title", tabindex: (-1 if platform.mobile?), autofocus: platform.mobile? + tag.strong title, class: "popup__title", tabindex: "-1", data: { dialog_focus_target: "touch" } end def collapsible_nav_section(title, **properties, &block) diff --git a/app/javascript/controllers/dialog_focus_controller.js b/app/javascript/controllers/dialog_focus_controller.js new file mode 100644 index 000000000..57dcf840e --- /dev/null +++ b/app/javascript/controllers/dialog_focus_controller.js @@ -0,0 +1,16 @@ +import { Controller } from "@hotwired/stimulus" +import { isTouchDevice } from "helpers/platform_helpers" + +export default class extends Controller { + static targets = [ "mouse", "touch" ] + + connect() { + this.#setup() + } + + #setup() { + const touch = isTouchDevice() + if (this.hasMouseTarget) this.mouseTarget.autofocus = !touch + if (this.hasTouchTarget) this.touchTarget.autofocus = touch + } +} diff --git a/app/views/events/index/filter/_board.html.erb b/app/views/events/index/filter/_board.html.erb index a9ce18724..e0baed89b 100644 --- a/app/views/events/index/filter/_board.html.erb +++ b/app/views/events/index/filter/_board.html.erb @@ -17,8 +17,8 @@ <%= filter_dialog "Board…" do %> <%= filter_title "Board…" %> - <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: !platform.mobile?, - type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> + <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true, + type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>