Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-22 14:49:38 +02:00
Code Issues Releases Activity Actions 1

Improve account modal keyboard navigation (#424)

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

* Wrap modal content with keyboard navigation controller
This commit is contained in:
Sergey Tyan 2024-02-12 03:17:03 +08:00 • committed by GitHub
parent fbe49bf4ea
commit e79ff94f6c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/controllers/list_keyboard_navigation_controller.js
View file

@ -17,7 +17,10 @@ export default class extends Controller {
getLinkTargetInDirection(direction) { getLinkTargetInDirection(direction) {
const indexOfLastFocus = this.indexOfLastFocus() 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) { indexOfLastFocus(targets = this.focusableLinks) {

12
app/views/accounts/new.html.erb
View file

@ -1,12 +1,12 @@
<h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1> <h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>
<%= modal do %> <%= 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? %> <% if @account.accountable.blank? %>
<div class="border-b border-[#141414]/2 p-4 text-gray-400"> <div class="border-b border-[#141414]/2 p-4 text-gray-400">
<%= t '.select_accountable_type' %> <%= t '.select_accountable_type' %>
</div> </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="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> <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
@ -34,12 +34,12 @@
</div> </div>
<% elsif params[:step] == 'method' && @account.accountable.present? %> <% 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"> <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') %> <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
<% end %> <% end %>
<span>How would you like to add it?</span> <span>How would you like to add it?</span>
</div> </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="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> <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
@ -62,7 +62,7 @@
</div> </div>
<% else %> <% else %>
<div class="border-b border-[#141414]/2 p-4 text-gray-800 flex items-center space-x-3"> <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') %> <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
<% end %> <% end %>
<span>Add <%= @account.accountable.model_name.human.downcase %></span> <span>Add <%= @account.accountable.model_name.human.downcase %></span>
@ -72,7 +72,7 @@
<div class="space-y-4 grow"> <div class="space-y-4 grow">
<%= f.hidden_field :accountable_type %> <%= 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 %> <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>