tutorial: update hamburger component to use button element

[bjohansebas]

Description (required)

The hamburger component example was updated to use a button, and some classes were added to make it like the original, since by default buttons have certain styles that depend on the browser/operating system

Related issues & labels (optional)

• Closes There are accessibility problems with the sample code #12143

• Suggested label: a11n

• Code changes: improve menu accessibility blog-tutorial-demo#44

UPDATE

This PR now tackles more accessibility issues than just the Hamburger menu, and also focuses on the Theme Toggle component and dark mode styling in general.

When updating docs to match the corresponding code changes (all instructions, code snippets should now guide people towards building the new code instead), the key things to search for to figure out where updates are needed (in code snippets and text/explanation/instructions) are:

• the word "navy" (the CSS variable used as an example on the About page) should now be "crimson." Descriptions in text like "navy blue" can be updated to "crimson red."
• the navigation menu is no longer a "hamburger" menu, but is instead just a "menu" (and the corresponding component Hamburger.astro has been renamed to Menu.astro)

Sections requiring changes based on the updated code

A scan through the tutorial on Talking and Doc'ing shows changes are required (sometimes extensively) in the following pages:

• 2-4 skillColor variable colour updated when styling the about page (navy -> crimson)
• 2-5 (navy)
• 3-0 Looking ahead mentions building a "Hamburger" menu
• 3-3 Header, CSS changes
• 3-4 Building a hamburger menu is now building a Menu
• 6-2 building the theme toggle
• 6-3 congrats shows the About page code (navy -> crimson)

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3866484
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/68d54538f4440600087386c9
😎 Deploy Preview	https://deploy-preview-12171--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
en/tutorial/2-pages/4.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/2-pages/5.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/3-components/3.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/3-components/4.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/3-components/index.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/6-islands/2.mdx	Source changed, localizations will be marked as outdated.
en/tutorial/6-islands/3.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[sarah11918]

Thanks for snagging the issue! Just noting that after this specific code is finalized, we need to:

• update the blog code tutorial repo code to reflect whatever we're instructing people to build: https://github.com/withastro/blog-tutorial-demo
• we need to check to see whether this code is included anywhere else in future lessons (e.g. a "code check in" or a refactor where this menu is shown again) and make sure it is updated to match whatever is done here

[bjohansebas]

I just checked and in this repository there are no other changes besides the i18n one. I’m not sure if I should update it since it will be marked as updated if I make the change.

I’ll make the change in the repo you shared with me

[sarah11918]

Just answering this here as sometimes people use past PRs for reference or guidance!

I’m not sure if I should update it since it will be marked as updated if I make the change.

Just like our PR template says, changes should only be made in one language. If we're changing the English content, we don't want any other translations changed. (And, in the rare situations where this might be helpful, we will say so and ask for it to be added alongside the English content.)

[yanthomasdev]

Thanks @bjohansebas, since we are already improving accessibility, I believe we can go all the way and get the most accessible implementation.

Could you follow this article along and match the implementation?
https://www.accede-web.com/en/guidelines/rich-interface-components/hamburger-menu/

I believe all the changes needed will be:

• Add aria-expanded="false" to the button by default.
• Change the script to toggle aria-expanded on click.

[bjohansebas]

Hey, I made several changes to the template (withastro/blog-tutorial-demo#44), please review them and I’ll make the content changes here once we’re in agreement.

[sarah11918]

Heads up that we seem to be happy with the changes in the blog post code PR, so I think these docs can be updated any time! (I've added some extra context to the PR description.)

Are you still up for leading this, @bjohansebas ?

[bjohansebas]

Are you still up for leading this, @bjohansebas ?

Cool, yep I’ll do it this weekend, or if I find some free time before, I’ll do it then

[sarah11918]

Just pinging this one for freshness, and to make sure you still have availability to work on this @bjohansebas ! It's no problem if you'd like or prefer reinforcements to jump in and help here! 🙌

[bjohansebas]

Oh, yes, I’m on it right now, it’s been a very busy few weeks.

[HiDeoo]

Left a suggestion for a reference to hamburger but tutorial/3-components/4.mdx still contains 2 other "hamburger" references that I cannot suggest:

• Line 127
• Line 183

[HiDeoo]

Suggested change

	4. Add the following styles for your Hamburger component:
	4. Add the following styles for your Menu component:

References to hamburger have been fixed

[ArmandPhilippot]

Checked during Talking & Doc'ing and everything LGTM!