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

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c20ac30
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/68a367c67a4ae60008a42b08
😎 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/3-components/4.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.