Skip to content

tutorial: update hamburger component to use button element#12171

Merged
sarah11918 merged 8 commits intowithastro:mainfrom
bjohansebas:accesibility
Sep 25, 2025
Merged

tutorial: update hamburger component to use button element#12171
sarah11918 merged 8 commits intowithastro:mainfrom
bjohansebas:accesibility

Conversation

@bjohansebas
Copy link
Copy Markdown
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)

@bjohansebas
tutorial: update hamburger component to use button element
c20ac30 
Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
@netlify
Copy link
Copy Markdown

netlify bot commented Aug 18, 2025 •
edited
Loading

✅ 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...

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

sarah11918 commented Aug 18, 2025

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

bjohansebas commented Aug 18, 2025

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
Merged
@sarah11918
Copy link
Copy Markdown
Member

sarah11918 commented Aug 19, 2025

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

yanthomasdev commented Aug 19, 2025

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

bjohansebas commented Aug 19, 2025

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

sarah11918 commented Sep 1, 2025

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

bjohansebas commented Sep 1, 2025

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

sarah11918 commented Sep 11, 2025

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

bjohansebas commented Sep 13, 2025

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
bjohansebas
bjohansebas commented Sep 13, 2025
View reviewed changes
@sarah11918 sarah11918 mentioned this pull request Sep 24, 2025
Merged
HiDeoo
HiDeoo previously requested changes Sep 25, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

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

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

src/content/docs/en/tutorial/3-components/4.mdx Outdated
@@ -65,26 +63,19 @@ Create a `<Hamburger />` component to open and close your mobile menu.

4. Add the following styles for your Hamburger component:
Copy link
Copy Markdown
Member

@HiDeoo HiDeoo Sep 25, 2025

Choose a reason for hiding this comment

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

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

@HiDeoo HiDeoo dismissed their stale review September 25, 2025 13:29

References to hamburger have been fixed

ArmandPhilippot
ArmandPhilippot approved these changes Sep 25, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@ArmandPhilippot ArmandPhilippot left a comment

Choose a reason for hiding this comment

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

Checked during Talking & Doc'ing and everything LGTM!

@sarah11918 sarah11918 merged commit db947a5 into withastro:main Sep 25, 2025
10 checks passed
@jsparkdev jsparkdev mentioned this pull request Sep 26, 2025
Merged
ArmandPhilippot added a commit to ArmandPhilippot/astro-docs that referenced this pull request Sep 26, 2025
@ArmandPhilippot
i18n(fr): update tutorial/*
f057d02 
See withastro#12171
@ArmandPhilippot ArmandPhilippot mentioned this pull request Sep 26, 2025
Merged
@bjohansebas bjohansebas deleted the accesibility branch September 28, 2025 00:59
@liruifengv liruifengv mentioned this pull request Sep 29, 2025
Merged
This was referenced Jan 24, 2026
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sarah11918 sarah11918 sarah11918 left review comments

@ArmandPhilippot ArmandPhilippot ArmandPhilippot approved these changes

@HiDeoo HiDeoo HiDeoo left review comments

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

6 participants

@bjohansebas @astrobot-houston @sarah11918 @yanthomasdev @HiDeoo @ArmandPhilippot