Merge pull request #45 from Lullabot/25--accessibility

Accessibility updates
Lullabot · Jul 19, 2024 · f80b290 · f80b290
2 parents ab0fa68 + d2c7067
commit f80b290
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 10 deletions.
diff --git a/src/_includes/chapter.liquid b/src/_includes/chapter.liquid
@@ -34,7 +34,7 @@ layout: layout
   {% endif %}
 </div>
 
-<div class="nav-container">
+<nav class="nav-container" aria-label="E-book arrow navigation">
   {% if isFirstChapter %}
     <a href="../../table-of-contents/">
       <div class="nav-button">
@@ -58,4 +58,4 @@ layout: layout
       </div>
     </a>
   {% endif %}
-</div>
+</nav>
diff --git a/src/_includes/cover.liquid b/src/_includes/cover.liquid
@@ -9,7 +9,7 @@ layout: layout
 
   <div class="cover-copy">
     <div class="get-started">
-      <a href="../table-of-contents/">Get Started<i class="gs-arrow-right"></a>
+      <a href="../table-of-contents/" aria-label="Read the {{ title }} eBook">Get Started<i class="gs-arrow-right"></a>
     </div>
     {{ content }}
   </div>

diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
@@ -12,9 +12,9 @@
   <body>
 
     <div class="logo-container">
-      <a href="https://lullabot.com/">
+      <a href="https://lullabot.com/" aria-label="Lullabot.com homepage">
         <div>
-          <img src="/img/logo.svg" alt="" />
+          <img src="/img/logo.svg" alt="Lullabot.com homepage" />
         </div>
       </a>
     </div>
@@ -30,7 +30,8 @@
           <div>{{ bookWithChapters.book.title }}</div>
         </div>
           <div class="page-number">
-            <div>
+            <div aria-label="Current page number">
+              <span class="visually-hidden">Page: </span>
               {% if page.fileSlug == 'cover' %}
                 <!-- Empty for cover page -->
               {% elsif page.fileSlug == 'table-of-contents' %}

diff --git a/src/_includes/table-of-contents.liquid b/src/_includes/table-of-contents.liquid
@@ -3,8 +3,8 @@ layout: layout
 title: "Table of Contents"
 ---
 
-<nav class="toc-container">
-  <p>{{ title }}</p>
+<nav class="toc-container" aria-labelledby="toc-title">
+  <p id="toc-title">{{ title }}</p>
   <div class="toc-columns">
     {% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}
     {% assign count = 1 %}
@@ -44,7 +44,7 @@ title: "Table of Contents"
   </div>
 </nav>
 
-<div class="nav-container">
+<nav class="nav-container" aria-label="E-book arrow navigation">
   <a href="../cover/">
     <div class="nav-button">
       <i class="gg-arrow-left"></i>
@@ -55,4 +55,4 @@ title: "Table of Contents"
       <i class="gg-arrow-right"></i>
     </div>
   </a>
-</div>
+</nav>
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -6,6 +6,10 @@ $lb-white: #fff;
 
 @import "/fonts/fonts.css";
 
+.visually-hidden {
+  display: none;
+}
+
 body {
   margin: 0;
   display: flex;
@@ -57,6 +61,20 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: background-color 0.3s ease;
+}
+
+.logo-container:hover {
+  background-color: $lb-black;
+}
+
+.logo-container:hover svg rect {
+  fill: $lb-black;
+}
+
+.logo-container svg rect {
+  fill: $lb-red;
+  transition: fill 0.3s ease;
 }
 
 .page-number {