Invalid aria-invalid="{expression}" (React)

[andrecasal]

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:

1. Create login.tsx component
2. 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>
	)
}

3. Notice the aria-invalid error, even though the expression is valid.

Expected behavior:

Expected the error to not show up.

Additional context:

[captainbrosset]

Thanks a lot for the report. Adding this to the team's backlog for prioritization and investigation.

[codepo8]

It seems to be the problem that the webhint engine expects true or false as values and not the variable you have in there right now. This is a tricky thing to work around as ARIA values are defined, and we can't know that your expression will have the right value or not. This is a wontfix, I'm afraid, but you can use the "Quick fix" option to not get this error report any more.

[andrecasal]

@codepo8, out of curiosity, wouldn't it be possible to access the aria-invalid={Boolean(actionData?.fieldErrors?.email)} expression slot and check if typeof is boolean? If so, disable the error.

[dparramon]

@codepo8 Not sure I see the utility of a rule that accepts only true/false and not an expression, in many cases an attribute like this is going to be dynamic and is going to be controlled by an expression. For anyone working on Javascript (or any other language or framework that converts to Javascript) this often will become an expression.

Can't @andrecasal fix be used? or as he suggests disable the error? Or maybe turn it into a warning?

To me this looks like an engine limitation not an accessibility issue. If the only solution is to totally disable this hint, why have it on the first place?

[captainbrosset]

I have to agree with this, and will re-open this issue. Even though this might be a technically complex one to fix, I do think it makes sense to keep it on the backlog.

[cyonder]

I believe this error also exists in this case:

IDs used in ARIA and labels must be unique: Document has multiple elements referenced with ARIA with the same id attribute: {expression}

Even though, I'm doing this:

<span id={`${uniqueId}-helperText`}>{helperText}</span>
<span id={`${uniqueId}-errorMessage`} role="alert">{error.message}</span>