From bdf3356e1b17b0d53b3d612048f288524c02e33d Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 12 Aug 2025 14:49:37 -0500 Subject: [PATCH 1/8] Make user list navigable on account and collection settings pages --- app/assets/stylesheets/settings.css | 18 +++++++++++++++--- app/helpers/accesses_helper.rb | 5 ++++- app/views/accounts/_user.html.erb | 2 +- app/views/accounts/settings/_users.html.erb | 9 +++++++-- app/views/collections/_access_toggle.erb | 3 +-- 5 files changed, 28 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css index 03986bc45..983034a03 100644 --- a/app/assets/stylesheets/settings.css +++ b/app/assets/stylesheets/settings.css @@ -1,6 +1,7 @@ @layer components { .settings { --settings-spacer: var(--block-space); + --settings-item-padding-inline: 0.5ch; display: grid; gap: calc(var(--settings-spacer) * 2); @@ -55,14 +56,25 @@ .settings__user-list { flex: 1 1 auto; - inline-size: 100%; list-style: none; - margin: calc(var(--settings-spacer) / -4) 0; + margin: calc(var(--settings-spacer) / -4) calc(-1 * var(--settings-item-padding-inline)); padding: 0; overflow: auto; + li { + border-radius: 0.5em; + + /* Add padding if it's not already on a link within */ + &:not(:has(a:first-child)) { padding-inline-end: var(--settings-item-padding-inline); } + &:not(:has(a:last-child)) { padding-inline-end: var(--settings-item-padding-inline); } + + &[aria-selected] { + background: var(--color-selected); + } + } + a { - padding-block: calc(var(--settings-spacer) / 4); + padding: calc(var(--settings-spacer) / 4) var(--settings-item-padding-inline); @media(any-hover: hover) { &:hover { diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index ec2ba6722..5eb39466c 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -1,7 +1,10 @@ module AccessesHelper def access_menu_tag(collection, **options, &) tag.menu class: [ options[:class], { "toggler--toggled": collection.all_access? } ], data: { - controller: "filter toggle-class", + controller: "filter toggle-class navigable-list", + action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset", + navigable_list_focus_on_selection_value: true, + navigable_list_actionable_items_value: true, toggle_class_toggle_class: "toggler--toggled" }, & end diff --git a/app/views/accounts/_user.html.erb b/app/views/accounts/_user.html.erb index 32e0c66ed..add56b38f 100644 --- a/app/views/accounts/_user.html.erb +++ b/app/views/accounts/_user.html.erb @@ -1,4 +1,4 @@ -
  • +
  • <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %> <%= avatar_preview_tag user, hidden_for_screen_reader: true %> <%= user.name %> diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index 8f3c8594f..3f0635fbb 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -1,4 +1,9 @@ -
    +<%= tag.div class: "settings__panel settings__panel--users panel shadow center", data: { + controller: "filter navigable-list", + action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset", + navigable_list_focus_on_selection_value: true, + navigable_list_actionable_items_value: true +} do %>

    People on the account

    <%#= render "accounts/invite" # Scheduled work in https://3.basecamp.com/2914079/buckets/37331921/todos/8746162337 %> @@ -9,4 +14,4 @@ <%= render partial: "accounts/user", collection: users %>
    - +<% end %> diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb index 12a7eda80..579cb4fc1 100644 --- a/app/views/collections/_access_toggle.erb +++ b/app/views/collections/_access_toggle.erb @@ -1,5 +1,4 @@ -
  • - +
  • <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %> <%= avatar_preview_tag user, hidden_for_screen_reader: true %> <%= user.name %> From 327f48bd4f0cda36ef1cbe9dc89bd9ddd8737e9d Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 12 Aug 2025 15:12:48 -0500 Subject: [PATCH 2/8] Ensure avatars aren't tab-focusable when previewing --- app/helpers/avatars_helper.rb | 2 +- app/views/cards/display/common/_assignees.html.erb | 2 +- app/views/cards/display/common/_meta.html.erb | 2 +- app/views/cards/display/preview/_assignees.html.erb | 2 +- app/views/cards/display/preview/_meta.html.erb | 2 +- app/views/cards/display/preview/_people.html.erb | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb index 99cd57efa..f3b9e5e2f 100644 --- a/app/helpers/avatars_helper.rb +++ b/app/helpers/avatars_helper.rb @@ -20,7 +20,7 @@ module AvatarsHelper end def avatar_preview_tag(user, hidden_for_screen_reader: false, **options) - tag.span class: "avatar", + tag.span class: class_names("avatar", options.delete(:class)), aria: { hidden: hidden_for_screen_reader, label: user.name }, tabindex: hidden_for_screen_reader ? -1 : nil do avatar_image_tag(user, **options) diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb index 9dc9264ab..895b29bd9 100644 --- a/app/views/cards/display/common/_assignees.html.erb +++ b/app/views/cards/display/common/_assignees.html.erb @@ -1,6 +1,6 @@
    <% card.assignees.each do |assignee| %> - <%= avatar_tag assignee %> + <%= avatar_tag assignee, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %> <% end %>
    > diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb index 8d03eba4a..f2d64c8fc 100644 --- a/app/views/cards/display/common/_meta.html.erb +++ b/app/views/cards/display/common/_meta.html.erb @@ -1,7 +1,7 @@
    - <%= avatar_tag card.creator, class: "card__meta-author" %> + <%= avatar_tag card.creator, class: "card__meta-author", tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %> Added <%= local_datetime_tag(card.created_at, style: :daysago) %> diff --git a/app/views/cards/display/preview/_assignees.html.erb b/app/views/cards/display/preview/_assignees.html.erb index 3a4655224..523d1ca47 100644 --- a/app/views/cards/display/preview/_assignees.html.erb +++ b/app/views/cards/display/preview/_assignees.html.erb @@ -1 +1 @@ -<%= render "cards/display/common/assignees", card: card %> +<%= render "cards/display/common/assignees", card: card, preview: true %> diff --git a/app/views/cards/display/preview/_meta.html.erb b/app/views/cards/display/preview/_meta.html.erb index 0b25c23f6..8d9940fa2 100644 --- a/app/views/cards/display/preview/_meta.html.erb +++ b/app/views/cards/display/preview/_meta.html.erb @@ -1,3 +1,3 @@ -<%= render "cards/display/common/meta", card: card do %> +<%= render "cards/display/common/meta", card: card, preview: true do %> <%= render "cards/display/preview/assignees", card: card %> <% end %> diff --git a/app/views/cards/display/preview/_people.html.erb b/app/views/cards/display/preview/_people.html.erb index 08319d327..294039f71 100644 --- a/app/views/cards/display/preview/_people.html.erb +++ b/app/views/cards/display/preview/_people.html.erb @@ -1,3 +1,3 @@ <%= render "cards/display/common/people", card: card do%> - <%= render "cards/display/preview/assignees", card: card %> + <%= render "cards/display/preview/assignees", card: card, preview: true %> <% end %> From 54ecd47c777a924a15c3157273dfd94e6d33a599 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 12 Aug 2025 15:15:11 -0500 Subject: [PATCH 3/8] Use stage preview when previewing --- app/views/cards/display/_preview.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 1a4977cdb..9da8be290 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -27,7 +27,7 @@ <% end %>
    - <%= render "cards/stagings/stages", card: card if card.doing? %> + <%= render "cards/display/preview/stages", card: card if card.doing? %>
    From 8f86b25a54a6de4fa1f5370e1bc7374f6158dcdd Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 12 Aug 2025 15:20:21 -0500 Subject: [PATCH 4/8] Ensure card__link is visible on cards with backgrounds --- app/views/cards/display/_preview.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 9da8be290..414096318 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -21,10 +21,6 @@

    <%= card.title %>

    - - <%= link_to collection_card_path(card.collection, card), draggable: false, class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %> - <%= card.title %> - <% end %>
    <%= render "cards/display/preview/stages", card: card if card.doing? %> @@ -36,6 +32,10 @@ <%= render "cards/display/common/background", card: card %> + <%= link_to collection_card_path(card.collection, card), draggable: false, class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %> + <%= card.title %> + <% end %> + <% if card.entropic? %> <%= render "cards/display/preview/bubble", card: card %> <% end %> From 5da1dee4500b066f23da0bea3d3fcda9feddb1c2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 13 Aug 2025 12:20:39 -0500 Subject: [PATCH 5/8] Only add selected BG color when it makes sense --- app/assets/stylesheets/settings.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css index 983034a03..f2f1be59e 100644 --- a/app/assets/stylesheets/settings.css +++ b/app/assets/stylesheets/settings.css @@ -67,10 +67,6 @@ /* Add padding if it's not already on a link within */ &:not(:has(a:first-child)) { padding-inline-end: var(--settings-item-padding-inline); } &:not(:has(a:last-child)) { padding-inline-end: var(--settings-item-padding-inline); } - - &[aria-selected] { - background: var(--color-selected); - } } a { @@ -82,5 +78,12 @@ } } } + + /* Only add a BG color when you can actually navigate */ + .settings__user-filter:focus-within & { + [aria-selected] { + background: var(--color-selected); + } + } } } From 389273072d65b9bdd11b81b22ddf9f12d9fd205a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 13 Aug 2025 12:30:12 -0500 Subject: [PATCH 6/8] Handle disabled switches --- app/javascript/controllers/navigable_list_controller.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index 580dafc6c..533c3bb89 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/app/javascript/controllers/navigable_list_controller.js @@ -106,9 +106,13 @@ export default class extends Controller { #toggleCurrentItem(event) { if (this.actionableItemsValue && this.currentItem && this.#visibleItems.length) { const toggleable = this.currentItem.querySelector("input[type=checkbox]") + const isDisabled = toggleable.hasAttribute("disabled") + if (toggleable) { - toggleable.checked = !toggleable.checked - toggleable.dispatchEvent(new Event('change', { bubbles: true })) + if (!isDisabled) { + toggleable.checked = !toggleable.checked + toggleable.dispatchEvent(new Event('change', { bubbles: true })) + } event.preventDefault() } } From d23c579d6768b9477c23eef634bdc8c76481501a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 13 Aug 2025 12:33:00 -0500 Subject: [PATCH 7/8] Better disabled state for switches --- app/assets/stylesheets/inputs.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index ecd175e10..1a9afd70a 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -65,7 +65,7 @@ &:focus-visible { .input--file:has(&) { outline: 0.15rem solid var(--color-selected-dark); - } + } } } @@ -177,12 +177,6 @@ } } - .switch__input:disabled + & { - --switch-color: var(--color-ink-medium) !important; - - cursor: not-allowed; - } - .switch__input:checked + & { --switch-color: var(--color-link); @@ -190,6 +184,13 @@ transform: translateX(1.2em); } } + + .switch__input:disabled + & { + --switch-color: var(--color-ink-medium); + + cursor: not-allowed; + opacity: 0.5; + } } /* Containers that act like (and contain) inputs */ From 085d1456fa9f2b342d698aeb13f7d923dfb3fb1d Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 13 Aug 2025 12:48:14 -0500 Subject: [PATCH 8/8] Add keyboard tips --- app/assets/stylesheets/settings.css | 12 ++++++++++++ app/views/accounts/settings/_users.html.erb | 4 ++++ app/views/collections/edit/_users.html.erb | 4 ++++ 3 files changed, 20 insertions(+) diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css index f2f1be59e..9baa51b14 100644 --- a/app/assets/stylesheets/settings.css +++ b/app/assets/stylesheets/settings.css @@ -86,4 +86,16 @@ } } } + + .settings__user-list-tips { + border-top: 1px solid var(--color-ink-light); + color: var(--color-ink-dark); + font-size: var(--text-small); + padding-block-start: var(--settings-spacer); + + .settings__user-filter--bg & { + margin-inline: calc(-1 * var(--settings-spacer)); + padding-inline: var(--settings-spacer); + } + } } diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index 3f0635fbb..6c834f0e6 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -13,5 +13,9 @@
      <%= render partial: "accounts/user", collection: users %>
    + +
    + Press ↑↓ to move, enter to visit profile, SHIFT+ENTER to toggle. +
    <% end %> diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb index e850faac7..884bfc9fe 100644 --- a/app/views/collections/edit/_users.html.erb +++ b/app/views/collections/edit/_users.html.erb @@ -24,4 +24,8 @@ <%= access_toggles_for selected_users, selected: true %> <%= access_toggles_for unselected_users, selected: false %> + + <% end %>