Comments (4)
Update:
I have tried fixing aria-activedescendant=''
and React's useId :
. None of them are at fault. Could this have to do with something faulty configured with pa11y?
β’ ARIA attributes must conform to valid values
(https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value?application=axeAPI)
(#week-start-input)
<input class="css-8tk2dk-input-input" placeholder="Choose starting day of
the week" aria-autocomplete="list" aria-controls="downshift---rj---menu"
aria-expanded="false" aria-labelledby="downshift---rk---label"
autocomplete="off" id="week-start-input"...
It would be super helpful if it mentioned which attribute is invalid, so I actually could fix it.
from axe-core.
Thanks for the issue. Is the site you're seeing the issue on public that I could test it? Without that it may be hard to figure out what we can do. I did notice that the deque university help page link listed in the output points to version 4.4. Axe-core is currently up to 4.10 (https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI), so I recommend that if you have control of the version that you try with the latest version of axe-core.
from axe-core.
@straker Thanks. The real issue was that aria-labelledby
pointed to an element that didn't exist. It did take me quite some time to come to that conclusion. Do newer versions display which is the affected aria attribute?
We're running an older version of pa11y (which probably uses axe-core 4.4). The latest seem to be at 4.8.
from axe-core.
Letting aria-valid-attr-value
display when an id is missing from the page was added back in 2019, which would have been in version v3 of axe-core. It doesn't look like p11y is outputing the failure summary for the issue. For example when running the code with axe-core itself, it gives this for the entire issue.
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": {
"messageKey": "noId",
"needsReview": "aria-labelledby=\"downshift-_rc_-label\""
},
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
}
],
"none": [],
"impact": "critical",
"html": "<input class=\"css-8tk2dk-input-input\" aria-activedescendant=\"\" aria-autocomplete=\"list\" aria-controls=\"downshift-_rb_-menu\" aria-expanded=\"false\" aria-labelledby=\"downshift-_rc_-label\" autocomplete=\"off\">",
"element": {},
"target": [
"input"
],
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
}
]
}
from axe-core.
Related Issues (20)
- target-size #incomplete7 rule integration test fails on Firefox 131
- Runtime issue: axe run throws error 'No elements found for include in page Context' when --include not provided HOT 3
- Just noticed this looking at a report and was about to open an issue, I would love to pick this up and combine the checks if you don't mind @straker
- wcag22aa tag showing No violations HOT 1
- label-content-name-mismatch in ARIA switch compares value text with name HOT 1
- async across emulaters
- Ancestry selector of shadow root child not guaranteed unique
- `scrollable-region-focusable` conflicts with `jsx-a11y/no-noninteractive-tabindex` eslint rule HOT 1
- Working with elements inside an iframe HOT 2
- I'm not less sure what's going on when there's nothing in the details element to expand. Its just an empty tab stop at that point. Those aren't great, but they're not an WCAG violation IMO. HOT 1
- Nightly tests not running the full integration tests
- : In the application, some user interface components do not have a visible label. The only instruction to the input field is a placeholder text and the placeholder text disappears once the users start typing text. HOT 1
- Text fails to meet minimum requirement contrast ratio (4.5:1) with background for regular text. Impact on Users: This will impact low vision users. People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. This problem is located at Settings window on the left side list elements. The list of elements has a contrast ratio 3.2:1 that is less than 4.5:1 for the minimum ratio requirement. And in the βDarkβ settings of Theme, the contrast ratio is just below 4.5:1. HOT 1
- Chrome 128 new headless mode causing issues on consecutive scans
- Locales
- Files locales HOT 3
- Color Contrast rules for WCAG2.0 And WCGA2.1 giving incorrect result. HOT 5
- Documents must have <title> element to aid in navigation Fails on title in head tag HOT 8
- autocomplete-valid with multiple values fails HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from axe-core.