Add skip links for accessibility

jazairi · jazairi · commit 47e03f682f9c · 2024-03-22T15:59:46.000-04:00
Why these changes are being introduced: This application has many focusable elements, and it may be helpful to users of assistive technology to provide skip links to different sections. Relevant ticket(s): * [GDT-161](https://mitlibraries.atlassian.net/browse/GDT-161) How this addresses that need: This adds the following skip links: * All views: nav, search form * Results: results list, filter sidebar * Record: record metadata Side effects of this change: * Some IDs have been added to top-level elements to make them selectable. * While working on this, I realized that VoiceOver doesn't recognize the filter labels as disclosure triangles, so even when they are closed, it tabs through every available filter. I've fixed this in a subsequent commit.
diff --git a/app/views/layouts/_site_nav.html.erb b/app/views/layouts/_site_nav.html.erb
@@ -1,7 +1,7 @@
 <div class="wrap-outer-header-local layout-band">
   <div class="wrap-header-local">
     <div class="wrap-local-nav">
-      <nav class="local-nav" aria-label="Main menu">
+      <nav class="local-nav" id="main-menu" aria-label="Main menu">
         <%= nav_link_to("Home", root_path) %>
         <% if Flipflop.enabled?(:gdt) %>
           <div class="wrap-gis-links">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,7 +4,17 @@
     <%= render partial: "layouts/head" %>
   </head>
   <body class="app-theme">
-    <a id="skip" class="skip sr sr-focusable" href="#content-main">Skip to main content</a>
+    <a class="skip sr sr-focusable" href="#main-menu">Skip to main menu</a>
+    <a class="skip sr sr-focusable" href="#basic-search">Skip to search form</a>
+    <% if current_page?(results_path) %>
+      <a class="skip sr sr-focusable" href="#results">Skip to results</a>
+      <% if @filters.present? %>
+        <a class="skip sr sr-focusable" href="#filters">Skip to search filters</a>
+      <% end %>
+    <% end %>
+    <% if controller.controller_name == 'record' && controller.action_name == 'view' %>
+      <a class="skip sr sr-focusable" href="#full-record">Skip to metadata</a>
+    <% end %>
 
     <div class="wrap-page">
 
diff --git a/app/views/record/_record.html.erb b/app/views/record/_record.html.erb
@@ -1,6 +1,5 @@
-<div class="gridband layout-3q1q wrap-full-record">
+<div id="full-record" class="gridband layout-3q1q wrap-full-record">
   <div class="col3q box-content region full-record" data-region="Full record">
-
     <h2 class="record-title">
       <span class="sr">Title: </span>
       <% if @record['title'].present? %>
diff --git a/app/views/record/_record_geo.html.erb b/app/views/record/_record_geo.html.erb
@@ -1,4 +1,4 @@
-<div class="gridband layout-3q1q wrap-full-record">
+<div id="full-record" class="gridband layout-3q1q wrap-full-record">
   <div class="col3q box-content region full-record" data-region="Full record">
     <h2 class="record-title">
       <span class="sr">Title: </span>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="gridband layout-3q1q wrap-full-record">`
	`1`	`+<div id="full-record" class="gridband layout-3q1q wrap-full-record">`
`2`	`2`	`<div class="col3q box-content region full-record" data-region="Full record">`
`3`	`3`	`<h2 class="record-title">`
`4`	`4`	`<span class="sr">Title: </span>`