Merge pull request #629 from middlebury/a11y-updates-v3

Accessibility updates v3
middlebury · Aug 27, 2024 · 6ad2e9b · 6ad2e9b
2 parents 5193f03 + c8d0ca9
commit 6ad2e9b
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 71 deletions.
diff --git a/src/js/components/slider.tsx b/src/js/components/slider.tsx
@@ -61,7 +61,7 @@ class Slider extends Component<SliderProps> {
 
     return (
       <div class="slider">
-        <label htmlFor={id} class="slider__label">
+        <label htmlFor={id} id={`${id}-label`} class="slider__label">
           {label}
         </label>
         <div
@@ -73,6 +73,7 @@ class Slider extends Component<SliderProps> {
             id={id}
             class="slider__handle"
             role="slider"
+            aria-labelledby={`${id}-label`}
             style={{
               width: sliderLeft + '%'
             }}

diff --git a/src/scss/_global.scss b/src/scss/_global.scss
@@ -8,6 +8,12 @@
   box-sizing: border-box;
 }
 
+
+html,
+body {
+  overflow-x: hidden;
+}
+
 /*
  * 1. prevent chrome from hiding background images and colors by default when printing
  */

diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss
@@ -9,6 +9,12 @@ $list-item-margin-bottom-sm: $spacing-3;
   &:not(:last-child) {
     margin-bottom: $list-item-margin-bottom;
   }
+
+  p:last-child {
+    a {
+      @include link-border;
+    }
+  }
 }
 
 .list--dividers {

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/paragraphs/audio.twig b/src/templates/paragraphs/audio.twig
@@ -13,6 +13,6 @@
   <div class="audio__body">
     <h3 class="audio__title" id="midd-audio-title-1">Audio title</h3>
     <p class="audio__text" id="midd-audio-text-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis commodi placeat, perferendis ratione vitae officiis vero. Commodi ullam fugiat expedita qui veritatis adipisci minus quod neque! Voluptatum tempora iure quo.</p>
-    {% include 'partials/transcript.twig' with { id: 999 } %}
+    {% include 'partials/transcript.twig' with { id: random(1234) } %}
   </div>
 </div>
diff --git a/src/templates/partials/accordion.twig b/src/templates/partials/accordion.twig
@@ -1,4 +1,4 @@
-<div class="accordion">
+<div class="accordion" role="tablist">
 
   {% for item in items %}
 

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
@@ -45,8 +45,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">

diff --git a/src/templates/partials/social-links.twig b/src/templates/partials/social-links.twig
@@ -7,6 +7,7 @@
             name: name,
             class: large ? 'f5' : null
           } %}
+          <span class="sr-only">Link to page/content on {{name}}</span>
         </a>
       </li>
     {% endif %}

diff --git a/src/templates/partials/story.twig b/src/templates/partials/story.twig
@@ -1,44 +1,50 @@
 <article class="clearfix" aria-labelledby="midd-story-label-{{id}}">
-  {% if featured %}
-    <div class="mb-3">
-      <a href="">
-        <figure class="media">
-          {% include 'partials/img.twig' with { name: 'featured' } %}
-        </figure>
-      </a>
-    </div>
-  {% else %}
-    <div class="float-right ml-4 mb-4">
-      <a href="">
-        <figure class="media">
-          {% include 'partials/img.twig' with { name: 'story_teaser' } %}
-        </figure>
-      </a>
-    </div>
-  {% endif %}
+	{% if featured %}
+		<div class="mb-3">
+			<a href="">
+				<figure class="media">
+					{% include 'partials/img.twig' with { name: 'featured' } %}
+				</figure>
+			</a>
+		</div>
+	{% else %}
+		<div class="float-right ml-4 mb-4">
+			<a href="">
+				<figure class="media">
+					{% include 'partials/img.twig' with { name: 'story_teaser' } %}
+				</figure>
+			</a>
+		</div>
+	{% endif %}
 
-  <p class="d-flex flex-wrap f2 text-caps mb-1">
-    <a href="">Category 1</a>,&nbsp;
-    <a href="">Category 1</a>
-  </p>
+	<p class="d-flex flex-wrap f2 text-caps mb-1">
+		<a href="">Category 1</a>,&nbsp;
+		<a href="">Category 1</a>
+	</p>
 
-  <h2 class="{{featured ? 'h2' : 'h3'}} mb-1" id="midd-story-label-{{id}}">
-    <a href="#">
-      {% if env.test or random(1) %}
-        Longer headline starting here lorem ipsum dolor sit amet consectetur adipisicing elit
-      {% else %}
-        Shorter headline a few words
-      {% endif %}
-    </a>
-  </h2>
-  <p class="f2 mb-3">
-    <time datetime="">Ocotober 10, 2018</time> <span class="mx-2">|</span> by
-    {% for name in ['Sarah Ray', 'Stephen Diehl'] %}
-      <a href="" class="link-underline">{{name}}</a>{% if not loop.last %}, {% endif %}
-    {% endfor %}
-  </p>
-  <p class="f3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum rem dolor harum consequuntur laudantium commodi accusantium debitis quisquam eligendi deleniti itaque saepe voluptatibus soluta necessitatibus, voluptas minus possimus? Itaque, sed.</p>
-  {% if env.test or random(1) %}
-    <span class="badge mt-2">Video</span>
-  {% endif %}
+	<h2 class="{{featured ? 'h2' : 'h3'}} mb-1" id="midd-story-label-{{id}}">
+		<a href="#">
+			{% if env.test or random(1) %}
+				Longer headline starting here lorem ipsum dolor sit amet consectetur adipisicing elit
+			{% else %}
+				Shorter headline a few words
+			{% endif %}
+		</a>
+	</h2>
+	<p class="f2 mb-3">
+		<time datetime="">Ocotober 10, 2018</time>
+		<span class="mx-2">|</span>
+		by
+		{% for name in ['Sarah Ray', 'Stephen Diehl'] %}
+			<a href="">{{name}}</a>
+			{% if not loop.last %},
+			{% endif %}
+		{% endfor %}
+	</p>
+	<p class="f3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum rem dolor
+		<a href="#" class="link-underline">harum consequuntur</a>
+		laudantium commodi accusantium debitis quisquam eligendi deleniti itaque saepe voluptatibus soluta necessitatibus, voluptas minus possimus? Itaque, sed.</p>
+	{% if env.test or random(1) %}
+		<span class="badge mt-2">Video</span>
+	{% endif %}
 </article>