How to exclude a list of individual elements during analyze

kailunc commented 1 year ago

Hi All,

I am trying to exclude some elements on a page following the example: new AxeBuilder() .exclude(".some-class") .exclude(".some-other-class");

Only ".some-class" is excluded and I am still getting violations with target='[.some-other-class]'.

I am using axe-core-maven-html 4.8.0 with selenium.

What am I doing wrong?

Zidious commented 1 year ago

Hey @kailunc,

Just tested on this example page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Context Test</title>
  </head>
  <body>
    <h1>Context Test</h1>

    <div class="some-class">
      <img src="http://placehold.it/350x150" />
    </div>

    <div class="some-other-class">
      <img src="http://placehold.it/150x150" />
    </div>
  </body>
</html>

Using the below example:

import com.deque.html.axecore.results.CheckedNode;
import com.deque.html.axecore.results.Results;
import com.deque.html.axecore.results.Rule;
import com.deque.html.axecore.selenium.AxeBuilder;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.List;

public class Main {
  public static void main(final String[] args) throws InterruptedException {

    WebDriver driver = new ChromeDriver();

    // Serving the page locally with a simple web server
    driver.get("http://127.0.0.1:5504/index.html");

    // Comment out the line below to see the image-alt violations:
    AxeBuilder builder = new AxeBuilder();
    //    AxeBuilder builder = new AxeBuilder().exclude(".some-class").exclude(".some-other-class");
    Results results = builder.analyze(driver);

    List<Rule> violations = results.getViolations();

    for (Rule rule : violations) {
      // Just check image-alt rule for this example
      if (rule.getId().equals("image-alt")) {
        for (CheckedNode node : rule.getNodes()) {
          System.out.printf("Node: %s %n", node.getHtml());
        }
      }
    }

    driver.quit();
  }
}

With AxeBuilder builder = new AxeBuilder(); (see snippet), I am seeing the below in the console:

Node: <img src="http://placehold.it/350x150"> 
Node: <img src="http://placehold.it/150x150">

With AxeBuilder builder = new AxeBuilder().exclude(".some-class").exclude(".some-other-class"); I am not seeing any image-alt violations being printed to the console.

Would you mind providing some more context on what you're trying to exclude? Is it a particular CSS selector within an iframe?

kailunc commented 1 year ago

Hi @Zidious,

Thanks for the quick response. I am not using any iframe.

Here is the console output of the html when no exclude is used:

   Rule id: aria-allowed-attr
      Html: <span title="No selection" class="k-widget k-dropdown" unselectable="on" role="listbox" aria-haspopup="listbox" aria-expanded="false" tabindex="0" aria-owns="cc244dc7-18ba-466b-9bf9-9de2de29c84b_listbox" aria-controls="cc244dc7-18ba-466b-9bf9-9de2de29c84b_listbox" aria-live="polite" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="a03bb34d-7ea1-4aed-aa97-46a5a7f117e7" aria-labelledby="typeLabel" style="">
      Target: [span[aria-labelledby="typeLabel"]]
   Rule id: aria-allowed-role
      Html: <ul role="none" class="has-hover" style="display: none;">
            <li tabindex="0" role="menuitem">
                Event Messages Limit
            </li>
    </ul>
      Target: [.has-hover]
   Rule id: label
      Html: <input checked="checked" id="filter_checkbox_view577" type="checkbox">
      Target: [#filter_checkbox_view577]

When I used the exclude individualy:

        axeBuilder.exclude(".has-hover");

or

        axeBuilder.exclude(".k-dropdown");

I can see the violation being excluded correctly.

When I use them together:

axeBuilder.exclude(".k-dropdown").exclude(".has-hover")

only the first exclude is actually working.

   Rule id: aria-allowed-role
      Html: <ul role="none" class="has-hover" style="display: none;">
            <li tabindex="0" role="menuitem">
                Event Messages Limit
            </li>
    </ul>
      Target: [.has-hover]
   Rule id: label
      Html: <input checked="checked" id="filter_checkbox_view577" type="checkbox">
      Target: [#filter_checkbox_view577]

Zidious commented 1 year ago

Is the site that you're testing public or are you able to scaffold / link to a github where I can test the page to see what's happening at all?

kailunc commented 12 months ago

Hi, I was able to reproduce the issue with the example page that you have provided in my project. However, it works correctly when I created a new maven project. So I think there is a configuration issue somewhere on my end. I will need investigate further but I think my question is answered.

Thank you!

padmavemulapati commented 12 months ago

Moving this ticket done, as the Question answered and resolved.

dequelabs / axe-core-maven-html

How to exclude a list of individual elements during analyze #390