From 0ad1e59165c37a90f988fc5fb591cec018dea71a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0x=CF=84ensor?= <xtekastra@gmail.com>
Date: Thu, 14 May 2026 12:53:31 -0700
Subject: [PATCH] fix(a11y): add skip-link and aria-current="page" to
 application layout (#1781)

* fix(a11y): add skip-link and aria-current="page" to application layout

* test(a11y): cover application layout skip-link and #main anchor

* fix(a11y): extend skip-link and #main anchor to settings layout
---
 app/views/layouts/application.html.erb        |  5 +++-
 app/views/layouts/settings.html.erb           |  5 +++-
 app/views/layouts/shared/_nav_item.html.erb   |  2 +-
 config/locales/views/layout/ca.yml            |  1 +
 config/locales/views/layout/de.yml            |  1 +
 config/locales/views/layout/en.yml            |  1 +
 config/locales/views/layout/es.yml            |  1 +
 config/locales/views/layout/fr.yml            |  1 +
 config/locales/views/layout/hu.yml            |  1 +
 config/locales/views/layout/nb.yml            |  1 +
 config/locales/views/layout/nl.yml            |  1 +
 config/locales/views/layout/pl.yml            |  1 +
 config/locales/views/layout/pt-BR.yml         |  1 +
 config/locales/views/layout/ro.yml            |  1 +
 config/locales/views/layout/tr.yml            |  1 +
 config/locales/views/layout/zh-CN.yml         |  1 +
 config/locales/views/layout/zh-TW.yml         |  1 +
 test/integration/layout_accessibility_test.rb | 27 +++++++++++++++++++
 .../layouts/shared/nav_item_view_test.rb      | 27 +++++++++++++++++++
 19 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 test/integration/layout_accessibility_test.rb
 create mode 100644 test/views/layouts/shared/nav_item_view_test.rb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 50174161d..3933020b1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -26,6 +26,9 @@ end %>
     data-app-layout-expanded-sidebar-class="<%= expanded_sidebar_class %>"
     data-app-layout-collapsed-sidebar-class="<%= collapsed_sidebar_class %>"
     data-app-layout-user-id-value="<%= Current.user.id %>">
+    <%= link_to t("layouts.application.skip_to_main"), "#main",
+        class: "sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-3 focus:py-2 focus:rounded-lg focus:bg-container focus:text-primary focus:shadow-border-xs" %>
+
     <div
       class="hidden fixed inset-0 bg-surface z-20 h-full w-full pt-[calc(env(safe-area-inset-top)+0.75rem)] pr-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] pl-3 overflow-y-auto transition-all duration-300"
       data-app-layout-target="mobileSidebar">
@@ -139,7 +142,7 @@ end %>
     <% end %>
 
     <%# SHARED - Main content %>
-    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content" } do %>
+    <%= tag.main id: "main", class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content" } do %>
       <% unless intro_mode %>
         <div class="hidden lg:flex gap-2 items-center justify-between mb-6 sticky top-0 z-10 -mx-3 lg:-mx-10 px-3 lg:px-10 py-4 bg-surface border-b border-tertiary">
           <div class="flex items-center gap-2">
diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
index 49614c237..1c8a65a79 100644
--- a/app/views/layouts/settings.html.erb
+++ b/app/views/layouts/settings.html.erb
@@ -1,12 +1,15 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col md:flex-row h-full bg-surface pt-[env(safe-area-inset-top)]">
+    <%= link_to t("layouts.application.skip_to_main"), "#main",
+        class: "sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-3 focus:py-2 focus:rounded-lg focus:bg-container focus:text-primary focus:shadow-border-xs" %>
+
     <div class="w-full md:w-auto md:min-w-64 shrink-0 md:h-full md:overflow-y-auto border-divider md:border-r">
       <div class="p-4">
         <%= render "settings/settings_nav" %>
       </div>
     </div>
 
-    <main class="grow flex h-full">
+    <main id="main" class="grow flex h-full">
       <div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
         <div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch]">
           <div class="sticky top-0 z-10 px-3 md:px-10 pt-1.5 md:pt-3 pb-3 bg-surface border-b border-tertiary shrink-0">
diff --git a/app/views/layouts/shared/_nav_item.html.erb b/app/views/layouts/shared/_nav_item.html.erb
index 7ab4888ba..3c700e184 100644
--- a/app/views/layouts/shared/_nav_item.html.erb
+++ b/app/views/layouts/shared/_nav_item.html.erb
@@ -1,6 +1,6 @@
 <%# locals:(name:, path:, icon:, icon_custom:, active:, mobile_only: false) %>
 
