Masterbar produces incorrect and inaccessible markup

[ciampo]

Context and steps to reproduce

What

The Masterbar currently outputs incorrect and inaccessible markup:

• <a /> and <button /> elements nested inside a <button /> elements
  • this causes a <button> cannot appear as a descendant of <button> error in the browser console
  • as a general best practice, interactive elements should not be nested in the DOM
• the menubar and the menus rendered in the masterbar don't follow any of the best practices defined in the WAI ARIA APG (specs, example 1, example 2)
  • furthermore, this represents a considerable difference from the original wp-admin bar rendered by core WordPress.org, which the calypso masterbar tries to replicate, potentially introducing significant confusion and disruption in navigating the UI with keyboard and assistive technology

Proposed solution

While the code for the masterbar is quite entangled and would benefit from a complete rewrite (including using third-party componentry for the menubar/menu widgets), it may be better to focus on fixing the most severe issues without overhauling the code entirely.

In the long term, as we untangle calypso, it may worthwhile to consider getting rid of the masterbar entirely and:

• use the native WordPress.org admin bar when visiting wp-admin
• use a completely different interface when in Calypso

Site owner impact

More than 60% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform

No response

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Accessibility & Navigation: The issue highlights accessibility problems and issues with the navigation elements in the Masterbar.
• [Feature] Calypso & wp-admin Navigation: This feature is relevant because the issue involves the navigation component that needs to replicate the original wp-admin interface.
• [Feature] Support: The accessibility issues will likely impact support for users relying on assistive technologies, hence support mechanisms may need to consider this.

[ciampo]

Update: #98510 aism at fixing the invalid HTML markup without touching semantics, mouse/keyboard interaction and other accessibility aspects.