Preview

Button group →

Description

Users should be able to add role="button" to links (using best judgement) and expect it to trigger a click on spacebar, like native buttons do.

Part of #3690.

• Added role="button" to the link in button group.
• Links with role="button" now behave like buttons (spacebar and enter activate).

Additional Notes

MDN on button role

Best practices

If a link performs the action of a button, giving the element role="button" helps assistive technology users understand the function of the element. However, a better solution is to adjust the visual design so it matches the function and ARIA role. Where possible, it is recommended to use native HTML buttons (, , , and ) rather than the button role, as native HTML buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default, without need for additional customization.

Sources:
Slack thread →
Original issue →
MDN on Button role →

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.