dequelabs / dequelabs/axe-core

aria-valid-attr-value failure when using aria-haspopup with visible aria-controls container

Open
#4,861 1 comment 0 reactions 0 assignees View on GitHub
fix
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 13h
Merged PRs (30d)
29

Description

### Product

axe-core

### Product Version

4.10.3

### Latest Version

- [x] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation
If you have a button and panel with the following code:
```

Click me


This is the popup panel

```
then Axe core raises a `aria-valid-attr-value` entry in `results.incomplete` claiming:
> Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls="panel"

As there is a div with `id="panel"` present, this incomplete violation shouldn't be raised.

#### Actual
Axe raises the incomplete violation

#### How to Reproduce
https://jsfiddle.net/tro05387/6/

#### Additional context
I believe this issue is due to a mistake in https://github.com/dequelabs/axe-core/pull/4418. While `aria-haspopup` might indicate the `aria-controls` referenced panel may appear later (in which case the incomplete violation make sense) if it is already present (e.g. you run Axe when the panel is open) it shouldn't raise a violation.

It looks like the `aira-controls` precheck (see [here](https://github.com/dequelabs/axe-core/blob/404a4fb24a156dc433ac9c70dbefe415d41ca980/lib/checks/aria/aria-valid-attr-value-evaluate.js#L45-L50)) fails to check whether the attribute value for aria-controls was valid or not (which is checked [here](https://github.com/dequelabs/axe-core/blob/404a4fb24a156dc433ac9c70dbefe415d41ca980/lib/checks/aria/aria-valid-attr-value-evaluate.js#L116-L122)).

The fix might be as simple as updating the `aria-controls` precheck to use the `validValue` argument that should already be being passed to it, but I'm not really familiar enough with Axe internals to know if I'm right and/or what I should do for tests.

Contributor guide

Open the contributing guide

Research direction

Start with lib/checks/aria/aria-valid-attr-value-evaluate.js, especially the aria-controls precheck around lines 45-50 and validation around lines 116-122; compare the existing validValue argument with the jsfiddle reproduction. Done means a present #panel does not produce an incomplete result while the case where the referenced panel may appear later remains covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.