326 | Add skip to main content accessibility navigation

GSA · Jan 8, 2025 · 0c999c4 · 0c999c4
1 parent 5baef9a
commit 0c999c4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -22,13 +22,15 @@
   </head>
 
   <body>
+    <a class="usa-skipnav" href="#main-content">Skip to main content</a>
+
     <%= render "layouts/header" %>
     <% if logged_in? %>
       <%= render "layouts/utility_menu" %>
     <% end %>  
     <%= render "shared/flash" %>
 
-    <main class="grid-container">
+    <main id="main-content" class="grid-container" tabindex="-1">
       <%= yield %>
     </main>
 

diff --git a/spec/system/skip_to_main_content_spec.rb b/spec/system/skip_to_main_content_spec.rb
@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Skip to main content navigation', :js, type: :system do
+  let(:user) { create_user(role: "challenge_manager") }
+
+  before do
+    system_login_user(user)
+  end
+
+  context "when on dashboard index page" do
+    before { visit dashboard_path }
+
+    it 'is hidden by default but present in the DOM' do
+      expect(page).to have_css('.usa-skipnav', visible: false)
+    end
+
+    it 'becomes visible when focused via keyboard tab' do
+      find('body').send_keys(:tab)
+      expect(page).to have_css('.usa-skipnav', visible: true)
+    end
+
+    it 'moves focus to main content when using keyboard' do
+      find('body').send_keys(:tab)
+      find('.usa-skipnav', visible: true).send_keys(:return)
+      expect(page.evaluate_script('document.activeElement.id')).to eq('main-content')
+    end
+
+    it 'passes accessibility checks' do
+      expect(page).to be_axe_clean
+    end
+  end
+
+  context "when on phases index page" do
+    before { visit phases_path }
+
+    it 'is hidden by default but present in the DOM' do
+      expect(page).to have_css('.usa-skipnav', visible: false)
+    end
+
+    it 'becomes visible when focused via keyboard tab' do
+      find('body').send_keys(:tab)
+      expect(page).to have_css('.usa-skipnav', visible: true)
+    end
+
+    it 'moves focus to main content when using keyboard' do
+      find('body').send_keys(:tab)
+      find('.usa-skipnav', visible: true).send_keys(:return)
+      expect(page.evaluate_script('document.activeElement.id')).to eq('main-content')
+    end
+
+    it 'passes accessibility checks' do
+      expect(page).to be_axe_clean
+    end
+  end
+end