From 1bd5598b64519f78b03093165d433274f231fd02 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 22 May 2024 14:57:28 -0700 Subject: [PATCH] Improve row focus and keyboard nav in Item Getting Guide Clearer focus states, row changes bg color on hover/focus to help you track where you are, remove the redundant image thumbnail link from the tab order (it's the same as the item name link!) --- app/assets/stylesheets/items/sources.sass | 7 ++++++- app/views/items/_item_list_row.html.haml | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/items/sources.sass b/app/assets/stylesheets/items/sources.sass index 174237ca..9ace7135 100644 --- a/app/assets/stylesheets/items/sources.sass +++ b/app/assets/stylesheets/items/sources.sass @@ -30,7 +30,7 @@ .name-cell a text-decoration: none - &:hover + &:hover, &:focus text-decoration: underline .actions-cell @@ -38,6 +38,11 @@ padding-left: 1em font-size: 85% + tbody + tr + &:hover, &:focus-within + background: rgba($module-bg-color, 0.5) + thead background: $module-bg-color diff --git a/app/views/items/_item_list_row.html.haml b/app/views/items/_item_list_row.html.haml index 4a957455..35362c6d 100644 --- a/app/views/items/_item_list_row.html.haml +++ b/app/views/items/_item_list_row.html.haml @@ -1,4 +1,6 @@ %tr - %td.thumbnail-cell= link_to item_thumbnail_for(item), item, target: "_blank" + %td.thumbnail-cell + = link_to item_thumbnail_for(item), item, target: "_blank", + tabindex: "-1" %td.name-cell= link_to item.name, item, target: "_blank" %td.actions-cell= yield