tutorial: update hamburger component to use button element

src/content/docs/en/tutorial/2-pages/4.mdx

@@ -109,7 +109,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     ---
     ```
 
@@ -129,7 +129,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     </style>
     ```
 
-3. Check your About page in your browser preview. You should see that the skills are now navy blue, as set by the `skillColor` variable passed to the `define:vars` directive.
+3. Check your About page in your browser preview. You should see that the skills are now crimson red, as set by the `skillColor` variable passed to the `define:vars` directive.
 </Steps>
 
 <Box icon="puzzle-piece">
@@ -154,7 +154,7 @@ The Astro `<style>` tag can also reference any variables from your frontmatter s
     ```
 
  2. Add any missing variable definitions in your frontmatter script so that your new `<style>` tag successfully applies these styles to your list of skills:
-    - The text color is navy blue
+    - The text color is crimson red
     - The text is bold
     - The list items are in all-caps (all uppercase letters)
 </Steps>
@@ -178,7 +178,7 @@ const happy = true;
 const finished = false;
 const goal = 3;
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---

src/content/docs/en/tutorial/2-pages/5.mdx

@@ -74,7 +74,7 @@ There are a few ways to define styles **globally** in Astro, but in this tutoria
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     const fontWeight = "bold";
     const textCase = "uppercase";
     ---

src/content/docs/en/tutorial/3-components/3.mdx

@@ -95,12 +95,12 @@ Since your site will be viewed on different devices, it's time to create a page
 ## Add responsive styles
 
 <Steps>
-1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `<div>` with the class `nav-links`.
+1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `<div>` with the class `nav-links` and the id attribute set to `main-menu`.
 
     ```astro title="src/components/Navigation.astro" ins={3,7}
     ---
     ---
-    <div class="nav-links">
+    <div id="main-menu" class="nav-links">
       <a href="/">Home</a>
       <a href="/about">About</a>
       <a href="/blog">Blog</a>
@@ -144,9 +144,6 @@ Since your site will be viewed on different devices, it's time to create a page
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -159,14 +156,15 @@ Since your site will be viewed on different devices, it's time to create a page
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
     .nav-links a:focus {
       background-color: #ff9776;
     }
 
