From e79ff94f6c2a2c53dcd5e1675cf575862e212abc Mon Sep 17 00:00:00 2001
From: Sergey Tyan <sergey.tyan.iitu@gmail.com>
Date: Mon, 12 Feb 2024 03:17:03 +0800
Subject: [PATCH] Improve account modal keyboard navigation (#424)

* Add back button support to account keyboard navigation and autofocus text input on the form

* Wrap modal content with keyboard navigation controller
---
 .../list_keyboard_navigation_controller.js           |  5 ++++-
 app/views/accounts/new.html.erb                      | 12 ++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/javascript/controllers/list_keyboard_navigation_controller.js b/app/javascript/controllers/list_keyboard_navigation_controller.js
index 9a019e86..7e28069e 100644
--- a/app/javascript/controllers/list_keyboard_navigation_controller.js
+++ b/app/javascript/controllers/list_keyboard_navigation_controller.js
@@ -17,7 +17,10 @@ export default class extends Controller {
 
   getLinkTargetInDirection(direction) {
     const indexOfLastFocus = this.indexOfLastFocus()
-    return this.focusableLinks[indexOfLastFocus + direction]
+    let nextIndex = (indexOfLastFocus + direction) % this.focusableLinks.length
+    if (nextIndex < 0) nextIndex = this.focusableLinks.length - 1
+      
+    return this.focusableLinks[nextIndex]
   }
 
   indexOfLastFocus(targets = this.focusableLinks) {
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index b8a2d4c1..9fe5f3fe 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -1,12 +1,12 @@
 <h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>
 
 <%= modal do %>
-  <div class="flex flex-col min-h-[530px]">
+  <div class="flex flex-col min-h-[530px]" data-controller="list-keyboard-navigation">
   <% if @account.accountable.blank? %>
     <div class="border-b border-[#141414]/2 p-4 text-gray-400">
       <%= t '.select_accountable_type' %>
     </div>
-    <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
+    <div class="flex flex-col p-2 text-sm grow">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
@@ -34,12 +34,12 @@
     </div>
   <% elsif params[:step] == 'method' && @account.accountable.present? %>
     <div class="border-b border-[#141414]/2 p-4 text-gray-400 flex items-center space-x-3">
-      <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5" do %>
+      <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 back focus:outline-gray-300 focus:outline" do %>
         <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
       <% end %>
       <span>How would you like to add it?</span>
     </div>
-    <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
+    <div class="flex flex-col p-2 text-sm grow">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
@@ -62,7 +62,7 @@
     </div>
   <% else %>
     <div class="border-b border-[#141414]/2 p-4 text-gray-800 flex items-center space-x-3">
-      <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5" do %>
+      <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 focus:outline-gray-300 focus:outline" do %>
         <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
       <% end %>
       <span>Add <%= @account.accountable.model_name.human.downcase %></span>
@@ -72,7 +72,7 @@
         <div class="space-y-4 grow">
           <%= f.hidden_field :accountable_type %>
 
-          <%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %>
+          <%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name', autofocus: true %>
 
           <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>