lato 3.26.0 → 3.26.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fbacf743cd38a4c4b42cc018a23fa40107f40d08d076ca05a5cd2ac539f84f2
-  data.tar.gz: 54c1b642c8aa9b42136b773067207b36cb2760b4695e5b8ecb073e8f798e830d
+  metadata.gz: 59109ceb11a3fb4c78126d99664864266b1d25ac77ff36ef8f6cf3bc5a66ab18
+  data.tar.gz: 7ca6befa9186b81529841c3b25409396beb26b154f99c605557c0b1106e32594
 SHA512:
-  metadata.gz: f1605ffef039889624f834a870709c910dbb614a78868cf4c0a84d0925dc7f7c72f8b1db8a6c0527ea422c327dec75c58b27a342a32e9ae49d5b4ceedcbf0210
-  data.tar.gz: 52fc4da5a54c9d35f2dd4fd324f20e750496d1bf7bf8b787129795b66d565c68742b1ec2803e87bf1c055a54760a216b72e60d78af61a256b6c18fc3c50042a7
+  metadata.gz: 33934d542029ce620a7ff4e06c03a2eab2bc7fff362d07237641329724cdac95541b6ea98fb0ad171d84a007705593896a796d2e7648387c4269b22c6812665c
+  data.tar.gz: 5797d50477282510f006e201009aa8c0e7b21dd6c7cadf5e80c0dfbbda8eabbadf88669a06f7425d1d95953ac8ffa2a8ae809dd1333959849805491d3cec6bf8

data/README.md

@@ -8,6 +8,7 @@ This gem includes:
 - User management with **full authentication system** (signin, signup, recover password, email validation, Google Authenticator and WebAuthn/passkey multi-factor authentication, ETH wallet connection) and **account management** (user settings, password change, email change, etc.);
 - **Web interface** built with [Bootstrap](https://getbootstrap.com/) and [Bootstrap Icons](https://icons.getbootstrap.com/);
 - **UI components integrated with Rails** (data tables, forms, modals, async job executions etc.);
+- **Accessibility built in**: labelled form fields with linked error messages, keyboard friendly modals with focus return, skip link, `aria-sort` on tables, live regions for feedback and WCAG 2.2 target sizes. Core pages report zero axe-core violations on WCAG 2.2 AA rules;
 
 The gem is **agnostic to the application stack**. You can use it with different databases (PostgreSQL, MySQL, SQLite), different Job processors (Solid queue, Sidekiq, Delayed Job, etc.), different cache systems (Redis, Memcached, etc.).
 

data/app/assets/stylesheets/lato/application.scss

@@ -38,6 +38,20 @@ $tooltip-max-width: 300px;
   margin: 0 4px;
 }
 
+// WCAG 2.2 target size (2.5.8): interactive targets of at least 24x24px.
+.pagination > span > a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+// Bootstrap's pink code color fails contrast on tinted alert backgrounds.
+.alert code {
+  color: inherit;
+}
+
 .pagination .current {
   font-weight: bold;
 }
@@ -143,6 +157,9 @@ main, aside {
   .btn {
     font-size: 12px;
     padding: 0.15rem 0.3rem;
+    // 25px: btn-group overlaps adjacent buttons by 1px, the visible target must stay >= 24px (WCAG 2.5.8)
+    min-width: 25px;
+    min-height: 24px;
   }
 }
 

data/app/helpers/lato/components_helper.rb

@@ -284,11 +284,20 @@ module Lato
       form.submit label, options
     end
 
+    # Kaminari labels every paginator "pager": several index tables on one page would expose
+    # identical navigation landmarks, so each one gets a label from its index key (unique per page).
+    def lato_index_paginate(collection, key, **options)
+      name = key.to_s == 'default' ? collection.model.model_name.human(count: 2) : key.to_s.humanize
+      label = I18n.t('lato.pagination_label', name: name)
+      paginate(collection, param_name: "#{key}_page", **options)
+        .to_str.sub('aria-label="pager"', "aria-label=\"#{ERB::Util.html_escape(label)}\"").html_safe
+    end
+
     # Data
     ##
 
     def lato_data_badge(label, color = 'primary')
-      content_tag :span, label, class: "badge rounded-pill bg-#{color}"
+      content_tag :span, label, class: "badge rounded-pill text-bg-#{color}"
     end
 
     def lato_data_user(label, image_url = nil)

data/app/views/lato/account/_form-web3.html.erb

@@ -30,7 +30,7 @@ user ||= Lato::User.new
       </div>
     <% elsif session[:web3_nonce] %>
       <div class="alert alert-light mb-0">