-    .expanded {
+    :has(.menu[aria-expanded="true"]) .nav-links {
       display: unset;
     }
 

src/content/docs/en/tutorial/3-components/4.mdx

@@ -16,47 +16,45 @@ import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Let's add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!
+Let's add a menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!
 
 <PreCheck>
-  - Create a hamburger menu component
+  - Create a menu component
   - Write a `<script>` to allow your site visitors to open and close the navigation menu
   - Move your JavaScript to its `.js` file
 </PreCheck>
 
-## Build a Hamburger component
+## Build a Menu component
 
-Create a `<Hamburger />` component to open and close your mobile menu.
+Create a `<Menu />` component to open and close your mobile menu.
 
 <Steps>
-1. Create a file named `Hamburger.astro` in `src/components/`
+1. Create a file named `Menu.astro` in `src/components/`
 
 
-2. Copy the following code into your component. This will represent your 3-line "hamburger" menu to open and close your navigation links on mobile. (You will add the new CSS styles to `global.css` later.)
+2. Copy the following code into your component. It creates a button that will be used to toggle the visibility of the navigation links on mobile devices. (You will add the new CSS styles to `global.css` later.)
 
-    ```astro title="src/components/Hamburger.astro"
+    ```astro title="src/components/Menu.astro"
     --- 
     ---
-    <div class="hamburger">
-      <span class="line"></span>
-      <span class="line"></span>
-      <span class="line"></span>
-    </div>
+    <button aria-expanded="false" aria-controls="main-menu" class="menu">
+      Menu
+    </button>
     ```
 
-3. Place this new `<Hamburger />` component just before your `<Navigation />` component in `Header.astro`. 
+3. Place this new `<Menu />` component just before your `<Navigation />` component in `Header.astro`. 
 
     <details>
     <summary>Show me the code!</summary>
 
     ```astro title="src/components/Header.astro" ins={2,7}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
+        <Menu />
         <Navigation />
       </nav>
     </header>
@@ -65,26 +63,19 @@ Create a `<Hamburger />` component to open and close your mobile menu.
 
 4. Add the following styles for your Hamburger component:
 
-    ```css title="src/styles/global.css" ins={2-13, 56-58}
+    ```css title="src/styles/global.css" ins={2-9, 51-53}
     /* nav styles */
-    .hamburger {
-      padding-right: 20px;
-      cursor: pointer;
-    }
-
-    .hamburger .line {
-      display: block;
-      width: 40px;
-      height: 5px;
-      margin-bottom: 10px;
-      background-color: #ff9776;
+    .menu {
+      background-color: #0d0950;
+      border: none;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      padding: 5px 10px;
     }
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -97,13 +88,15 @@ Create a `<Hamburger />` component to open and close your mobile menu.
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
-    .nav-links a:hover, a:focus {
+    .nav-links a:hover,
+    .nav-links a:focus{
       background-color: #ff9776;
     }
 
-    .expanded {
+    :has(.menu[aria-expanded="true"]) .nav-links {
       display: unset;
     }
 
@@ -121,7 +114,7 @@ Create a `<Hamburger />` component to open and close your mobile menu.
         padding: 15px 20px;
       }
 
-      .hamburger {
+      .menu {
         display: none;
       }
     }
@@ -138,11 +131,14 @@ Adding a `<script>` tag provides client-side JavaScript to "listen" for a user e
 <Steps>
 1. Add the following `<script>` tag to `index.astro`, just before the closing `</body>` tag.
 
-    ```astro title="src/pages/index.astro" ins={2-6}
+    ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu')
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
       </script>
     </body>
@@ -159,18 +155,24 @@ Instead of writing your JavaScript directly on each page, you can move the conte
 1. Create `src/scripts/menu.js` (you will have to create a new `/scripts/` folder) and move your JavaScript into it.
 
     ```js title="src/scripts/menu.js"
-    document.querySelector('.hamburger').addEventListener('click', () => {
-      document.querySelector('.nav-links').classList.toggle('expanded');
+    const menu = document.querySelector('.menu')
+
+    menu.addEventListener('click', () => {
+      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+      menu.setAttribute('aria-expanded', !isExpanded);
     });
     ```
 
 2. Replace the contents of the `<script>` tag on `index.astro` with the following file import:
 
-    ```astro title="src/pages/index.astro" ins={7} del={3-5}
+    ```astro title="src/pages/index.astro" ins={10} del={3-8}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu')
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
 
         import "../scripts/menu.js";

src/content/docs/en/tutorial/3-components/index.mdx

@@ -26,7 +26,7 @@ You'll build:
 - A Navigation component that presents a menu of links to your pages 
 - A Footer component to include at the bottom of each page
 - A Social Media component, used in the Footer, that links to profile pages
-- An interactive Hamburger component to toggle the Navigation on mobile
+- An interactive Menu component to toggle the Navigation on mobile
 
 Along the way, you'll use CSS and JavaScript to build a responsive design that reacts to screen sizes and user input.
 

src/content/docs/en/tutorial/6-islands/2.mdx

@@ -30,8 +30,8 @@ Let's build a clickable icon to let your users toggle between light or dark mode
     ```astro title="src/components/ThemeIcon.astro"
     ---
     ---
-    <button id="themeToggle">
-      <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <button id="themeToggle" aria-label="Toggle theme">
+      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
         <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
       </svg>
@@ -50,21 +50,30 @@ Let's build a clickable icon to let your users toggle between light or dark mode
     </style>
     ```
 
-2. Add the icon to `Header.astro` so that it will be displayed on all pages. Don't forget to import the component.
+2. Add the icon to `Header.astro` so that it will be displayed on all pages. Wrap the two buttons (ThemeIcon and Menu) inside a `<div>` to group them together, and include some basic styles to improve the layout. Don't forget to import the component.
 
-    ```astro title="src/components/Header.astro" ins={4,9}
+    ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     import ThemeIcon from './ThemeIcon.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
-        <ThemeIcon />
+        <div>
+          <ThemeIcon />
+          <Menu />
+        </div>
         <Navigation />
       </nav>
     </header>
+
+    <style>
+      div {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
     ```
 
 3. Visit your browser preview at `http://localhost:4321` to see the icon now on all your pages. You can try clicking it, but you have not written a script to make it interactive yet.
@@ -77,15 +86,35 @@ Choose some alternate colors to use in dark mode.
 <Steps>
 1. In `global.css`, define some dark styles. You can choose your own, or copy and paste:
 
+    :::note
+    When you update your site to include dark mode, some colors used may need updating. Always check your rendered site when adding new styles and colors, and make adjustments when necessary! This can mean adding more `.dark` CSS style rules to display different styles in dark mode, or you may wish to update some colors so that they work equally well in both themes.
+
+    Consider using accessibility tools such as a contrast checker when creating a set of colors for your site, or running a check on your website, for example with a browser extension, to spot any potential issues.
+    :::
+
     ```css title="src/styles/global.css"
     html.dark {
       background-color: #0d0950;
       color: #fff;
     }
 
+    .dark .menu {
+      background-color: #fff;
+      color: #000;
+    }
+
+    .dark .nav-links a:hover,
+    .dark .nav-links a:focus {
+      color: #0d0950;
+    }
+
     .dark .nav-links a {
       color: #fff;
     }
+
+    .dark a {
+      color: #ff9776;
+    }
     ```
 </Steps>
 

src/content/docs/en/tutorial/6-islands/3.mdx

@@ -33,7 +33,7 @@ const identity = {
   hobbies: ["photography", "birdwatching", "baseball"],
 };
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---