Skip to content

Button Block: Add HTML Element selection in Advanced settings (accessibility) #63534

@amberhinds

Description

@amberhinds

What problem does this address?

Currently, the Button block only outputs links. Users frequently misinterpret its name. They use the "button" block to trigger modals and other elements that should be triggered by a true HTML button, not a link. This adds accessibility problems to websites, particularly for screen reader users.

Additionally, there are instances where users add groups of links with the button block that should be contained in an HTML list or that function like navigation and should be contained in an HTML nav tag.

These three things are issues that I frequently encounter while accessibility auditing websites built with the block editor. The current solution is to replace core blocks with custom blocks or to write Javascript to remediate the issues. We need to make it easier for users to avoid or fix accessibility issues in a no-code way.

What is your proposed solution?

This block would be greatly enhanced with the addition of several dropdowns in the advanced section that allow developers and more advanced content creators to adjust the markup of the link itself and surrounding markup.

Something similar to the HTML element dropdown on the Group block
Screenshot expanded HTML element selector

This is what we would need:

  1. HTML element selector for button:
  • <a> default
  • <button>
  1. Group HTML element selector:
  • <div> default
  • <ul>
  1. Parent container HTML element selector
  • <div> default
  • <nav>

If a nav tag is set for the parent container, we need to give users the ability to add an aria-label so there would need to be a text field that conditionally appears.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions