Make cards activable via keyboard

This commit is contained in:
Jorge Manrubia
2025-11-20 11:41:37 +01:00
parent 0726da2708
commit 95b2d6ffe6
5 changed files with 8 additions and 8 deletions
+1 -1
View File
@@ -8,7 +8,7 @@
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
>
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/expander", title: "Done", count: board.cards.closed.count, column_id: "closed-cards" %>
<%= render "boards/show/menu/maximize", column_path: board_columns_closed_path(board) %>
+1 -1
View File
@@ -10,7 +10,7 @@
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn"
data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
>
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/menu/column", column: column %>
<%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %>
+1 -1
View File
@@ -8,7 +8,7 @@
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
>
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/expander", title: "Not Now", count: board.cards.postponed.count, column_id: "not-now" %>
<%= render "boards/show/menu/maximize", column_path: board_columns_not_now_path(board) %>
+1 -1
View File
@@ -6,7 +6,7 @@
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"
aria-selected="true">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<div class="cards__expander">
<h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
+4 -4
View File
@@ -2,6 +2,10 @@
<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item", navigable_list_target: "item" }, tabindex: 0 do %>
<div class="flex flex-column flex-item-grow max-inline-size">
<%= link_to card_path(card), draggable: false, class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
<span class="for-screen-reader"><%= card.title %></span>
<% end %>
<header class="card__header">
<%= render "cards/display/preview/board", card: card %>
<%= render "cards/display/preview/tags", card: card %>
@@ -31,10 +35,6 @@
<%= render "cards/display/common/background", card: card %>
</footer>
<%= link_to card_path(card), draggable: false, class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
<span class="for-screen-reader"><%= card.title %></span>
<% end %>
<% if card.entropic? %>
<%= render "cards/display/preview/bubble", card: card %>
<% end %>