update navs to use aria-label attribute instead of aria-labelledby to…

… remove h2s causing accessibilty issues, for #539
middlebury · Jul 9, 2024 · 98c7278 · 98c7278
1 parent 60d2769
commit 98c7278
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 28 deletions.
diff --git a/src/templates/davis-home.twig b/src/templates/davis-home.twig
@@ -1,7 +1,7 @@
 {% extends "school-layout.twig" %}
 
 {% set theme = 'uwc' %}
-{% set is_front = false %}
+{% set is_front = true %}
 {% set has_page_image = true %}
 
 {% block layout_header %}

diff --git a/src/templates/partials/breadcrumb.twig b/src/templates/partials/breadcrumb.twig
@@ -1,5 +1,4 @@
-<nav class="breadcrumb {{light ? 'breadcrumb--light' : ''}}" aria-labelledby="midd-breadcrumb-label">
-  <h2 class="sr-only" id="midd-breadcrumb-label">Breadcrumb</h2>
+<nav class="breadcrumb {{light ? 'breadcrumb--light' : ''}}" aria-label="Breadcrumb">
 
   <ol class="breadcrumb__list">
     {% for item in items %}

diff --git a/src/templates/partials/davis-header.twig b/src/templates/partials/davis-header.twig
@@ -5,21 +5,29 @@
     <div class="school-header__main">
 
       <div class="school-header__menu-content">
-        <a href="#" class="school-header__logo">
-          {% block school_logo %}
-            <img
-              src="images/davis-globe.png"
-              alt="Globe in logo for Davis United World College Scholars Program"
-            />
-            <img
-              src="images/davis-uwc-logo-309x35.png"
-              srcset="images/davis-uwc-logo-288x36.png 288w, images/davis-uwc-logo-309x35.png 309w"
-              sizes="(min-width: 768px) 309px, 288px"
-              alt="Davis United World College Scholars Program"
-            />
-            <span class="sr-only">Davis United World College Scholars Program</span>
-          {% endblock %}
-        </a>
+        <div class="school-header__logo">
+          {% if is_front %}
+            <h1 class="school-header__title">
+          {% endif %}
+              <a href="#">
+                {% block school_logo %}
+                  <img
+                    src="images/davis-globe.png"
+                    alt="Globe in logo for Davis United World College Scholars Program"
+                  />
+                  <img
+                    src="images/davis-uwc-logo-309x35.png"
+                    srcset="images/davis-uwc-logo-288x36.png 288w, images/davis-uwc-logo-309x35.png 309w"
+                    sizes="(min-width: 768px) 309px, 288px"
+                    alt="Davis United World College Scholars Program"
+                  />
+                  <span class="sr-only">Davis United World College Scholars Program</span>
+                {% endblock %}
+              </a>
+          {% if is_front %}
+            </h1>
+          {% endif %}
+        </div>
         <div class="davis-nav__menu">
           <nav aria-labelledby="midd-main-nav-label">
             <h2 class="sr-only" id="midd-main-nav-label">Main navigation</h2>
@@ -76,8 +84,7 @@
 
       <div class="school-header__util-links">
         <div class="davis-nav">
-          <nav aria-labelledby="midd-secondary-nav-label">
-            <h2 class="sr-only" id="midd-secondary-nav-label">Secondary navigation</h2>
+          <nav aria-labelledby="midd-secondary-nav-label" aria-label="Secondary navigation">
             <ul class="davis-nav__list">
               {% for item in ['Midd Students', 'Parents', 'Advisors'] %}
                 <li class="davis-nav__item">

diff --git a/src/templates/partials/midd-header.twig b/src/templates/partials/midd-header.twig
@@ -13,8 +13,7 @@
       </a>
     </div>
 
-    <nav class="midd-nav" aria-labelledby="midd-header-nav-label">
-      <h2 class="sr-only" id="midd-header-nav-label">Primary navigation</h2>
+    <nav class="midd-nav" aria-label="Primary navigation">
       <button class="midd-nav__handle" data-toggle-target=".js-midd-nav" data-toggle-group="midd-header" aria-expanded="false" aria-labelledby="midd-nav__handle-label">
         {% include 'partials/icon.twig' with { name: 'bars', class: 'mr-1 midd-nav__bars' } %}
         {% include 'partials/icon.twig' with { name: 'times', class: 'mr-1 midd-nav__times' } %}

diff --git a/src/templates/partials/nav.twig b/src/templates/partials/nav.twig
@@ -1,5 +1,4 @@
-<nav class="nav" aria-labelledby="midd-nav-label">
-  <h2 class="sr-only" id="midd-nav-label">{{label}}</h2>
+<nav class="nav" aria-label="{{label}}">
 
   <ul class="nav__list">
     {% for item in items %}

diff --git a/src/templates/partials/page-header.twig b/src/templates/partials/page-header.twig
@@ -26,8 +26,10 @@
             light: image_src  }
           %}
         {% endif %}
-
-        <h1 class="page-header__title" id="midd-page-header-label">{{title}}</h1>
+
+        {% if title %}
+          <h1 class="page-header__title" id="midd-page-header-label">{{title}}</h1>
+        {% endif %}
         {{pronouns}}
 
         {{after_title}}

diff --git a/src/templates/partials/school-header.twig b/src/templates/partials/school-header.twig
@@ -67,8 +67,7 @@
               </ul>
             </nav>
 
-            <nav aria-labelledby="midd-secondary-nav-label">
-              <h2 class="sr-only" id="midd-secondary-nav-label">Secondary navigation</h2>
+            <nav aria-label="Secondary navigation">
               <ul class="school-nav__list">
                 {% for item in ['Midd Students', 'Parents', 'Advisors'] %}
                   <li class="school-nav__item">