dequelabs / dequelabs/axe-core
4.13.0 - regresion on color-contrast detection on disabled state elements
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
### Product
axe-core
### Product Version
4.13.0
### Latest Version
- [x] I have tested the issue with the latest version of the product
### Issue Description
#### Expectation
color-contrast rule should not flag text elements that belong to a disabled form control. WCAG 2.1 SC 1.4.3 explicitly exempts inactive/disabled UI components from contrast requirements. This was working correctly in axe-core 4.12.1.
This regression was triggered solely by @axe-core/playwright bumping its axe-core peer dependency from 4.12.1 to 4.13.0 — no application code was changed.
#### Actual
In axe-core 4.13.0, mat-hint rendered inside a disabled Angular Material mat-form-field is flagged as a color-contrast violation (#a8a9a9 on #ffffff, ratio 2.35:1). The mat-hint element is a sibling of the input — not the input itself — so axe does not detect it as part of a disabled control and incorrectly applies the contrast rule.
Reverting to 4.12.1 makes the violation disappear without any code changes, suggesting a regression introduced by the stacking context fix in #5214.
#### How to Reproduce
Angular Material 21 with a reactive form:
```html
Disabled form field
Disabled hint
```
```ts
this.userForm = new FormGroup({
fax: new FormControl({ value: 'Text in disabled input', disabled: true })
});
```
The rendered mat-hint has color: #a8a9a9 and the background resolves to #ffffff. axe-core 4.13.0 flags this as a violation. axe-core 4.12.1 does not.
Axe test (Playwright + @axe-core/playwright):
```ts
const results = await new AxeBuilder({ page }).analyze();
// 4.13.0: reports color-contrast violation on mat-hint
// 4.12.1: passes
```
#### Additional context
- axe-core: 4.13.0 (regression from 4.12.1)
- @axe-core/playwright: latest (that relies now on a axe-core 4.13.0, only change bring with that version on peer dep)
- Angular: 22.x
- Angular Material: 22.x
- Browser: Chromium (Playwright)
- The mat-hint element is structurally a sibling of the , not a child, so axe cannot infer it belongs to the disabled control via the DOM tree alone. Angular Material applies disabled styling via CSS classes on the parent mat-form-field, which axe does not inspect.
Likely related to the stacking context fix in #5214 introduced in 4.13.0, which changed background color resolution and may now incorrectly include disabled form field areas in contrast checks.
Contributor guide
Research direction
Start by running the Playwright AxeBuilder reproduction described in the issue, comparing axe-core 4.13.0 with 4.12.1. Then inspect the stacking-context change in #5214 and the color-contrast path; done means a hint belonging to a disabled Angular Material field is not reported while ordinary contrast violations remain detected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript, playwright, typescript
- Domain
- accessibility, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100