axe-core icon indicating copy to clipboard operation
axe-core copied to clipboard

Bug: does not report missing name on element with role="form" (ARIA 1.2)

Open Zidious opened this issue 4 years ago • 3 comments

Ref: https://github.com/dequelabs/axe-core-npm/issues/329

Zidious avatar Sep 07 '21 18:09 Zidious

This is a best practice, not a violation

dylanb avatar Sep 08 '21 12:09 dylanb

Things have changed since 2021 because axe reports the missing accessible name now as a best practice. That’s a good thing, but the error message is misleading. If you have a form with an explicit form role but no label, axe reports, “ARIA role form is not allowed for given element”. That’s not true because the role is allowed. It’s the missing accessible name that causes the issue.

Here's an example.

<h2>No role</h2>
 <!-- fine -->
 <form>
   <label for="name1">Name</label>
   <input id="name1">
 </form>

 <h2>Role only</h2> 
 <!-- causes a best practice error -->
 <form role="form">
   <label for="name2">Name</label>
   <input id="name2">
 </form>
 
 <h2>Role with aria-label</h2>
 <!-- fine -->
 <form role="form" aria-label="My form">
   <label for="name3">Name</label>
   <input id="name3">
 </form>
Screenshot 2024-09-25 at 06 59 57

matuzo avatar Sep 25 '24 05:09 matuzo

@matuzo This appears to be a bug in axe-core. The ARIA in HTML spec allows a form element to have role=form, but our code does not allow it. Updating the allowedRoles to allow form fixes the issue.

Would you mind opening a pr with a fix?

straker avatar Sep 25 '24 15:09 straker