Merge pull request #58 from argyleink/a11y-fixes

A11y fixes

Author: Adam Argyle

src/components/hero.astro

@@ -44,7 +44,7 @@ const totalFeatures = biomes.reduce((total, biome) => {
     </div>
     <div>
       <p class="sub-title">
-        Chrome and <span class="callout"><Icon name="css" size="1ch" title="CSS" /> CSS</span> in 2024 journeyed<br>
+        Chrome and <span class="callout"><Icon aria-hidden="true" name="css" size="1ch" title="CSS" /> CSS</span> in 2024 journeyed<br>
         through the <b>forest</b>, over the <b>mountains</b>, and across the <b>seas</b>…
       </p>
     </div>

src/components/nav.aside.astro

@@ -10,7 +10,7 @@ const { biomes } = Astro.props;
     <header>
       <h2 class="retro-title">CSS Wrapped</h2>
       <button popovertarget="mobile-menu" popovertargetaction="hide">
-        <Icon name="close" title="Close" size="2rem" />
+        <Icon name="close" title="Close" aria-label="Close" size="2rem" />
       </button>
     </header>
     <div>

src/components/nav.primary.astro

@@ -14,7 +14,7 @@ import ThemeSwitch from "./theme.switch.astro";
       popovertarget="mobile-menu"
       title="Mobile Navigation Menu"
     >
-      <Icon name="hamburger" size="1.75rem" />
+      <Icon name="hamburger" aria-label="Hamburger Menu" size="1.75rem" />
     </button>
   </div>
 </nav>

src/components/video.astro

@@ -16,7 +16,9 @@ const { src, width = 720, height = 480 } = Astro.props;
   muted
   loop
   playsinline
-  preload="metadata"></video>
+  preload="metadata">
+  Your browser does not support video
+</video>
 
 <style>
   /* @keyframes rounded-mask-reveal {

src/components/youtube.astro

@@ -39,5 +39,26 @@ const watchURL = `https://youtube.com/watch?v=${id}`;
       height: auto;
       aspect-ratio: var(--aspectRatio);
     }
+
+    /* Make the fallback link the size of the whole component */
+    lite-youtube > a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: var(--radius-3);
+    }
+
+    /* Hide the fallback link when the component loads the button to prevent two tab stops */
+    lite-youtube > a {
+      outline-offset: -5px;
+    }
+
+    /* Hide the fallback link when the component loads the button to prevent two tab stops */
+    lite-youtube:has(button) > a {
+      display: none;
+    }
   }
 </style>

src/features/components/anchor-positioning.astro

@@ -65,7 +65,7 @@ const slug = slugify(title);
 
   <div class="resources">
     <p>
-      <Icon name="book" title="Book Icon" />
+      <Icon name="book" title="Book Icon"aria-hidden="true" />
       Resources:
     </p>
     <ul>

src/features/developerexperience/at-property.astro

@@ -82,7 +82,7 @@ div {
 
   <div class="resources">
     <p>
-      <Icon name="book" title="Book Icon" />
+      <Icon name="book" title="Book Icon"aria-hidden="true" />
       Resources:
     </p>
     <ul>

src/features/developerexperience/light-dark.astro

@@ -72,7 +72,7 @@ const slug = slugify(title);
 
   <div class="resources">
     <p>
-      <Icon name="book" title="Book Icon" />
+      <Icon name="book" title="Book Icon"aria-hidden="true" />
       Resources:
     </p>
     <ul>

src/features/developerexperience/starting-style.astro

@@ -79,7 +79,7 @@ const slug = slugify(title);
 
   <div class="resources">
     <p>
-      <Icon name="book" title="Book Icon" />
+      <Icon name="book" title="Book Icon"aria-hidden="true" />
       Resources:
     </p>
     <ul>

src/features/interactions/scroll-driven-animations.astro

@@ -50,7 +50,7 @@ const slug = slugify(title);
 
   <div class="resources">
     <p>
-      <Icon name="book" title="Book Icon" />
+      <Icon name="book" title="Book Icon"aria-hidden="true" />
       Resources:
     </p>
     <ul>