[test][button] Add axe test coverage and docs by mj12albert · Pull Request #48708 · mui/material-ui

mj12albert · 2026-06-22T07:49:59Z

Result	Count
✅ Supports	23
⚠️ Partially Supports	4
❌ Does Not Support	0
➖ Not Applicable	28

Doc: https://github.com/mj12albert/material-ui/blob/docs-button-axe-coverage/packages/mui-material/src/Button/accessibility.md

Expand axe test coverage for Button to cover as much of WCAG as possible, and document the component's current WCAG conformance and testing notes/procedures.

I have followed (at least) the PR section of the contributing guide.

code-infra-dashboard · 2026-06-22T07:52:27Z

Deploy preview

https://deploy-preview-48708--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B^(0.00%)	0B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/private-theming	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

siriwatknp · 2026-06-25T09:39:03Z

@mj12albert the accessibility.md is not auto-generated right? I want to get alignment on the plan to make them public on the docs, what's your view on this?

mj12albert · 2026-06-25T09:51:31Z

the accessibility.md is not auto-generated right?

No ~ it's impossible to auto-generate (at least now) 😅, I kick-started research with AI but eventually had to manually re-do ~80% of it anyway, so for each I gave it my manual notes and initial draft as a start

Possibly once we have a few more of these, there will be more reference material that improves the results, but the fundamental issue is that AI is unreliable at "understanding" the WCAG specs (esp when there's no direct code to trace)

Possibly we can later automate the aggregation of component level scorecards:

| Result                | Count |
| :-------------------- | :---- |
| ✅ Supports           | 23    |
| ⚠️ Partially Supports | 4     |
| ❌ Does Not Support   | 0     |
| ➖ Not Applicable     | 28    |

into a library-level scorecard

I want to get alignment on the plan to make them public on the docs

I agree we should do this eventually, but that's a matter of presentation; for now I'm solely focused on scoring components, first so there is a body of content to present. IMO we don't need to worry about this until we have ~20 components scored. Does that make sense? @siriwatknp

michelengelen · 2026-06-25T09:59:11Z

+## Reports
+
+- [Button](./Button/accessibility.md)


Instead of individual reports I would like a table, where the findings are aggregated into a per level (A / AA) report. This could effectively look similar to this:

Component WCAG 2.2 A WCAG 2.2 AA

Button ✅ (8/8 ) ⚠️ (5/12)

...

Yes, the component level ones can eventually be aggregated into being displayed something like this, though x/total AA may not accurately partial/irrelevant criteria, so far I'm just following a somewhat standard formats/terminology

michelengelen · 2026-06-25T10:00:48Z

 export const A11Y_RULES: A11yRule[] = [
-  { test: 'docs/data/material/components/buttons/{BasicButtons,ColorButtons}', enabled: true },
+  {
+    test: 'docs/data/material/components/buttons/{BasicButtons,TextButtons,ContainedButtons,DisableElevation,OutlinedButtons,ColorButtons,ButtonSizes,IconLabelButtons,InputFileUpload,LoadingButtons,CustomizedButtons,ButtonA11yNonNative,ButtonA11ySemanticStates,ButtonA11yTextSpacing}',


Pretty hard to read. Can we maybe use an array of strings here that we define outside of the scope and just spread it here?

Updated, I think quite soon we can't pack everything in a single file either or it'll get ugly

siriwatknp · 2026-06-26T04:41:01Z

focused on scoring components

fair enough.

siriwatknp · 2026-06-26T04:48:33Z

+
+#### 1.3.3 Sensory Characteristics · A
+
+`🚩 Unverified` · `✅ Supports` · `○ Author`


The Unverified confuses me or at least better to present differently. In my understanding it means "not audited by trusted firms" right?

If yes, I think it's better to be removed and declare globally in accessibility.md instead on how we do audit manually.

Currently there are too many "Unverified" which is expected because we don't plan to do external audit soon.

@siriwatknp

Unverified basically means both:

It isn't covered by tests (because it's not test-able, e.g. resize, reflow), and

It hasn't been manually audited and recorded – we can audit it ourselves; I've verified most of them but just keeping them flagged for now because I didn't fully cover all OS/browser/SRs (e.g. on the Windows side I only tested NVDA+Edge, but JAWS is most popular SR and I don't have it)

Open to suggestion if you think Unverified sounds bad 😅 but they need to be flagged somehow regardless

I haven't thought in depth about how to document manual audit records, not sure if it should be docs committed into the repo or something else as it will require manual maintenance

Updated in 49a91ae to separate the flags from the official criteria with a simpler explanation

I see, Unverified is okay to me if we haven't verified it at all, however, anything that you have done manually tested should have another flag like Partially verified.

Benefits of it is for users and us to know what have been validated (good to add note on what OS/browser version) so in the future if we have more capacity to do more manual tests.

what do you think?

siriwatknp · 2026-06-30T03:53:32Z

+`🚩 Unverified` · `✅ Supports` · `◐ Shared`
+
+- Typography is set in rem and em, so the label and button scale with browser zoom or font size rather than staying pixel-fixed.
+- A fixed-pixel container in the surrounding layout could clip at 200%.
+
+**Manual testing steps**
+
+1. Open the Button demos and set browser zoom to 200% (<kbd>Ctrl</kbd> or <kbd>Cmd</kbd> and <kbd>+</kbd>).
+2. Confirm labels are fully visible and buttons still work.
+
+**Pass:** nothing is clipped or cut off at 200%.


This is the part where I think Partially verified is better because at the end I see "Manual testing steps" and "Pass" already.

At first I am confused why it passes but has unverified flag.

@siriwatknp Actually it's simpler to just refer to these as Flagged (flagged for our own reference/follow-up) without trying to name it

BTW the "Pass" here means "this is the passing criteria", I'm not stating that I decided these all pass a thorough (all devices + SRs) manual review ~

siriwatknp

Preapproved, please check my comment on adding "Partially verified" flag.

mj12albert added test scope: button Changes related to the button. labels Jun 22, 2026

mj12albert force-pushed the docs-button-axe-coverage branch 6 times, most recently from 99db26a to 014886f Compare June 25, 2026 08:02

mj12albert marked this pull request as ready for review June 25, 2026 08:05

mj12albert requested review from LukasTy, michelengelen, silviuaavram and siriwatknp June 25, 2026 08:06

michelengelen reviewed Jun 25, 2026

View reviewed changes

mj12albert force-pushed the docs-button-axe-coverage branch 4 times, most recently from 2edd27f to 7bd80c7 Compare June 26, 2026 00:36

mj12albert added 3 commits June 26, 2026 11:31

Expand button axe coverage

e798011

fix

f3eb288

docs

4654ad4

mj12albert force-pushed the docs-button-axe-coverage branch from 7bd80c7 to 4654ad4 Compare June 26, 2026 03:33

siriwatknp reviewed Jun 26, 2026

View reviewed changes

mj12albert requested review from michelengelen and siriwatknp June 29, 2026 09:29

michelengelen approved these changes Jun 29, 2026

View reviewed changes

mj12albert added 2 commits June 30, 2026 04:42

Reclassify reflow and resize

9a80813

Update aggregate report format

49a91ae

mj12albert force-pushed the docs-button-axe-coverage branch from 2332833 to 49a91ae Compare June 29, 2026 22:06

siriwatknp reviewed Jun 30, 2026

View reviewed changes

siriwatknp approved these changes Jun 30, 2026

View reviewed changes

mj12albert added 3 commits July 1, 2026 13:51

Rename unverified as flagged

1c88da6

update testing steps

9acb268

Add tests

b21c183


		#### 1.3.3 Sensory Characteristics · A

		`🚩 Unverified` · `✅ Supports` · `○ Author`

Uh oh!

Uh oh!

Conversation

mj12albert commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

code-infra-dashboard Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Uh oh!

siriwatknp commented Jun 25, 2026

Uh oh!

mj12albert commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siriwatknp commented Jun 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mj12albert commented Jun 22, 2026 •

edited

Loading

code-infra-dashboard Bot commented Jun 22, 2026 •

edited

Loading

mj12albert commented Jun 25, 2026 •

edited

Loading

mj12albert Jun 25, 2026 •

edited

Loading

mj12albert Jun 29, 2026 •

edited

Loading