Improve accessibility of home page slides (#125)

* set attr inert to true for all non-active slides

to remove non-viewable items from the tab index

* set focus on active slide when updating

* set attr aria-hidden to true on inactive slides:

to hide their content from screen reader users

* made slides section elements with accessible names

- made slides container a main element

* set active slide aria-hidden to false...

rather than remove the attribute (is this better for assistive tech?)

* updated dep caniuse-lite

* adjust html to utilize carousel pattern from wai apg:

see: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/:wq

* fixed slides keyboard navigation (in dev env)

* added missing alt text to images

* updated slide 8 h4s to be h3s

* added code comments

* cleaned up logic for setting of active slide

* fixed code comment

app/src/components/keyboardNavigation.js

@@ -35,7 +35,8 @@ export class KeyboardNavigation extends Component {
     if (
       event.target &&
       typeof event.target.matches === "function" &&
-      !event.target.matches("body")
+      // disregard the event when the target is NOT coming from a .slide div element
+      !event.target.matches("div.slide")
     ) {
       return;
     }

app/src/components/slidesContainer.js

@@ -55,8 +55,18 @@ export class SlidesContainer extends Component {
   }
 
   set activeSlide(value) {
-    this.slides.forEach((slide) => slide.classList.remove("active"));
-    this.slides[value].classList.add("active");
+    this.slides.forEach((slide) => {
+      if (slide === this.slides[value]) {
+        slide.classList.add("active");
+        slide.removeAttribute("inert");
+        slide.setAttribute("aria-hidden", false);
+        slide.focus();
+      } else {
+        slide.classList.remove("active");
+        slide.setAttribute("inert", true);
+        slide.setAttribute("aria-hidden", true);
+      }
+    });
   }
 
   get activeSlide() {