-        <h4 class="alert-heading" role="status"><%= I18n.t('lato.connecting') %></h4>
+        <h3 class="alert-heading h4" role="status"><%= I18n.t('lato.connecting') %></h3>
         <div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
           <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
         </div>
@@ -73,7 +73,7 @@ user ||= Lato::User.new
       </script>
     <% else %>
       <div class="alert alert-light mb-0">
-        <h4 class="alert-heading"><%= I18n.t('lato.account_web3_start_title') %></h4>
+        <h3 class="alert-heading h4"><%= I18n.t('lato.account_web3_start_title') %></h3>
         <p>
           <%= raw I18n.t('lato.account_web3_start_description') %>
         </p>

data/app/views/lato/account/_form-webauthn.html.erb

@@ -20,7 +20,7 @@ end
 
     <% if user.webauthn_enabled? %>
       <div class="alert alert-success mb-3">
-        <h4 class="alert-heading"><%= I18n.t('lato.account_webauthn_ready_title') %></h4>
+        <h3 class="alert-heading h4"><%= I18n.t('lato.account_webauthn_ready_title') %></h3>
         <p class="mb-0">
           <%= raw I18n.t('lato.account_webauthn_ready_description') %>
         </p>
@@ -36,7 +36,7 @@ end
       <%= form.hidden_field :webauthn_credential, data: { lato_account_webauthn_target: 'credentialInput' } %>
 
       <div class="alert alert-light mb-3" data-lato-account-webauthn-target="status">
-        <h4 class="alert-heading"><%= I18n.t('lato.account_webauthn_in_progress_title') %></h4>
+        <h3 class="alert-heading h4"><%= I18n.t('lato.account_webauthn_in_progress_title') %></h3>
         <p class="mb-0">
           <%= raw I18n.t('lato.account_webauthn_in_progress_description') %>
         </p>
@@ -53,7 +53,7 @@ end
       </div>
     <% else %>
       <div class="alert alert-light mb-0">
-        <h4 class="alert-heading"><%= I18n.t('lato.account_webauthn_start_title') %></h4>
+        <h3 class="alert-heading h4"><%= I18n.t('lato.account_webauthn_start_title') %></h3>
         <p>
           <%= raw I18n.t('lato.account_webauthn_start_description') %>
         </p>

data/app/views/lato/account/_security-confirmation.html.erb

@@ -1,9 +1,12 @@
+<%# Rendered in several account forms on the same page: suffix ids so each label targets its own field. %>
+<% password_id = form.field_id(:current_password, form.object_id) %>
+<% code_id = form.field_id(:current_authenticator_code, form.object_id) %>
 <div class="mb-3" data-controller="lato-account-security" data-lato-account-security-challenge-url-value="<%= lato.account_security_challenge_path %>" data-lato-account-security-webauthn-value="<%= user.webauthn_enabled? && !user.authenticator_enabled? %>">
-  <%= form.label :current_password, I18n.t('lato.current_password'), class: "form-label" %>
-  <%= form.password_field :current_password, class: "form-control", autocomplete: "current-password" %>
+  <%= form.label :current_password, I18n.t('lato.current_password'), class: "form-label", for: password_id %>
+  <%= form.password_field :current_password, id: password_id, class: "form-control", autocomplete: "current-password" %>
   <% if user.authenticator_enabled? %>
-    <%= form.label :current_authenticator_code, I18n.t('lato.current_authenticator_code'), class: "form-label mt-2" %>
-    <%= form.text_field :current_authenticator_code, value: nil, class: "form-control", autocomplete: "one-time-code", inputmode: "numeric" %>
+    <%= form.label :current_authenticator_code, I18n.t('lato.current_authenticator_code'), class: "form-label mt-2", for: code_id %>
+    <%= form.text_field :current_authenticator_code, id: code_id, value: nil, class: "form-control", autocomplete: "one-time-code", inputmode: "numeric" %>
   <% elsif user.webauthn_enabled? %>
     <%= form.hidden_field :current_webauthn_credential, value: nil, data: { lato_account_security_target: "credential" } %>
     <p class="text-muted mt-2"><%= I18n.t('lato.security_key_confirmation_help') %></p>

data/app/views/lato/account/index.html.erb

@@ -60,7 +60,7 @@
   </div>
   <div class="card-body">
     <div class="alert alert-warning">
-      <h4 class="alert-heading"><%= I18n.t('lato.warning') %></h4>
+      <h3 class="alert-heading h4"><%= I18n.t('lato.warning') %></h3>
       <p>
         <%= raw I18n.t('lato.account_delete_details') %>
       </p>

data/app/views/lato/components/_form_item_input_signature.html.erb

@@ -102,7 +102,7 @@ default_tab = existing_url ? 'current' : 'draw'
   <%# Clear button (solo nelle tab di editing) %>
   <div class="d-flex justify-content-end mt-2" data-lato-input-signature-target="clearRow">
     <button type="button"
