question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[aria-required-parent] invalid false positive

See original GitHub issue

Expectation: HTML here passes just fine

Actual: does not pass .toHaveNoVioliations through jest-axe:

image

Motivation:

HTML spec says:

Authors MUST ensure that menu item radios are owned by an element with role group, menu, or menubar in order to identify that they are related widgets. Authors MAY separate menu items into sets by use of a separator or an element with an equivalent role from the native markup language. If a menu or menubar contains more than one group of menuitemradio elements, or if the menu contains one group and other, unrelated menu items, authors SHOULD nest each set of related menuitemradio elements in an element using the group role, and authors SHOULD delimit the group from other menu items with an element using the separator role.

given html matches the 2nd case:

  • menu contains more than one group of menuitemradio elements
  • (…) other, unrelated menu items, authors SHOULD nest each set of related menuitemradio elements in an element using the group role
  • (…) and authors SHOULD delimit the group from other menu items with an element using the separator role
  • div role menu
    • div role group
      • button role menuitemradio
      • button role menuitemradio
      • hr, implicit role separator (making it explicit doesnt change anything fwiw)
      • a role menuitem
  • minimum reproduction
  • validates fine here as valid html, not sure if that checks for aria beyond redundancy though
  • it worked fine before v4.0, so I presume something in this commit here broke
  • removing div role group fixes it. adding a second group around the solo menuitem anchor on bottom also highlights this one as broken

axe-core version: 4.0.2
~~axe-webdriver, extension or other integration version: X.Y.Z~~

Browser and Assistive Technology versions

For Tooling issues:
- Node version: 14.7.0XX  
- Platform:  Win10

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
strakercommented, Sep 15, 2020

That’s it. Adding 'group' to the array is the entire pr.

1reaction
strakercommented, Sep 9, 2020

Yep, seems our standard object is missing group from required context of menuitemradio

Read more comments on GitHub >

github_iconTop Results From Across the Web

RE: Invalid ARIA necessarily a WCAG fail? (Role menuitem ...
(Role menuitem missing required parent role (group,menu,menubar) Hi, If I find (via an excellent ARIA checker bookmarklet) an issue such as ...
Read more >
aria-invalid - Accessibility - MDN Web Docs
The aria-invalid state indicates the entered value does not conform to the format expected by the application.
Read more >
Magento 2 - Checkout aria-invalid="false"
Allowed me to add a class to the parent div and on change of the input value from true to false the class...
Read more >
Mark invalid form field with [aria-invalid=true] - Drupal
Added [aria-invalid=true] to invalid fields so that a screen reader user will be informed that the field contents are invalid. This is the ......
Read more >
Aria Crescendo API Error Messages Master List
Associated Inputs: all required inputs, typically one of the following: ... that represents a true or false value contains invalid input.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found