SEO & a11y improvements

themes/jamstackthemes/assets/js/scripts.js

@@ -1,7 +1,21 @@
-document.querySelectorAll(".toggle-icon").forEach((title) => {
-  title.addEventListener('click', (e) => {
-    e.currentTarget.classList.toggle('closed');
-    e.currentTarget.parentNode.parentNode.classList.toggle('closed');
+function toggleFilterList(element) {
+  // Check aria-expanded state
+  const pressed = (element.getAttribute("aria-expanded") === "true");
+  element.setAttribute("aria-expanded", !pressed);
+  element.classList.toggle('closed');
+  element.parentNode.parentNode.classList.toggle('closed');
+}
+
+document.querySelectorAll(".toggle-icon").forEach((toggleIcon) => {
+  toggleIcon.addEventListener('click', (e) => {
+    toggleFilterList(e.currentTarget);
+  })
+  toggleIcon.addEventListener('keydown', (e) => {
+    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") { // "Spacebar" for IE11 support
+      // Prevent the default action to stop scrolling when space is pressed
+      e.preventDefault();
+      toggleFilterList(event.target);
+    }
   })
 })
 

themes/jamstackthemes/assets/scss/_filter.scss

@@ -112,6 +112,14 @@
         &:hover {
           border: 2px solid $primary;
         }
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 5px $primary;
+        }
+        &:focus:not(:focus-visible) {
+          // for modern browsers, remove outline if mouse focus
+          box-shadow: none;
+        }
         &.mixitup-control-active {
           background: $primary;
           border: 2px solid $primary;
@@ -120,9 +128,6 @@
           background-position: center center;
           background-repeat: no-repeat;
         }
-        &:focus {
-          outline: none;
-        }
       }
       .filter-icon {
         width: 20px;

themes/jamstackthemes/layouts/_default/taxonomy.html

@@ -2,13 +2,17 @@
 {{ define "header_css" }}{{ end }}
 {{ define "body_classes" }}page-taxonomy{{ end }}
 
+{{ define "meta_tags" }}
+<meta name="description" content="{{.Title}} Themes and Starters for JAMstack Sites." />
+{{ end }}
+
 {{ define "main" }}
 {{ $themeCount := len .Pages }}
 
 <div class="main">
   <div class="hero">
     <div class="heading">
-      <div class="heading-icon"><img src="{{ .Params.icon | relURL }}"/></div>
+      <div class="heading-icon"><img src="{{ .Params.icon | relURL }}" alt="{{.Title}} Logo" /></div>
       <h1 class="heading-title">{{.Title}} Themes <span class="count">({{ $themeCount }})</span></h1>
     </div>
     {{ partial "sort-buttons.html" . }}

themes/jamstackthemes/layouts/_default/terms.html

@@ -1,3 +1,7 @@
+{{ define "meta_tags" }}
+<meta name="description" content="{{.Title}} for JAMstack Sites." />
+{{ end }}
+
 {{ define "main" }}
 <div class="main">
   {{ $themeCount := len .Pages }}

themes/jamstackthemes/layouts/partials/filters.html

@@ -8,8 +8,8 @@ <h3>SSG </h3>
           <svg height='20px' width='20px'  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" x="0px" y="0px"><title>01</title><path d="M50,12.06A37.94,37.94,0,1,0,87.94,50,38,38,0,0,0,50,12.06Zm0,6A32,32,0,0,1,81.79,47H66a3,3,0,0,0-2.47,1.29l-6.16,8.9L45.66,34.62a3,3,0,0,0-5.19-.24L32.36,47H18.21A32,32,0,0,1,50,18.06Zm0,63.88A32,32,0,0,1,18.21,53H34a3,3,0,0,0,2.52-1.38L42.72,42l11.62,22.4A3,3,0,0,0,56.81,66H57a3,3,0,0,0,2.47-1.29L67.57,53H81.79A32,32,0,0,1,50,81.94Z"></path></svg>
         </a>
       </span>
-      <span class="toggle-icon">
-        <img src="{{ "images/ui/chevron-down-solid.svg" | relURL }}"/>
+      <span class="toggle-icon" role="button" aria-expanded="true" tabindex="0">
+        <img src="{{ "images/ui/chevron-down-solid.svg" | relURL }}"  alt="Toggle SSG list button" />
       </span>
     </div>
     <ul class="filter-list">
@@ -32,8 +32,8 @@ <h3>CMS</h3>
           <svg height='20px' width='20px'  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" x="0px" y="0px"><title>01</title><path d="M50,12.06A37.94,37.94,0,1,0,87.94,50,38,38,0,0,0,50,12.06Zm0,6A32,32,0,0,1,81.79,47H66a3,3,0,0,0-2.47,1.29l-6.16,8.9L45.66,34.62a3,3,0,0,0-5.19-.24L32.36,47H18.21A32,32,0,0,1,50,18.06Zm0,63.88A32,32,0,0,1,18.21,53H34a3,3,0,0,0,2.52-1.38L42.72,42l11.62,22.4A3,3,0,0,0,56.81,66H57a3,3,0,0,0,2.47-1.29L67.57,53H81.79A32,32,0,0,1,50,81.94Z"></path></svg>
         </a>
       </span>
-      <span class="toggle-icon">
-        <img src="{{ "images/ui/chevron-down-solid.svg" | relURL }}"/>
+      <span class="toggle-icon" role="button" aria-expanded="true" tabindex="0">
+        <img src="{{ "images/ui/chevron-down-solid.svg" | relURL }}" alt="Toggle CMS list button" />
       </span>
     </div>
     <ul class="filter-list">

themes/jamstackthemes/layouts/partials/term-card.html

@@ -1,8 +1,8 @@
 
 <div class="term">
-  <a class="term-overlay" href="{{ .term.Permalink }}"></a>
+  <a class="term-overlay" href="{{ .term.Permalink }}" aria-label="{{ .term.Title }}"></a>
   {{ if .term.Params.icon }}
-    <img width="30" src="{{ .term.Params.icon | relURL }}"/>
+    <img width="30" src="{{ .term.Params.icon | relURL }}" alt="{{ .term.Title }} Logo" />
   {{ end }}
   <h2>{{ .term.Title }}</h2>
 </div>