-<%= link_to path, class: "space-y-1 group block relative pb-1" do %>
+<%= link_to path, class: "space-y-1 group block relative pb-1", aria: { current: ("page" if active) } do %>
   <div class="grow flex flex-col lg:flex-row gap-1 items-center">
     <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
 
diff --git a/config/locales/views/layout/ca.yml b/config/locales/views/layout/ca.yml
index 8868c451c..d2981ad51 100644
--- a/config/locales/views/layout/ca.yml
+++ b/config/locales/views/layout/ca.yml
@@ -3,6 +3,7 @@ ca:
   layouts:
     application:
       privacy_mode: Alternar mode de privadesa
+      skip_to_main: Saltar al contingut principal
       nav:
         assistant: Assistent
         budgets: Pressupostos
diff --git a/config/locales/views/layout/de.yml b/config/locales/views/layout/de.yml
index 3af54c26b..1aeb9ed1b 100644
--- a/config/locales/views/layout/de.yml
+++ b/config/locales/views/layout/de.yml
@@ -3,6 +3,7 @@ de:
   layouts:
     application:
       privacy_mode: Datenschutzmodus umschalten
+      skip_to_main: Zum Hauptinhalt springen
       nav:
         assistant: Assistent
         budgets: Budgets
diff --git a/config/locales/views/layout/en.yml b/config/locales/views/layout/en.yml
index 86ad78ace..52b0cf65d 100644
--- a/config/locales/views/layout/en.yml
+++ b/config/locales/views/layout/en.yml
@@ -3,6 +3,7 @@ en:
   layouts:
     application:
       privacy_mode: Toggle privacy mode
+      skip_to_main: Skip to main content
       nav:
         assistant: Assistant
         budgets: Budgets
diff --git a/config/locales/views/layout/es.yml b/config/locales/views/layout/es.yml
index b1627fd14..080d6e37a 100644
--- a/config/locales/views/layout/es.yml
+++ b/config/locales/views/layout/es.yml
@@ -3,6 +3,7 @@ es:
   layouts:
     application:
       privacy_mode: Alternar modo de privacidad
+      skip_to_main: Saltar al contenido principal
       nav:
         assistant: Asistente
         budgets: Presupuestos
diff --git a/config/locales/views/layout/fr.yml b/config/locales/views/layout/fr.yml
index 54f9cca4b..0cec20575 100644
--- a/config/locales/views/layout/fr.yml
+++ b/config/locales/views/layout/fr.yml
@@ -3,6 +3,7 @@ fr:
   layouts:
     application:
       privacy_mode: Activer/désactiver le mode confidentialité
+      skip_to_main: Aller au contenu principal
       nav:
         assistant: Assistant
         budgets: Budgets
diff --git a/config/locales/views/layout/hu.yml b/config/locales/views/layout/hu.yml
index f77a35f3c..7a0d252b4 100644
--- a/config/locales/views/layout/hu.yml
+++ b/config/locales/views/layout/hu.yml
@@ -3,6 +3,7 @@ hu:
   layouts:
     application:
       privacy_mode: Adatvédelmi mód váltása
+      skip_to_main: Ugrás a fő tartalomhoz
       nav:
         assistant: Asszisztens
         budgets: Költségvetések
diff --git a/config/locales/views/layout/nb.yml b/config/locales/views/layout/nb.yml
index ebabc16cf..be6aed666 100644
--- a/config/locales/views/layout/nb.yml
+++ b/config/locales/views/layout/nb.yml
@@ -3,6 +3,7 @@ nb:
   layouts:
     application:
       privacy_mode: Veksle personvernmodus
+      skip_to_main: Hopp til hovedinnhold
       nav:
         assistant: Assistent
         budgets: Budsjett
diff --git a/config/locales/views/layout/nl.yml b/config/locales/views/layout/nl.yml
index 9ee7a2b1b..322f87195 100644
--- a/config/locales/views/layout/nl.yml
+++ b/config/locales/views/layout/nl.yml
@@ -3,6 +3,7 @@ nl:
   layouts:
     application:
       privacy_mode: Privacymodus in-/uitschakelen
+      skip_to_main: Ga naar hoofdinhoud
       nav:
         assistant: Assistent
         budgets: Budgetten
diff --git a/config/locales/views/layout/pl.yml b/config/locales/views/layout/pl.yml
index fe70cadf6..1f68d3cf8 100644
--- a/config/locales/views/layout/pl.yml
+++ b/config/locales/views/layout/pl.yml
@@ -3,6 +3,7 @@ pl:
   layouts:
     application:
       privacy_mode: Przełącz tryb prywatności
+      skip_to_main: Przejdź do głównej treści
       nav:
         assistant: Asystent
         budgets: Budżety