-            class="btn btn-outline-secondary btn-sm"
+            class="btn btn-outline-primary btn-sm"
             style="font-size: 0.75rem;"
             data-action="click->lato-input-signature#clearSignature">
       <i class="bi bi-eraser"></i> <%= I18n.t('lato.signature_clear') %>

data/app/views/lato/components/_index.html.erb

@@ -99,7 +99,7 @@ total_pages = collection.empty? ? params["#{key}_page"]&.to_i : 999_999_999 if s
           <span class="text-muted"><%= collection_total %> <%= I18n.t('lato.total_results').downcase %></span>
         <% end %>
         <% if collection.respond_to?(:total_pages) %>
-          <div class="mt-3"><%= paginate(collection, param_name: "#{key}_page", total_pages: total_pages, window: 1) %></div>
+          <div class="mt-3"><%= lato_index_paginate(collection, key, total_pages: total_pages, window: 1) %></div>
         <% end %>
       </div>
 
@@ -161,7 +161,7 @@ total_pages = collection.empty? ? params["#{key}_page"]&.to_i : 999_999_999 if s
               <td colspan="<%= columns.length %>">
                 <div class="d-flex justify-content-between align-items-center">
                   <% if collection.respond_to?(:total_pages) %>
-                    <div><%= paginate(collection, param_name: "#{key}_page", total_pages: total_pages) %></div>
+                    <div><%= lato_index_paginate(collection, key, total_pages: total_pages) %></div>
                   <% else %>
                     <div></div>
                   <% end %>

data/app/views/lato/components/_operation.html.erb

@@ -29,7 +29,7 @@
 
     <% if operation.completed_status? %>
       <div class="text-center">
-        <div class="fs-1 text-success">
+        <div class="fs-1 text-success-emphasis">
           <i class="bi bi-check-circle"></i>
         </div>
         <h2><%= I18n.t('lato.operation_completed_title') %></h2>
@@ -40,7 +40,7 @@
         <% end %>
 
         <% if operation.output_message? %>
-          <p class="text-success fw-bold">
+          <p class="text-success-emphasis fw-bold">
             <%= operation.output_message %>
           </p>
         <% end %>

data/config/locales/en.yml

@@ -5,6 +5,7 @@ en:
     alert_title: "Error"
     sort_ascending: "Sort by %{column} ascending"
     sort_descending: "Sort by %{column} descending"
+    pagination_label: "Pagination: %{name}"
     password_requirements: "At least %{count} characters."
     too_many_requests: "Too many requests, please wait %{minutes} minutes to retry."
     hcaptcha_missing: "Please complete the captcha verification."

data/config/locales/fr.yml

@@ -7,6 +7,7 @@ fr:
     alert_title: "Erreur"
     sort_ascending: "Trier par %{column} croissant"
     sort_descending: "Trier par %{column} d\u00E9croissant"
+    pagination_label: "Pagination : %{name}"
     password_requirements: "Au moins %{count} caract\u00E8res."
     too_many_requests: "Trop de requ\u00EAtes, veuillez attendre %{minutes} minutes avant de r\u00E9essayer."
     hcaptcha_missing: "Veuillez compl\u00E9ter la v\u00E9rification captcha."

data/config/locales/it.yml

@@ -7,6 +7,7 @@ it:
     alert_title: "Errore"
     sort_ascending: "Ordina per %{column} crescente"
     sort_descending: "Ordina per %{column} decrescente"
+    pagination_label: "Paginazione: %{name}"
     password_requirements: "Almeno %{count} caratteri."
     too_many_requests: "Troppe richieste, attendi %{minutes} minuti prima di riprovare."
     hcaptcha_missing: "Completa la verifica captcha."

data/config/locales/ro.yml

@@ -7,6 +7,7 @@ ro:
     alert_title: "Eroare"
     sort_ascending: "Sorteaz\u0103 dup\u0103 %{column} cresc\u0103tor"
     sort_descending: "Sorteaz\u0103 dup\u0103 %{column} descresc\u0103tor"
+    pagination_label: "Paginare: %{name}"
     password_requirements: "Cel pu\u021Bin %{count} caractere."
     too_many_requests: "Prea multe cereri, a\u0219tepta\u021Bi %{minutes} minute \u00EEnainte de a re\u00EEncerca."
     hcaptcha_missing: "Completa\u021Bi verificarea captcha."

data/lib/lato/version.rb

@@ -1,3 +1,3 @@
 module Lato
-  VERSION = "3.26.0"
+  VERSION = "3.26.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 3.26.0
+  version: 3.26.1
 platform: ruby
 authors:
 - Gregorio Galante