search

felixzapata / gulp-axe-webdriver

Gulp plugin for aXe utilizing WebDriverJS
MIT License
24 stars 7 forks source link

Help with Tag filtering #10

Open jrtnq514 opened 6 years ago

jrtnq514 commented 6 years ago

I'm trying to only show violations for the following tags: 'wcag2aa', 'wcag2a', 'section508'

gulp.js

const options = {
    a11yCheckOptions: {
      rules: {
        'html-has-lang': { enabled: false },
        bypass: { enabled: false },
        'image-alt': { enabled: false },
      },
    },
    verbose: true,
    showOnlyViolations: true,
    exclude: '.offleft, #flex-col, #flex-row',
    tags: ['wcag2aa', 'wcag2a', 'section508'],
    folderOutputReport: componentName === undefined ? 'tests/axe/allHtml' : 'tests/axe',
    saveOutputIn: componentName === undefined ? `a11y-html.json` : `a11y-${componentName}.json`,
    urls: componentName === undefined ? ['http://localhost:3000'] : [`http://localhost:3000/component/${componentName}/`],
  };

 axe(options, done);

However I'm still getting a violation with the best-practice tag.

results.json

"violations": [
      {
        "description": "Ensures a navigation point to the primary content of the page. If the page contains iframes, each iframe should contain either no main landmarks or just one.",
        "help": "Page must contain one main landmark.",
        "helpUrl": "https://dequeuniversity.com/rules/axe/2.6/landmark-one-main?application=webdriverjs",
        "id": "landmark-one-main",
        "impact": "moderate",
        "nodes": [
          {
            "all": [
              {
                "data": false,
                "id": "has-at-least-one-main",
                "impact": "moderate",
                "message": "Document has no main landmarks",
                "relatedNodes": []
              }
            ],
            "any": [],
            "html": "<html lang=\"en\">",
            "impact": "moderate",
            "none": [],
            "target": [
              "html"
            ]
          }
        ],
        "tags": [
          "best-practice"
        ]
      }
    ]

Anything I'm doing wrong or ideas of why this is happening?

Thanks

felixzapata commented 6 years ago

I will take a look ASAP.

felixzapata commented 6 years ago

I think the problem is with some update of the axe-core because in an old version (2.0.7 for example) the filter is working but with a fresh install of the modules the filter is not working.

I will check it.

jrtnq514 commented 6 years ago

I believe the breaking change was in 2.6.0

felixzapata commented 6 years ago

I see it, but I think it is a little confused. I mean, the new rule is ok but it is not working with the filter or this rule is ignored by the filter?

jrtnq514 commented 6 years ago

Yeah it appears that the landmark-one-main rule is ignored by the filters. I've found a work around in case anyone else runs into the same issue. Adding 'landmark-one-main': { enabled: false } to the rules works.

a11yCheckOptions: {
      rules: {
        'html-has-lang': { enabled: false },
        bypass: { enabled: false },
        'image-alt': { enabled: false },
        'landmark-one-main': { enabled: false }
      },
    },
felixzapata commented 6 years ago

Yes thanks, it works with your solution.

I'm going to open an issue in the axe-core repository about this problem.

felixzapata commented 6 years ago

@jrtnq514 I've published a few days ago a major version of the package with updates of the aXe libraries. Maybe with the new version, the problem with the filtering being resolved.