Hamburger icon should replace with close icon if menu opens up

[kapilG0]

Describe the Issue

Hamburger icon needs to be replaced with close icon if menu opens up

Affected Page

https://contribute.freecodecamp.org/faq/

Steps to Reproduce

Screenshot_20240624_221959

Expected behavior

Screenshot_20240624_221959

Screenshots

Screenshot_20240624_221959

System

• Device: android
• Browser: chrome

Additional context

No response

[kapilG0]

Hello @alinmigea please assign this issue to me under gssoc 24

[ilenia-magoni]

Issues are not assigned, if you are interested in contributing please check the issues with the help wanted label @kapilG0

[bbsmooth]

I don't think it is essential that the icon visually change to a close button, but it won't hurt anything. The accessible name on the button, currently defined as "Menu" with the aria-label attribute should NOT change however.

Also, I'm noticing that while this button does have the aria-expanded attribute set to false when the menu is not visible, it does not change to true when the menu is visible. This is a WCAG failure that needs to be fixed. I am noticing that the custom starlight-menu-button element wrapping the button also has an aria-expanded attribute and that is toggling true and false as the button is clicked. This is unnecessary on this element. It's the actual button element that needs to toggle the aria-expanded value.