Navigate the notifications list on the Index

app/assets/stylesheets/trays.css

@@ -141,6 +141,14 @@
 
     position: relative;
 
+    &[aria-selected]{
+      .card {
+        border-radius: 0.25ch;
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+      }
+    }
+
     .tray__dialog & {
       font-size: 10px;
       margin-block-end: var(--tray-item-margin);

app/helpers/notifications_helper.rb

@@ -25,7 +25,7 @@ module NotificationsHelper
   end
 
   def notification_tag(notification, &)
-    tag.div id: dom_id(notification), class: "tray__item" do
+    tag.div id: dom_id(notification), class: "tray__item", data: { navigable_list_target: "item" } do
       concat(
         link_to(notification,
           class: [ "card card--notification", { "card--closed": notification.card.closed? }, { "unread": !notification.read? } ],

app/views/notifications/index.html.erb

@@ -17,7 +17,8 @@
   </nav>
 <% end %>
 
-<div data-controller="badge" data-badge-unread-class="unread">
+<div data-controller="badge navigable-list" data-badge-unread-class="unread" data-action="keydown@document->navigable-list#navigate" data-navigable-list-actionable-items-value="true"
+      data-navigable-list-focus-on-selection-value="false">
   <section class="notifications-list panel center borderless unpad flex flex-column gap-half">
     <% if @unread.any? %>
       <div class="flex align-center justify-space-between margin-block-start margin-block-end-half">