microsoft / microsoft/vscode-edge-devtools
Invalid aria-invalid="{expression}" (React)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 827
- Forks
- 358
- Avg merge
- 20h 32m
- Merged PRs (30d)
- 10
Description
Environment (please complete the following information):
- OS: macOS Ventura 13.0.1
- VS Code: 1.73.1
- Extension version: Microsoft Edge Tools for VS Code 2.1.1
Describe the bug:
"ARIA attributes must conform to valid values: Invalid ARIA attribute value: aria-invalid="{expression}" Microsoft Edge Tools axe/aria" shows up on valid aria-invalid expression.
Repro steps:
- Create login.tsx component
- Copy this code to it:
const Login = () => {
return (
<div>
<form method="post">
<div>
<label htmlFor="email-input">Email</label>
<input type="text" id="email-input" name="email" aria-invalid={Boolean(true)}
</div>
</form>
</div>
)
}
- Notice the aria-invalid error, even though the expression is valid.
Expected behavior:
Expected the error to not show up.
Additional context:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the warning in the login.tsx example using Microsoft Edge Tools for VS Code 2.1.1 and the axe/aria validation described in the issue. Trace how the React aria-invalid expression is read by the extension, then verify that the valid expression no longer produces an error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100