Merge pull request #2 from markteekman/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "start": "astro dev",

src/components/Footer.astro

@@ -1,4 +1,4 @@
-<footer role="contentinfo">
+<footer>
   <section class="space-16 color-neutral">
     <div class="container">
       <p>&copy; Footer Copyright</p>

src/components/Header.astro

@@ -2,7 +2,7 @@
 import Navigation from '../components/Navigation.astro'
 import SkipLinks from '../components/SkipLinks.astro'
 ---
-<header role="banner">
+<header>
   <SkipLinks client:load />
   <section class="space-16 color-neutral">
     <div class="container">

src/components/SkipLinks.astro

@@ -2,7 +2,9 @@
 	<div class="container">
     <nav class="skip-links" role="navigation" aria-label="Skiplinks">
       <ul>
-        <li><a href="#main-navigation" data-skip-link>Skip to main menu</a></li>
+
+        <!-- NOTE: add this when you have content or hyperlinks to skip before you main menu!
+        <li><a href="#main-navigation" data-skip-link>Skip to main menu</a></li> -->
         <li><a href="#main-content" data-skip-link>Skip to main content</a></li>
       </ul>
     </nav>
@@ -26,11 +28,12 @@
         event.preventDefault()
         const target = event.target.getAttribute('href')
 
+        // NOTE: add this when you have content or hyperlinks to skip before you main menu!
         // set focus to first menu item for skip link to main navigation
-        if (target === '#main-navigation') {
-          const navigation = document.querySelector('#main-navigation')
-          navigation.querySelector('a').focus()
-        }
+        // if (target === '#main-navigation') {
+        //   const navigation = document.querySelector('#main-navigation')
+        //   navigation.querySelector('a').focus()
+        // }
 
         // set focus to first h1 for skip link to main content
         if (target === '#main-content') {

src/layouts/DefaultLayout.astro

@@ -38,7 +38,7 @@ let subtitle = 'Accessible Astro Starter'
     <Header />
 
     <!-- main -->
-    <main id="main-content" role="main">
+    <main id="main-content">
 
       <slot />
 

src/pages/index.astro

@@ -14,9 +14,18 @@ import DarkMode from '../components/DarkMode.astro'
       <h2 class="space-16 bottom">Grid example</h2>
     </div>
     <div class="container" data-auto-grid="3">
-      <p><strong>Column 1 | Cell 1</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
-      <p><strong>Column 2 | Cell 2</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
-      <p><strong>Column 3 | Cell 3</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
+      <div class="box">
+        <h3>Column 1</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
+      </div>
+      <div class="box">
+        <h3>Column 2</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
+      </div>
+      <div class="box">
+        <h3>Column 3</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
+      </div>
     </div>
   </section>
   <section class="space-32">