Skip to content

tutorial: update hamburger component to use button element #12171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

tutorial: update hamburger component to use button element #12171

wants to merge 4 commits into from

Conversation

bjohansebas
Copy link
Contributor

@bjohansebas bjohansebas commented Aug 18, 2025 •
edited
Loading

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)

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 Netlify
Copy link

netlify bot commented Aug 18, 2025 •
edited
Loading

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 1bf7051
🔍 Latest deploy log https://app.netlify.com/projects/astro-docs-2/deploys/68c5a6c941d1b90008121848
😎 Deploy Preview https://deploy-preview-12171--astro-docs-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Contributor

astrobot-houston commented Aug 18, 2025 •
edited
Loading

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
Copy link
Member

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
Copy link
Contributor Author

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

@bjohansebas bjohansebas mentioned this pull request Aug 18, 2025
Open
@sarah11918
Copy link
Member

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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 ?

@sarah11918 sarah11918 added improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes) a11y Anything to do with improving accessibility tutorial Content/UI for the Build a Blog Tutorial code snippet update Updates a code sample: typo, outdated code etc. labels Sep 1, 2025
@bjohansebas
Copy link
Contributor Author

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
Copy link
Member

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
Copy link
Contributor Author

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

bjohansebas
bjohansebas commented Sep 13, 2025
View reviewed changes
src/content/docs/en/tutorial/6-islands/2.mdx
```

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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I split this into more steps, or is it fine as it is? Also, any suggestions about the message are always welcome.

bjohansebas
bjohansebas commented Sep 13, 2025
View reviewed changes
src/content/docs/en/tutorial/6-islands/2.mdx
:::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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to recommend a contrast checker? I don't know any to suggest, the one built into the browser is probably sufficient

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
a11y Anything to do with improving accessibility code snippet update Updates a code sample: typo, outdated code etc. improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes) tutorial Content/UI for the Build a Blog Tutorial
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

There are accessibility problems with the sample code
4 participants
@bjohansebas @astrobot-houston @sarah11918 @yanthomasdev