[wp-meta] [Making WordPress.org] #3365: Fix the .org site hamburger menu button

[Making WordPress.org]

#3365: Fix the .org site hamburger menu button
---------------------+-----------------------------
 Reporter:  afercia  |      Owner:
     Type:  defect   |     Status:  new
 Priority:  normal   |  Milestone:
Component:  General  |   Keywords:  has-screenshots
---------------------+-----------------------------
 Empty buttons or links should always be avoided, as they're interactive UI
 controls and can't be empty. Buttons are expected to have a text, as well
 as links. If they're empty, while visually they may work, there's really
 nothing assistive technologies can announce to users. Just resounding
 silence.

 In the responsive view, the navigation menu has a "hamburger button" to
 toggle the menu visibility.

 [[Image(https://cldup.com/FanXxQrsQF.png)]]

 Actually, this button is a link:
 `<a id="mobile-menu-button" class="" href="#"
 onclick="toggleMenu();"></a>`

 - it should be a button in the first place: it's not a link because it
 doesn't point to a new resource and clicking it doesn't trigger
 navigation. It "does something" on the page, and should be a button
 - aside: `href="#"` is a very old practice, and technically is just an
 incomplete URL fragment identifier
 - the new button should have a meaningful text or aria-label attribute;
 right now it's empty and announced just as "link"
 - the button should have an `aria-expanded` attribute to communicate the
 state of the menu

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/3365>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org