From 09f18a2087a308e52508bd954385d1ae7f937dd8 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 20 Nov 2025 09:21:42 +0100 Subject: [PATCH 001/116] Navigate columns with the keyboard --- app/assets/stylesheets/card-columns.css | 12 +++++++++++- .../controllers/collapsible_columns_controller.js | 8 ++++++++ app/views/boards/show/_closed.html.erb | 4 +++- app/views/boards/show/_column.html.erb | 4 +++- app/views/boards/show/_columns.html.erb | 5 +++-- app/views/boards/show/_not_now.html.erb | 4 +++- app/views/boards/show/_stream.html.erb | 2 ++ 7 files changed, 33 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index f17fe8f37..20cd73e69 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -2,6 +2,12 @@ /* Column container /* ------------------------------------------------------------------------ */ + /* DEBUG: Remove this when done debugging keyboard navigation */ + .card-columns:focus, + .cards:focus { + outline: 3px solid purple !important; + } + #main:has(.card-columns) { --main-padding: 0; } @@ -74,6 +80,7 @@ --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas)); inline-size: var(--column-width-expanded); + outline: none; position: relative; scroll-snap-align: start; @@ -118,7 +125,6 @@ } } - @media (any-hover: hover) { .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { filter: blur(3px) brightness(1.2); @@ -179,6 +185,10 @@ .cards--grid & { display: contents; } + + .card[aria-selected] { + outline: 2px solid tomato; + } } .cards__new-column { diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index b11821f3f..e37ae963c 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -40,6 +40,14 @@ export default class extends Controller { await this.#restoreColumnsDisablingTransitions() } + focusOnColumn(event) { + const column = event.target + if (this.#isCollapsed(column)) { + this.#collapseAllExcept(column) + this.#expand(column) + } + } + async #restoreColumnsDisablingTransitions() { this.#disableTransitions() this.#restoreColumns() diff --git a/app/views/boards/show/_closed.html.erb b/app/views/boards/show/_closed.html.erb index 51c587c78..126be0dbc 100644 --- a/app/views/boards/show/_closed.html.erb +++ b/app/views/boards/show/_closed.html.erb @@ -1,9 +1,11 @@