mui / mui/material-ui

[LoadingButton] LoadingButton accessibility of the pending state

Open
#22,845 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: button type: new feature
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

First off, I love the new <LoadingButton /> component and I'm excited to use it!

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The <LoadingButton /> is currently in the disabled state when pending is applied and is not marked aria-busy (not sure if this is necessary or appropriate for this use-case).

Expected Behavior 🤔

Because disabling the button would revert focus back to the document body, I would expect that there would be another way to prevent form submission or clicks without disabling the button itself. I also wonder if it's appropriate to add an aria-busy designation.

Steps to Reproduce 🕹

This can be seen in the docs.

Proposal

One thing I've tried is adding aria-busy and updating the click handler as to prevent the default behavior on click:

onClick={e => {
  if (pending) {
    // Prevent form submission
    e.preventDefault();
    return;
  }

  onClick(e);
}}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the LoadingButton component and the loading-buttons example in the linked documentation, reproducing the pending-state focus and submission behavior. Review the current pending-state interaction and accessibility semantics, then confirm the chosen behavior preserves focus, prevents unintended activation, and provides appropriate busy-state signaling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.