diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 20cd73e69..0fd4812da 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -3,8 +3,7 @@ /* ------------------------------------------------------------------------ */ /* DEBUG: Remove this when done debugging keyboard navigation */ - .card-columns:focus, - .cards:focus { + .card-columns :focus { outline: 3px solid purple !important; } diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index 9af3b7912..9667f5290 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/app/javascript/controllers/navigable_list_controller.js @@ -11,11 +11,17 @@ export default class extends Controller { reverseNavigation: { type: Boolean, default: false }, supportHorizontalNavigation: { type: Boolean, default: true }, supportVerticalNavigation: { type: Boolean, default: true }, - hasNestedNavigation: { type: Boolean, default: false } + hasNestedNavigation: { type: Boolean, default: false }, + preventHandledKeys: { type: Boolean, default: false }, + autoSelect: { type: Boolean, default: true } } connect() { - this.reset() + if (this.autoSelectValue) { + this.reset() + } else { + this.#activateManualSelection() + } } // Actions @@ -29,7 +35,18 @@ export default class extends Controller { } navigate(event) { + console.debug("PRESSED", this.element); this.#keyHandlers[event.key]?.call(this, event) + + const parentNavigableList = this.element.parentElement?.closest('[data-controller~="navigable-list"]') + if (parentNavigableList) { + const parentController = this.application.getControllerForElementAndIdentifier(parentNavigableList, "navigable-list") + if (parentController) { + console.debug("CALLED!"); + parentNavigableList.focus() + parentController.navigate(event) + } + } } select({ target }) { @@ -95,6 +112,11 @@ export default class extends Controller { #scrollAndFocusOnSelectedItem() { const id = this.currentItem?.getAttribute("id") this.currentItem.scrollIntoView({ block: "nearest", inline: "nearest" }) + console.debug("this.currentItem", this.currentItem); + if (this.hasNestedNavigationValue) { + this.#activateNestedNavigableList() + } + if (this.focusOnSelectionValue) { this.currentItem.focus() } if (this.hasInputTarget && id) { this.inputTarget.setAttribute("aria-activedescendant", id) @@ -108,10 +130,19 @@ export default class extends Controller { } } - #handleArrowKey(event, fn, preventDefault = true) { + #activateManualSelection() { + const preselectedItem = this.itemTargets.find(item => item.hasAttribute(this.selectionAttributeValue)) + if (preselectedItem) { + this.#setCurrentFrom(preselectedItem) + } + } + + #handleArrowKey(event, fn) { if (event.shiftKey || event.metaKey || event.ctrlKey) { return } fn.call() - if (preventDefault) { event.preventDefault() } + if (this.preventHandledKeysValue) { + event.preventDefault() + } } #clickCurrentItem(event) { @@ -137,6 +168,24 @@ export default class extends Controller { } } + #activateNestedNavigableList() { + const nestedController = this.#findNestedNavigableListController() + if (nestedController) { + console.debug("CALLED!", this.element); + nestedController.reset() + return true + } + return false + } + + #findNestedNavigableListController() { + const nestedElement = this.currentItem?.querySelector('[data-controller~="navigable-list"]') + if (nestedElement) { + return this.application.getControllerForElementAndIdentifier(nestedElement, "navigable-list") + } + return null + } + #keyHandlers = { ArrowDown(event) { if (this.supportVerticalNavigationValue) { @@ -152,12 +201,12 @@ export default class extends Controller { }, ArrowRight(event) { if (this.supportHorizontalNavigationValue) { - this.#handleArrowKey(event, this.#selectNext.bind(this), false) + this.#handleArrowKey(event, this.#selectNext.bind(this)) } }, ArrowLeft(event) { if (this.supportHorizontalNavigationValue) { - this.#handleArrowKey(event, this.#selectPrevious.bind(this), false) + this.#handleArrowKey(event, this.#selectPrevious.bind(this)) } }, Enter(event) { diff --git a/app/views/boards/show/_closed.html.erb b/app/views/boards/show/_closed.html.erb index 9562c321c..3d1b40322 100644 --- a/app/views/boards/show/_closed.html.erb +++ b/app/views/boards/show/_closed.html.erb @@ -4,12 +4,11 @@ data-drag-and-strum-target="container" data-collapsible-columns-target="column" data-navigable-list-target="item" - data-navigable-list-support-horizontal-navigation-value="false" data-column-name="Done" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn" data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" > -
+
<%= 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) %> diff --git a/app/views/boards/show/_column.html.erb b/app/views/boards/show/_column.html.erb index ab4b23dbf..2a2fa9ccc 100644 --- a/app/views/boards/show/_column.html.erb +++ b/app/views/boards/show/_column.html.erb @@ -5,13 +5,12 @@ data-drag-and-strum-target="container" data-collapsible-columns-target="column" data-navigable-list-target="item" - data-navigable-list-support-horizontal-navigation-value="false" data-controller="clicker" data-column-name="<%= column.name %>" 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) %>" > -
+
<%= render "boards/show/menu/column", column: column %> <%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %> diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index 6535be917..ae3e5d140 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/app/views/boards/show/_columns.html.erb @@ -8,6 +8,8 @@ collapsible_columns_title_not_visible_class: "is-off-screen", navigable_list_support_vertical_navigation_value: false, navigable_list_has_nested_navigation_value: true, + navigable_list_prevent_handled_keys_value: true, + navigable_list_auto_select_value: false, action: " keydown->navigable-list#navigate dragstart->drag-and-drop#dragStart diff --git a/app/views/boards/show/_not_now.html.erb b/app/views/boards/show/_not_now.html.erb index 8f41ba10f..43cbd60ea 100644 --- a/app/views/boards/show/_not_now.html.erb +++ b/app/views/boards/show/_not_now.html.erb @@ -4,12 +4,11 @@ data-drag-and-drop-target="container" data-drag-and-strum-target="container" data-navigable-list-target="item" - data-navigable-list-support-horizontal-navigation-value="false" data-column-name="Not Now" 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__") %>" > -
+
<%= 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) %> diff --git a/app/views/boards/show/_stream.html.erb b/app/views/boards/show/_stream.html.erb index 0d6b3c124..2fd4c27bf 100644 --- a/app/views/boards/show/_stream.html.erb +++ b/app/views/boards/show/_stream.html.erb @@ -2,11 +2,11 @@ tabindex="0" data-drag-and-drop-target="container" data-navigable-list-target="item" - data-navigable-list-support-horizontal-navigation-value="false" data-column-name="Maybe?" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" - data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"> -
+ data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>" + aria-selected="true"> +

Maybe?

diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 7a66d3c78..91adda1db 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -1,6 +1,6 @@ <% draggable = local_assigns.fetch(:draggable, false) && card.published? %> -<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item" } do %> +<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item", navigable_list_target: "item" }, tabindex: 0 do %>
<%= render "cards/display/preview/board", card: card %>