Add a skip link to the admin interface

This fulfills WCAG 2.0 guideline 2.4.1 (Bypass Blocks) [1] for the sidebar navigation in the admin interface, jumping to the main content area. [1] https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-skip
solidusio · Jul 21, 2023 · 381c51b · 381c51b
1 parent 2f45e3e
commit 381c51b
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 1 deletion.
diff --git a/admin/app/components/solidus_admin/skip_link/component.rb b/admin/app/components/solidus_admin/skip_link/component.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Skip to content link
+class SolidusAdmin::SkipLink::Component < SolidusAdmin::BaseComponent
+  # @param href [String] the href attribute for the skip link
+  def initialize(href:)
+    @href = href
+  end
+
+  def call
+    link_to t(".skip_link"),
+            @href,
+            class: %{
+              sr-only
+              focus:not-sr-only
+              inline-block
+              focus:p-2
+              focus:absolute
+              body-small
+              text-white
+              bg-black
+            }
+  end
+end
diff --git a/admin/app/components/solidus_admin/skip_link/component.yml b/admin/app/components/solidus_admin/skip_link/component.yml
@@ -0,0 +1,2 @@
+en:
+  skip_link: Skip to content
diff --git a/admin/app/views/layouts/solidus_admin/application.html.erb b/admin/app/views/layouts/solidus_admin/application.html.erb
@@ -8,6 +8,7 @@
   </head>
 
   <body>
+    <%= render component("skip_link").new(href: "#main") %>
     <div class="fixed right-3 bottom-3 flex flex-col gap-3" role="alert">
       <% flash.each do |key, message| %>
         <%= render component("ui/toast").new(text: message, scheme: key == :error ? :error : :default) %>
@@ -22,7 +23,7 @@
     ">
       <%= render component("sidebar").new(store: current_store) %>
 
-      <main class="
+      <main id="main" class="
         col-start-2 col-end-4
         lg:col-start-3 lg:col-end-12
         py-6 px-4

diff --git a/admin/spec/components/previews/solidus_admin/skip_link/component_preview.rb b/admin/spec/components/previews/solidus_admin/skip_link/component_preview.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+# @component "skip_link"
+class SolidusAdmin::SkipLink::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  # Click on the "Preview" window area and press "Tab" to see the skip link
+  def overview
+    render current_component.new(href: "#")
+  end
+end
diff --git a/admin/spec/components/solidus_admin/skip_link/component_spec.rb b/admin/spec/components/solidus_admin/skip_link/component_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::SkipLink::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end