diff --git a/config/locales/views/layout/pt-BR.yml b/config/locales/views/layout/pt-BR.yml
index 2f76fecca..61a25ddf2 100644
--- a/config/locales/views/layout/pt-BR.yml
+++ b/config/locales/views/layout/pt-BR.yml
@@ -3,6 +3,7 @@ pt-BR:
   layouts:
     application:
       privacy_mode: Alternar modo de privacidade
+      skip_to_main: Pular para o conteúdo principal
       nav:
         assistant: Assistente
         budgets: Orçamentos
diff --git a/config/locales/views/layout/ro.yml b/config/locales/views/layout/ro.yml
index 15ed02dac..218d33e36 100644
--- a/config/locales/views/layout/ro.yml
+++ b/config/locales/views/layout/ro.yml
@@ -3,6 +3,7 @@ ro:
   layouts:
     application:
       privacy_mode: Comutare mod confidențialitate
+      skip_to_main: Sari la conținutul principal
       nav:
         assistant: Asistent
         budgets: Bugete
diff --git a/config/locales/views/layout/tr.yml b/config/locales/views/layout/tr.yml
index d7a482e42..5a8ad2877 100644
--- a/config/locales/views/layout/tr.yml
+++ b/config/locales/views/layout/tr.yml
@@ -3,6 +3,7 @@ tr:
   layouts:
     application:
       privacy_mode: Gizlilik modunu değiştir
+      skip_to_main: Ana içeriğe atla
       nav:
         assistant: Asistan
         budgets: Bütçeler
diff --git a/config/locales/views/layout/zh-CN.yml b/config/locales/views/layout/zh-CN.yml
index 8fc58045e..0cd552d11 100644
--- a/config/locales/views/layout/zh-CN.yml
+++ b/config/locales/views/layout/zh-CN.yml
@@ -4,6 +4,7 @@ zh-CN:
   layouts:
     application:
       privacy_mode: 切换隐私模式
+      skip_to_main: 跳到主要内容
       nav:
         assistant: 智能助手
         budgets: 预算管理
diff --git a/config/locales/views/layout/zh-TW.yml b/config/locales/views/layout/zh-TW.yml
index 091625bea..597dd971c 100644
--- a/config/locales/views/layout/zh-TW.yml
+++ b/config/locales/views/layout/zh-TW.yml
@@ -3,6 +3,7 @@ zh-TW:
   layouts:
     application:
       privacy_mode: 切換隱私模式
+      skip_to_main: 跳至主要內容
       nav:
         assistant: 助手
         budgets: 預算
diff --git a/test/integration/layout_accessibility_test.rb b/test/integration/layout_accessibility_test.rb
new file mode 100644
index 000000000..5a232721f
--- /dev/null
+++ b/test/integration/layout_accessibility_test.rb
@@ -0,0 +1,27 @@
+require "test_helper"
+
+class LayoutAccessibilityTest < ActionDispatch::IntegrationTest
+  setup do
+    sign_in users(:family_admin)
+  end
+
+  test "application layout renders skip-link pointing at #main and a <main> with id=\"main\"" do
+    get root_path
+    assert_response :ok
+
+    skip_text = I18n.t("layouts.application.skip_to_main")
+
+    assert_select "a[href=\"#main\"]", text: skip_text
+    assert_select "main#main"
+  end
+
+  test "settings layout renders skip-link pointing at #main and a <main> with id=\"main\"" do
+    get settings_profile_path
+    assert_response :ok
+
+    skip_text = I18n.t("layouts.application.skip_to_main")
+
+    assert_select "a[href=\"#main\"]", text: skip_text
+    assert_select "main#main"
+  end
+end
diff --git a/test/views/layouts/shared/nav_item_view_test.rb b/test/views/layouts/shared/nav_item_view_test.rb
new file mode 100644
index 000000000..b03bcbf37
--- /dev/null
+++ b/test/views/layouts/shared/nav_item_view_test.rb
@@ -0,0 +1,27 @@
+require "test_helper"
+
+class NavItemViewTest < ActionView::TestCase
+  test "active nav item carries aria-current=\"page\"" do
+    html = render(partial: "layouts/shared/nav_item", locals: {
+      name: "Transactions",
+      path: "/transactions",
+      icon: "credit-card",
+      icon_custom: false,
+      active: true
+    })
+
+    assert_includes html, "aria-current=\"page\""
+  end
+
+  test "inactive nav item omits aria-current" do
+    html = render(partial: "layouts/shared/nav_item", locals: {
+      name: "Transactions",
+      path: "/transactions",
+      icon: "credit-card",
+      icon_custom: false,
+      active: false
+    })
+
+    assert_not_includes html, "aria-current"
+  end
+end