Add accessibility props to Button component

[vsseixaso]

What is the purpose of this pull request?

Adds role and ariaLabel props to the Button component for improved accessibility support.

What problem is this solving?

Enables developers to set custom ARIA attributes on buttons for better screen reader compatibility and compliance with accessibility standards.

How should this be manually tested?

Add this code in react/playground/Playground.tsx:

import React from 'react'

import PageHeader from '../PageHeader'
import Layout from '../Layout'
import Button from '../Button'

const Playground = () => (
  <Layout fullWidth pageHeader={<PageHeader title="Playground" />}>
    <div className="pa5">
      <h3>Button with ARIA props</h3>
      <Button role="button" ariaLabel="Save your changes">
        Save
      </Button>
      <br />
      <br />
      <Button role="menuitem" ariaLabel="Open menu">
        Menu
      </Button>
      <br />
      <br />
      <h3>Button without ARIA props (default behavior)</h3>
      <Button>Default Button</Button>
    </div>
  </Layout>
)

export default Playground

Screenshots or example usage

The new props can be used as follows:

<Button role="button" ariaLabel="Submit form">
  Submit
</Button>

Inspect the rendered HTML to verify that role and aria-label attributes are properly set. If props are not provided, the attributes will not be rendered.

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Requires change to documentation, which has been updated accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
styleguide	Error		Oct 27, 2025 0:07am

[Copilot]

Pull Request Overview

This PR adds accessibility properties to the Button component, enabling developers to set custom ARIA attributes for better screen reader support and accessibility compliance.

Key Changes:

• Added role and ariaLabel props to the Button component
• Props are passed through to the rendered element with appropriate HTML attributes
• Updated PropTypes definitions with accessibility-focused documentation

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
react/components/Button/index.js	Added role and ariaLabel props with PropTypes definitions and rendered as role and aria-label HTML attributes
CHANGELOG.md	Documented the new accessibility props in the Unreleased section

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.