diff --git a/README.md b/README.md index 9e7ca26..e413faa 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ # axe-html-reporter -Creates an HTML report from axe results object with list of violations, passes and incomplete results. +Creates an HTML report from axe-core library AxeResults object listing violations, passes, incomplete and incompatible results. -Allows specifying `url`, `projectKey` and `outputDir`. +Allows specifying report creation options: `reportFileName`, `outputDir`, `projectKey` and `customSummary`. + +`customSummary` allows having html parameters. Please check [sample report output.](https://lpelypenko.github.io/axe-html-reporter/) @@ -16,8 +18,7 @@ npm i axe-html-reporter ### Example usage in TestCafe - -To run TestCafe tests with axe-core, install testcafe, axe-core and [@testcafe-community/axe](https://www.npmjs.com/package/@testcafe-community/axe): +To run TestCafe tests with axe-core, install testcafe, axe-core and [@testcafe-community/axe](https://www.npmjs.com/package/@testcafe-community/axe): ```shell script npm i -D axe-html-reporter testcafe axe-core @testcafe-community/axe @@ -27,15 +28,15 @@ For TestCafe example add the following clientScript in your `.testcaferc.json` c ```json { - "clientScripts":[{"module":"axe-core/axe.min.js"}] + "clientScripts": [{ "module": "axe-core/axe.min.js" }] } ``` -In the example bellow `fileName` is not passed. In this case html report with default name `accessibilityReport.html` will be created in `artifacts` directory. -See full TestCafe test example is bellow: +In the example bellow `fileName` is not passed. If `fileName` is not passed, HTML report will be created with default name `accessibilityReport.html` in `artifacts` directory. -```javascript +See full TestCafe test example is bellow: +```javascript import { runAxe } from '@testcafe-community/axe'; import { createHtmlReport } from 'axe-html-reporter'; @@ -43,19 +44,24 @@ fixture('TestCafe tests with Axe').page('http://example.com'); test('Automated accessibility testing', async (t) => { const axeContext = { exclude: [['select']] }; - const axeOptions = { rules: rulesMap() }; + const axeOptions = { + rules: { + 'object-alt': { enabled: true }, + 'role-img-alt': { enabled: true }, + 'input-image-alt': { enabled: true }, + 'image-alt': { enabled: true }, + }, + }; const { error, results } = await runAxe(axeContext, axeOptions); - await t.expect(error).eql(null, `axe check failed with an error: ${error.message}`); + await t.expect(error).notOk(`axe check failed with an error: ${error.message}`); // creates html report with the default file name `accessibilityReport.html` createHtmlReport({ - violations: results.violations, - passes: results.passes, - incomplete: results.incomplete, - url: results.url, - projectKey: 'EXAMPLE', + results, + options: { + projectKey: 'EXAMPLE', + }, }); }); - ``` Run TestCafe test: @@ -77,36 +83,26 @@ HTML report was saved into the following directory /Users/axe-demos/artifacts/ac ### Example usage in any JS framework ```javascript - import { axeHtmlReporter } from 'axe-html-reporter'; (() => { - const results = { violations: [], passes: [], incomplete: [], inapplicable: [], url: 'http://example.com' }; // creates html report with the default name `accessibilityReport.html` file - axeHtmlReporter({ - violations: results.violations, - passes: results.passes, - incomplete: results.incomplete, - inapplicable: results.inapplicable, - url: results.url - }); + axeHtmlReporter({ results: 'AxeResults' }); // full AxeResults object + // creates html report with the default name `accessibilityReport.html` file and all supported AxeResults values + axeHtmlReporter({ results: { violations: 'Result[]' } }); // passing only violations from axe.run output // creates html report with the default name `accessibilityReport.html` file and adds url and projectKey axeHtmlReporter({ - violations: results.violations, - passes: results.passes, - incomplete: results.incomplete, - projectKey: 'JIRA_PROJECT_KEY', - url: results.url, + results: 'AxeResults', + options: { projectKey: 'JIRA_PROJECT_KEY' }, }); - // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds url and projectKey to the header + // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds projectKey to the header axeHtmlReporter({ - violations: results.violations, - passes: results.passes, - incomplete: results.incomplete, - projectKey: 'JIRA_PROJECT_KEY', - outputDir: 'axe-reports', - url: results.url, - fileName: 'exampleReport.html', + results: 'AxeResults', + options: { + projectKey: 'JIRA_PROJECT_KEY', + outputDir: 'axe-reports', + fileName: 'exampleReport.html', + }, }); // creates html report with all optional parameters, saving the report into 'docs' directory with report file name 'index.html' const customSummary = `Test Case: Full page analysis @@ -116,15 +112,13 @@ import { axeHtmlReporter } from 'axe-html-reporter';
  • Analyze full page with all rules enabled
    • `; createHtmlReport({ - violations: axeRawViolations, - passes: axeRawPassed, - incomplete: [], - inapplicable: axeRawInapplicable, - projectKey: 'DEQUE', - url: 'https://dequeuniversity.com/demo/mars/', - customSummary, - outputDir: 'docs', - reportFileName: 'index.html' + results: 'AxeResults', + options: { + projectKey: 'DEQUE', + customSummary, + outputDir: 'docs', + reportFileName: 'index.html', + }, }); })(); ``` @@ -136,6 +130,6 @@ const { axeHtmlReporter } = require('axe-html-reporter'); (() => { // creates html report with the name `accessibilityReport.html` file - axeHtmlReporter({ violations: results.violations }); + axeHtmlReporter({ results: { violations: 'Result[]' } }); })(); ``` diff --git a/docs/index.html b/docs/index.html index b452071..3233680 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,7 +61,7 @@

    Page URL: - https://dequeuniversity.com/demo/mars/ + http://example.com/
    Test Case: Full page analysis
    Steps:
    @@ -71,7 +71,7 @@
    -
    axe-core found 85 violations
    +
    axe-core found 6 violations
    @@ -86,46 +86,6 @@
    axe-core found 85 violations
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -133,63 +93,23 @@
    axe-core found 85 violations
    - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - + - + - + @@ -202,67 +122,22 @@

    Failed

    -
    Buttons must have discernible text
    +
    <html> element must have a lang attribute
    Learn more
    -
    button-name
    +
    html-has-lang
    WCAG 2.0 Level A
    -

    Ensures buttons have discernible text

    -
    - critical -
    -
    -
    -
    1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
    2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
    3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
    4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
    5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
    6 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A 1
    7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
    8Form elements must have labelslabelWCAG 2.0 Level Acritical1
    92 Document must have one main landmark landmark-one-main Best practice moderate4
    10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
    11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious 1
    12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
    133 All page content must be contained by landmarks region Best practice moderate371
    144 Elements should not have tabindex greater than zero tabindex Best practice
    - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
    - - - -
    -
    -
    -
    Elements must have sufficient color contrast
    - Learn more -
    -
    -
    color-contrast
    -
    - WCAG 2.0 Level AA -
    -
    -
    -

    Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

    +

    Ensures every HTML document has a lang attribute

    serious
    @@ -279,61 +154,8 @@
    1 - <h3>Be Bold...</h3> - ":root > h3" - - - 2 - <p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p> - "#vap-plan > p:nth-child(3)" - - - 3 - <h3>Countdown...</h3> - ":root > h3" - - - 4 - <p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p> - "#vap-book > p:nth-child(3)" - - - 5 - <h3>Blast Off!</h3> - ":root > h3" - - - 6 - <p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p> - "#vap-travel > p:nth-child(3)" - - - 7 - <a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a> - ":root > a[href="mars2\.html\?a\=crater_adventure"]" - - - 8 - <a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a> - ":root > a[href="mars2\.html\?a\=ice_cream"]" - - - 9 - <p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p> - "li:nth-child(2) > .deal-text > p" - - - 10 - <a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a> - "li:nth-child(3) > .deal-text > h3 > .link" - - - 11 - <a href="mars2.html?a=free_year">Book a free year on Mars</a> - ":root > a[href="mars2\.html\?a\=free_year"]" + <html> + "html" @@ -343,24 +165,24 @@
    -
    IDs of active elements must be unique
    +
    Document must have one main landmark
    Learn more
    -
    duplicate-id-active
    +
    landmark-one-main
    - WCAG 2.0 Level A + Best practice
    -

    Ensures every id attribute value of active elements is unique

    +

    Ensures the document has a main landmark

    - serious + moderate
    @@ -375,8 +197,8 @@
    1 - <a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a> - ".active" + <html> + "html" @@ -386,24 +208,24 @@
    -
    id attribute value must be unique
    +
    All page content must be contained by landmarks
    Learn more
    -
    duplicate-id
    +
    region
    - WCAG 2.0 Level A + Best practice
    -

    Ensures every id attribute value is unique

    +

    Ensures all page content is contained by landmarks

    - minor + moderate
    @@ -418,113 +240,13 @@
    1 - <div id="control-panel" class="container-fluid-full"> - ".loginnow > .container-fluid-full" - - - 2 - <nav id="left-control-nav" class="pull-left"> - ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" - - - 3 - <div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> + <div> + <h1>Example Domain</h1> + <p>This domain is for use in illustrative examples in documents. You may use this + domain in literature without prior coordination or asking for permission.</p> + <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> - ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" - - - 4 - <form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> - ":root > form[method="get"][action="\/demo\/mars\/mars2"]" - - - 5 - <nav id="right-control-nav" class="pull-right" style="display: inline;"> - ".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" - - - 6 - <div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div> - "#left-column > div:nth-child(1)" - - - 7 - <input type="hidden" id="nCountries" name="nCountries"> - "#select-country > input[name="nCountries"][type="hidden"]" - - - 8 - <div id="passenger-select" class="widget-container middle"> - ".middle.widget-container:nth-child(13)" - - - 9 - <div id="passengers"> - ".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" - - - 10 - <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> - ".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" - - - -
    -
    -
    -
    -
    -
    -
    Frames must have title attribute
    - Learn more -
    -
    -
    frame-title
    -
    - WCAG 2.0 Level A -
    -
    -
    -

    Ensures <iframe> and <frame> elements contain a non-empty title attribute

    -
    - serious -
    -
    -
    - - - - - - - - - - - - - - - - - - +
    #Source CodeSelector
    1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
    2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78""div"
    @@ -534,22 +256,22 @@
    -
    <html> element must have a lang attribute
    +
    Elements should not have tabindex greater than zero
    Learn more
    -
    html-has-lang
    +
    tabindex
    - WCAG 2.0 Level A + Best practice
    -

    Ensures every HTML document has a lang attribute

    +

    Ensures tabindex attribute values are not greater than 0

    serious
    @@ -566,619 +288,18 @@
    1 - <html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"> - "html" - - - -
    -
    -
    -
    -
    -
    -
    Images must have alternate text
    - Learn more -
    -
    -
    image-alt
    -
    - WCAG 2.0 Level A -
    -
    -
    -

    Ensures <img> elements have alternate text or a role of none or presentation

    -
    - critical -
    -
    -
    - - - - - - - - - - - - - + + - - + + - - - - - - - - - -
    #Source CodeSelector
    1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
    2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
    3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"
    4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"
    -
    -
    -
    -
    -
    -
    -
    Form elements must have labels
    - Learn more -
    -
    -
    label
    -
    - WCAG 2.0 Level A -
    -
    -
    -

    Ensures every form element has a label

    -
    - critical -
    -
    -
    - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
    -
    -
    -
    -
    -
    -
    -
    Document must have one main landmark
    - Learn more -
    -
    -
    landmark-one-main
    -
    - Best practice -
    -
    -
    -

    Ensures the document has a main landmark

    -
    - moderate -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
    2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
    3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
    4<html lang="en" class=" xl en">".twitter-follow-button", "html"
    -
    -
    -
    -
    -
    -
    -
    Ensures landmarks are unique
    - Learn more -
    -
    -
    landmark-unique
    -
    - Best practice -
    -
    -
    -

    Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

    -
    - moderate -
    -
    -
    - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
    -
    -
    -
    -
    -
    -
    -
    Links must be distinguished from surrounding text in a way that does not rely on color
    - Learn more -
    -
    -
    link-in-text-block
    -
    - WCAG 2.0 Level A -
    -
    -
    -

    Links can be distinguished without relying on color

    -
    - serious -
    -
    -
    - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]"
    -
    -
    -
    -
    -
    -
    -
    Links must have discernible text
    - Learn more -
    -
    -
    link-name
    -
    - WCAG 2.0 Level A -
    -
    -
    -

    Ensures links have discernible text

    -
    - serious -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]"
    2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
    3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
    4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
    5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]"
    6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
    7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]"
    8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]"
    -
    -
    -
    -
    -
    -
    -
    All page content must be contained by landmarks
    - Learn more -
    -
    -
    region
    -
    - Best practice -
    -
    -
    -

    Ensures all page content is contained by landmarks

    -
    - moderate -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #Source CodeSelector
    1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
    2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
    3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
    4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
    5<div class="span7 left-first pull-left" id="left-column">"#left-column"
    6<div id="widget-controls" class="widget-container head">"#widget-controls"
    7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
    8<div id="route-type-radio-group" class="">"#route-type-radio-group"
    9<div id="route-type">"#route-type"
    10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
    11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
    12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
    13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
    14<div class="add-buttons" id="add-traveler">"#add-traveler"
    15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
    16<div class="interior-container">"#video-box > .interior-container"
    17<div id="social-bar" class="container-fluid-full">"#social-bar"
    18<h4>Book Your Trip</h4>"#footer-book > h4"
    19<ul>"#footer-book > ul"
    20<h4>Mars Shuttles</h4>"#footer-trains > h4"
    21<ul>"#footer-trains > ul"
    22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
    23<ul>"#footer-passes > ul"
    24<h4>Mars Adventures</h4>"#footer-plan > h4"
    25<ul>"#footer-plan > ul"
    26<h4>FAQs</h4>"#footer-faq > h4"
    27<ul>"#footer-faq > ul"
    28<h4>Connect With Us</h4>"#footer-connect > h4"
    29<ul>"#footer-connect > ul"
    30<div id="copyright" class="container">"#copyright"
    31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
    32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
    33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
    34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
    35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
    36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]"
    37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
    -
    -
    -
    -
    -
    -
    -
    Elements should not have tabindex greater than zero
    - Learn more -
    -
    -
    tabindex
    -
    - Best practice -
    -
    -
    -

    Ensures tabindex attribute values are not greater than 0

    -
    - serious -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - + +
    #Source CodeSelector
    1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
    2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
    3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
    @@ -1196,7 +317,7 @@
    aria-expanded="false" aria-controls="passes" > - axe returned 38 passed axe + axe returned 12 passed axe checks. Expand details on click @@ -1222,306 +343,664 @@
    1 - Elements must only use allowed ARIA attributes - aria-allowed-attr + aria-hidden='true' must not be present on the document body + aria-hidden-body WCAG 2.0 Level A - 10 + 1 2 - ARIA role must be appropriate for the element - aria-allowed-role + Page must have means to bypass repeated blocks + bypass + WCAG 2.0 Level A + 1 + + + + 3 + Elements must have sufficient color contrast + color-contrast + WCAG 2.0 Level AA + 3 + + + + 4 + Documents must have <title> element to aid in navigation + document-title + WCAG 2.0 Level A + 1 + + + + 5 + Headings must not be empty + empty-heading + Best practice + 1 + + + + 6 + Heading levels should only increase by one + heading-order + Best practice + 1 + + + + 7 + Hidden content on the page cannot be analyzed + hidden-content Best practice 14 - 3 - aria-hidden='true' must not be present on the document body - aria-hidden-body + 8 + Links must have discernible text + link-name WCAG 2.0 Level A 1 + + + 9 + Users should be able to zoom and scale the text up to 500% + meta-viewport-large + Best practice + 1 + + + + 10 + Zooming and scaling must not be disabled + meta-viewport + Best practice + 1 + + + + 11 + Page must contain a level-one heading + page-has-heading-one + Best practice + 1 + + + + 12 + All page content must be contained by landmarks + region + Best practice + 4 + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +

    What 'incomplete' axe checks means?

    +

    + Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

    +

    + Visit axe API Documentation + to learn more. +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +

    What 'inapplicable' axe checks means?

    +

    + The inapplicable array lists all the rules for which no matching + elements were found on the page. +

    +

    + Visit axe API Documentation + to learn more. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + - - + - - + - - + + + + + + + + - - + + + + + + + + - - + - - + + + + + + + + - - + - - + + + + + + + + - - - - + + + - - - - + + + - - + + + + + + + + - - + - - - - + + + - - + - - - - + + + - - - - + + + - - - - + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - - + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - - + + + + - - - - - + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + - - + + + + + + + + - - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + -
    #DescriptionAxe rule IDWCAG
    1accesskey attribute value must be uniqueaccesskeysBest practice
    2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
    3Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A
    4ARIA role must be appropriate for the elementaria-allowed-roleBest practice
    5 ARIA hidden element must not contain focusable elements aria-hidden-focus WCAG 2.0 Level A2
    56ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
    7 Required ARIA attributes must be provided aria-required-attr WCAG 2.0 Level A13
    68 Certain ARIA roles must contain particular children aria-required-children WCAG 2.0 Level A13
    79 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2.0 Level A13
    810Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
    11 ARIA roles used must conform to valid values aria-roles WCAG 2.0 Level A13
    912ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
    13 ARIA attributes must conform to valid values aria-valid-attr-value WCAG 2.0 Level A10
    1014 ARIA attributes must conform to valid names aria-valid-attr WCAG 2.0 Level A10
    1115<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
    16 autocomplete attribute must be used correctly autocomplete-valid WCAG 2.1 Level AA3
    1217 Inline text spacing must be adjustable with custom stylesheets avoid-inline-spacing WCAG 2.1 Level AA8
    1318<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
    19 Buttons must have discernible text button-name WCAG 2.0 Level A12
    14Page must have means to bypass repeated blocksbypass20<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-list WCAG 2.0 Level A1
    15Documents must have <title> element to aid in navigationdocument-title21<dt> and <dd> elements must be contained by a <dl>dlitem WCAG 2.0 Level A1
    1622IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level A
    23 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2.0 Level A7
    1724 id attribute value must be unique duplicate-id WCAG 2.0 Level A20
    18Headings must not be emptyempty-heading25Elements in the focus order need a role appropriate for interactive contentfocus-order-semantics Best practice6
    1926 Form field should not have multiple label elements form-field-multiple-labels WCAG 2.0 Level A17
    20Heading levels should only increase by oneheading-order27Frames must be tested with axe-coreframe-tested Best practice6
    21Hidden content on the page cannot be analyzedhidden-content28Frames must have a unique title attributeframe-title-unique Best practice434
    22<html> element must have a lang attributehtml-has-lang29Frames must have title attributeframe-title WCAG 2.0 Level A1
    2330 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2.0 Level A1
    2431HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
    32Images must have alternate textimage-altWCAG 2.0 Level A
    33Alternative text of images should not be repeated as textimage-redundant-altBest practice
    34Input buttons must have discernible textinput-button-nameWCAG 2.0 Level A
    35Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
    36 Elements must have their visible text as part of their accessible name label-content-name-mismatch WCAG 2.1 Level A1
    2537 Form elements should have a visible label label-title-only Best practice17
    2638 Form elements must have labels label WCAG 2.0 Level A12
    27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A139Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
    28Links must have discernible textlink-name40Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
    41Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
    42Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
    43Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
    44Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
    45Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
    46Ensures landmarks are uniquelandmark-uniqueBest practice
    47Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-block WCAG 2.0 Level A5
    2948 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2.0 Level A1
    3049 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2.0 Level A3
    31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice150<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
    32Zooming and scaling must not be disabledmeta-viewportBest practice151Timed refresh must not existmeta-refreshWCAG 2.0 Level A
    33Page must contain a level-one headingpage-has-heading-one52<object> elements must have alternate textobject-altWCAG 2.0 Level A
    53Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
    54[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
    55scope attribute should be used correctlyscope-attr-valid Best practice1
    34All page content must be contained by landmarksregion56Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
    57Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
    58The skip-link target should exist and be focusableskip-link Best practice280
    3559svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
    60 Elements should not have tabindex greater than zero tabindex Best practice5
    3661 The <caption> element should not contain the same text as the summary attribute table-duplicate-name Best practice1
    37Data or header cells should not be used to give caption to a data table.table-fake-caption62Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
    63All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
    64All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A
    65All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
    66lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
    67<video> elements must have captionsvideo-caption WCAG 2.0 Level A1
    38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attr68<video> or <audio> elements do not autoplay audiono-autoplay-audio WCAG 2.0 Level A1
    @@ -1529,335 +1008,541 @@
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    What 'incomplete' axe checks means?

    -

    - Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

    -

    - Visit axe API Documentation - to learn more. -

    -
    -
    -
    -
    -
    +
    -
    +
    -

    What 'inapplicable' axe checks means?

    -

    - The inapplicable array lists all the rules for which no matching - elements were found on the page. -

    -

    - Visit axe API Documentation - to learn more. -

    - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + +
    #DescriptionAxe rule IDWCAG
    #Rule IDEnabled
    1accesskey attribute value must be uniqueaccesskeysBest practice
    1object-alttrue
    2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
    2role-img-alttrue
    3ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
    3input-image-alttrue
    4image-alttrue
    5svg-img-alttrue
    6area-alttrue
    7audio-captiontrue
    8video-captiontrue
    9definition-listtrue
    10dlitemtrue
    11listitemtrue
    12listtrue
    13th-has-data-cellstrue
    14td-headers-attrtrue
    15td-has-headertrue
    16p-as-headingtrue
    17aria-required-parenttrue
    18aria-required-childrentrue
    19table-fake-captiontrue
    20css-orientation-lockfalse
    21autocomplete-validtrue
    22link-in-text-blocktrue
    23no-autoplay-audiotrue
    24color-contrasttrue
    25meta-viewporttrue
    26avoid-inline-spacingtrue
    27server-side-image-maptrue
    28meta-refreshtrue
    29blinktrue
    30marqueetrue
    31bypasstrue
    32frame-titletrue
    33document-titletrue
    34scrollable-region-focusabletrue
    35identical-links-same-purposefalse
    36label-content-name-mismatchtrue
    37html-has-langtrue
    38html-lang-validtrue
    39html-xml-lang-mismatchtrue
    40valid-langtrue
    41form-field-multiple-labelstrue
    42duplicate-id-activetrue
    43duplicate-idtrue
    44duplicate-id-ariatrue
    45aria-valid-attrtrue
    46aria-valid-attr-valuetrue
    47aria-input-field-nametrue
    48aria-rolestrue
    49aria-toggle-field-nametrue
    50aria-hidden-focustrue
    51aria-hidden-bodytrue
    52button-nametrue
    4Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
    53aria-allowed-attrtrue
    5ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
    54input-button-nametrue
    6<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
    55aria-required-attrtrue
    7<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
    56aria-roledescriptiontrue
    8<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listWCAG 2.0 Level A
    57link-nametrue
    9<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
    58labeltrue
    10Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practice
    59accesskeystrue
    11HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
    60regiontrue
    12Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
    61aria-allowed-roletrue
    13Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A
    62landmark-banner-is-top-leveltrue
    14Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
    63landmark-complementary-is-top-leveltrue
    15Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
    64landmark-contentinfo-is-top-leveltrue
    16Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
    65focus-order-semanticstrue
    17Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
    66tabindextrue
    18Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
    67landmark-no-duplicate-maintrue
    19Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
    68label-title-onlytrue
    20Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
    69frame-testedtrue
    21<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
    70frame-title-uniquetrue
    22Timed refresh must not existmeta-refreshWCAG 2.0 Level A
    71heading-ordertrue
    23<object> elements must have alternate textobject-altWCAG 2.0 Level A
    72empty-headingtrue
    24Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
    73hidden-contenttrue
    25[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
    74landmark-uniquetrue
    26scope attribute should be used correctlyscope-attr-validBest practice
    75landmark-main-is-top-leveltrue
    27Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
    76page-has-heading-onetrue
    28Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
    77landmark-one-maintrue
    29The skip-link target should exist and be focusableskip-linkBest practice
    78landmark-no-duplicate-bannertrue
    30svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
    79landmark-no-duplicate-contentinfotrue
    31Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
    80scope-attr-validtrue
    32All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
    81image-redundant-alttrue
    33All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
    82table-duplicate-nametrue
    34lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
    83skip-linktrue
    35<video> or <audio> elements do not autoplay audiono-autoplay-audioWCAG 2.0 Level A
    84meta-viewport-largetrue
    diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index 1e9b0cd..e3ccf8a 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -1938,10 +1938,16 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` Page URL: http://example.com/ - +
    + Test Case: Full page analysis +
    Steps:
    +
      +
    1. Open https://dequeuniversity.com/demo/mars/
      2. +
    2. Analyze full page with all rules enabled
      3. +
    -
    axe-core found 3 violations
    +
    axe-core found 6 violations
    @@ -1978,6 +1984,14 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` + + + + + + + +
    moderate 1
    4Elements should not have tabindex greater than zerotabindexBest practiceserious3

    Failed

    @@ -2115,6 +2129,59 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
    +
    +
    +
    +
    Elements should not have tabindex greater than zero
    + Learn more +
    +
    +
    tabindex
    +
    + Best practice +
    +
    +
    +

    Ensures tabindex attribute values are not greater than 0

    +
    + serious +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    #Source CodeSelector
    1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
    2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
    3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
    +
    +
    +
    diff --git a/test/index.test.ts b/test/index.test.ts index a8e7fb1..e679453 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -170,16 +170,14 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - - it('All optional parameters present', async () => { - const reportFileName = 'index.html'; - const outputDir = 'docs'; - const customSummary = `Test Case: Full page analysis + const customSummary = `Test Case: Full page analysis
    Steps:
    1. Open https://dequeuniversity.com/demo/mars/
    2. Analyze full page with all rules enabled
    `; + it('All optional parameters present', async () => { + const reportFileName = 'tsAllOptionalParametersPresent.html'; createHtmlReport({ results: { violations: axeRawViolations, @@ -188,22 +186,23 @@ describe('createHtmlReport() test', () => { inapplicable: axeRawInapplicable, url: 'https://dequeuniversity.com/demo/mars/', }, - options: { projectKey: 'DEQUE', customSummary, outputDir, reportFileName }, + options: { projectKey: 'DEQUE', customSummary, reportFileName }, }); expect( - fs.readFileSync(getPathToCreatedReport(reportFileName, outputDir), { + fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8', }) ).toMatchSnapshot(); }); it('AxeResults passed', async () => { - const reportFileName = 'tcAxeResults.html'; + const reportFileName = 'index.html'; + const outputDir = 'docs'; createHtmlReport({ results: rawAxeResults, - options: { projectKey: 'DEQUE', reportFileName }, + options: { projectKey: 'DEQUE', customSummary, outputDir, reportFileName }, }); expect( - fs.readFileSync(getPathToCreatedReport(reportFileName), { + fs.readFileSync(getPathToCreatedReport(reportFileName, outputDir), { encoding: 'utf8', }) ).toMatchSnapshot(); diff --git a/test/rawAxeResults.json b/test/rawAxeResults.json index 2b60c54..5049f7d 100644 --- a/test/rawAxeResults.json +++ b/test/rawAxeResults.json @@ -180,6 +180,67 @@ "failureSummary": "Fix any of the following:\n Some page content is not contained by landmarks" } ] + }, + { + "id": "tabindex", + "impact": "serious", + "tags": ["cat.keyboard", "best-practice"], + "description": "Ensures tabindex attribute values are not greater than 0", + "help": "Elements should not have tabindex greater than zero", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/tabindex?application=axeAPI", + "nodes": [ + { + "any": [ + { + "id": "tabindex", + "data": null, + "relatedNodes": [], + "impact": "serious", + "message": "Element has a tabindex greater than 0" + } + ], + "all": [], + "none": [], + "impact": "serious", + "html": "", + "target": ["#from0"], + "failureSummary": "Fix any of the following:\n Element has a tabindex greater than 0" + }, + { + "any": [ + { + "id": "tabindex", + "data": null, + "relatedNodes": [], + "impact": "serious", + "message": "Element has a tabindex greater than 0" + } + ], + "all": [], + "none": [], + "impact": "serious", + "html": "", + "target": ["#to0"], + "failureSummary": "Fix any of the following:\n Element has a tabindex greater than 0" + }, + { + "any": [ + { + "id": "tabindex", + "data": null, + "relatedNodes": [], + "impact": "serious", + "message": "Element has a tabindex greater than 0" + } + ], + "all": [], + "none": [], + "impact": "serious", + "html": "", + "target": ["#deptDate0"], + "failureSummary": "Fix any of the following:\n Element has a tabindex greater than 0" + } + ] } ], "passes": [