Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal dialogs cause axe to throw landmark-one-main and page-has-heading-one #3359

Closed
kensgists opened this issue Jan 23, 2022 · 5 comments
Closed

Modal dialogs cause axe to throw landmark-one-main and page-has-heading-one #3359

kensgists opened this issue Jan 23, 2022 · 5 comments
Assignees
@straker
Labels
best practice fix Bug fixes pr A pr has been created for the issue rules Issue or false result from an axe-core rule
Milestone
Axe-core 4.5

Comments

@kensgists
Copy link

Product: axe-core 4.3.5

Expectation: Common implementations of modal dialogs do not cause axe to throw landmark-one-main or page-has-heading-one issues.

Actual: Modal dialogs typically cause axe to throw landmark-one-main and page-has-heading-one issues.

Motivation: It is common and valid to implement modal dialogs that use role=dialog or alertdialog by instantiating the dialog outside of the main DOM tree of the page, while setting that non-dialog portion of the page to be aria-hidden=true. This implementation allows for the user to make everything on the page, other than the currently displaying dialog, inert and inaccessible to a screen reader.

Axe ignores the content in the aria-hidden portion of the page and runs only against the non-hidden/accessible contents of the dialog. Because of this, it sees the page has no main landmark and no heading level one and surfaces landmark-one-main and page-has-heading-one issues.

If axe were to suppress those rules for "window" containers with role=dialog or role=alertdialog, those issues would not occur. ARIA Authoring Practices do not recommend dialogs have an H1 or contain a main landmark.

An example of these issues occurring is here.

To reproduce:

  • Run axe on the page after it loads. Result: No axe issues
  • Run axe again after instantiating a dialog by clicking the "Focus the Container in a Dialog with Role Dialog and No Document Role, Dialog Named via ARIA Labelledby" button (the 6th button). Results: axe displays failures of landmark-one-main and page-has-heading-one.

See issue #2556 as motivation for this.
@kensgists kensgists mentioned this issue Jan 23, 2022
Closed
@WilcoFiers
Copy link
Contributor

@kensgists Thanks for reporting. That shouldn't be happening for sure. We have some heuristics in axe that should avoid this. I'll have to do some digging once we're done with axe-core 4.4.

@WilcoFiers WilcoFiers added best practice fix Bug fixes rules Issue or false result from an axe-core rule labels Jan 24, 2022
@straker straker added this to the Axe-core 4.5 milestone Mar 21, 2022
@straker straker mentioned this issue Mar 21, 2022
Closed
@smhigley smhigley mentioned this issue Apr 28, 2022
Closed
@straker
Copy link
Contributor

straker commented Jun 3, 2022

Fix: add an option to the has-descendant-evaluate check function that will check for an open modal. If the check fails because there is 0 descendants and a modal is open we should pass the check. We should not pass the check if there are more than 1 descendants and a modal is open (having two main elements in an open modal should still fail).

@straker straker self-assigned this Jun 3, 2022
@straker straker mentioned this issue Jun 3, 2022
Merged
@straker straker added the pr A pr has been created for the issue label Jun 3, 2022
@cathej
Copy link

cathej commented Jun 6, 2022

@straker Will this percolate to selenium axe packages? This is effecting our team's automated testing.

@straker
Copy link
Contributor

straker commented Jun 6, 2022 •
edited
Loading

This is planned to go into the 4.5 release near the end of Q3, at which point we will update all the axe integrations and release a companion 4.5 release for them as well.

@padmavemulapati
Copy link

Validated using latest develop branch code base, neither landmark-one-main nor page-has-heading-one failing when model opens for the below case:
script:

 <h2>page-has-heading-one test</h2>
  <body>
  <main aria-hidden="true">
    <h1>Level one heading!</h1>
  </main>
  <div role="dialog">
    Modal open
  </div> 
</body>

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@straker straker

Labels
best practice fix Bug fixes pr A pr has been created for the issue rules Issue or false result from an axe-core rule
Projects
None yet
Milestone
Axe-core 4.5
Development

No branches or pull requests
5 participants
@WilcoFiers @straker @kensgists @cathej @padmavemulapati