diff --git a/README.md b/README.md index 9e0fb26..50ed188 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,24 @@ import { axeHtmlReporter } from 'axe-html-reporter'; url: results.url, 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 +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
`; + createHtmlReport({ + violations: axeRawViolations, + passes: axeRawPassed, + incomplete: [], + inapplicable: axeRawInapplicable, + projectKey: 'DEQUE', + url: 'https://dequeuniversity.com/demo/mars/', + customSummary, + outputDir: 'docs', + reportFileName: 'index.html' + }); })(); ``` diff --git a/docs/index.html b/docs/index.html index 18d8a93..e012e4d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,15 +56,23 @@

- AXE Accessibility Results + AXE Accessibility Results for DEQUE project

-
-

axe-core found 85 violations

- -
+
+ 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 85 violations
@@ -1533,7 +1541,7 @@
aria-expanded="false" aria-controls="incomplete" > - axe returned 4 incomplete checks. Expand + axe returned 0 incomplete checks. Expand details on click
@@ -1558,50 +1566,6 @@
> to learn more.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
diff --git a/src/index.ts b/src/index.ts index ddb740e..3b1ca95 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,6 +13,7 @@ export interface CreateReport { reportFileName?: string; outputDir?: string; projectKey?: string; + customSummary?: string; } export interface PreparedResults { @@ -31,6 +32,7 @@ export function createHtmlReport({ reportFileName, outputDir, projectKey, + customSummary, }: CreateReport): void { if (!violations || !url) { throw new Error( @@ -53,6 +55,7 @@ export function createHtmlReport({ hasInapplicable: inapplicable !== undefined, incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0, projectKey, + customSummary, }); saveHtmlReport({ htmlContent, reportFileName, outputDir }); } catch (e) { diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts index cfd9b86..4bc7b24 100644 --- a/src/util/prepareReportData.ts +++ b/src/util/prepareReportData.ts @@ -34,18 +34,17 @@ export function prepareReportData({ acc += nodes.length; return acc; }, 0); - const violationsSummary = `axe-core found ${violationsTotal} violation${ - violationsTotal === 1 ? '' : 's' - }`; if (violations.length === 0) { return { - violationsSummary: - 'No violations were found by axe-core with enabled rules and axe check options', + violationsSummary: 'axe-core found 0 violations', checksPassed: passedChecks, checksIncomplete: incompleteChecks, - checksInapplicable: inapplicableChecks + checksInapplicable: inapplicableChecks, }; } + const violationsSummary = `axe-core found ${violationsTotal} violation${ + violationsTotal === 1 ? '' : 's' + }`; // Prepare data to show summary const violationsSummaryTable = simplifyAxeResultForSummary(violations); // Prepare data to show detailed list of violations diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html index af4cf9f..f41558e 100644 --- a/src/util/template/pageTemplate.html +++ b/src/util/template/pageTemplate.html @@ -58,15 +58,19 @@

AXE Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}}

-
-

{{violationsSummary}}

- -
+ {{#customSummary}} +
+ {{{customSummary}}} {{/customSummary}} + + + +
{{{violationsSummary}}}
+ {{#violationDetails.length}} - {{#violationDetails.length}} diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index c2d61c2..ea687af 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -1,5 +1,1200 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`createHtmlReport() test All optional parameters present 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+ 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 85 violations
+
#
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
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 attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
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 Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#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

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector
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"]"
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + +
#Source CodeSelector
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"
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector
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>".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"
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + +
#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"
+
+
+
+
+
+
+
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"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
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"
+
+
+
+ + + +" +`; + exports[`createHtmlReport() test Verify report is created only with violations because passes and incomplete are not passed 1`] = ` " @@ -61,13 +1256,1210 @@ exports[`createHtmlReport() test Verify report is created only with violations b

AXE Accessibility Results

-
-

axe-core found 85 violations

- -
+
+ 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 85 violations
@@ -1248,13 +3640,15 @@ exports[`createHtmlReport() test Verify report is created with violations and pa

AXE Accessibility Results

-
-

axe-core found 85 violations

- -
+ + + + +
axe-core found 85 violations
@@ -2779,13 +5173,15 @@ exports[`createHtmlReport() test Verify report is created with violations, passe

AXE Accessibility Results

-
-

axe-core found 85 violations

- -
+ + + + +
axe-core found 85 violations
@@ -4392,15 +6788,17 @@ exports[`createHtmlReport() test Verify report is created with violations, passe

- AXE Accessibility Results for EAXR project + AXE Accessibility Results for DEQUE project

-
-

axe-core found 85 violations

- -
+ + + + +
axe-core found 85 violations
@@ -6009,14 +8407,15 @@ exports[`createHtmlReport() test Verify report with no violations, no passes, no

AXE Accessibility Results

-
-

No violations were found by axe-core with enabled rules and axe check options

- -
-
+ + + + +
axe-core found 0 violations
@@ -6191,16 +8590,17 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in

- AXE Accessibility Results for EAXR project + AXE Accessibility Results for DEQUE project

-
-

No violations were found by axe-core with enabled rules and axe check options

- -
- + + + + +
axe-core found 0 violations
@@ -6697,16 +9097,17 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in

- AXE Accessibility Results for EAXR project + AXE Accessibility Results for DEQUE project

-
-

No violations were found by axe-core with enabled rules and axe check options

- -
- + + + + +
axe-core found 0 violations
diff --git a/test/index.test.ts b/test/index.test.ts index d93e04a..33c87c0 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -70,7 +70,7 @@ describe('createHtmlReport() test', () => { passes: axeRawPassed, incomplete: axeRawIncomplete, reportFileName: 'tcWithTheKey.html', - projectKey: 'EAXR', + projectKey: 'DEQUE', url: 'https://dequeuniversity.com/demo/mars/', }); const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcWithTheKey.html'); @@ -87,7 +87,7 @@ describe('createHtmlReport() test', () => { passes: axeRawPassed, incomplete: axeRawIncomplete, reportFileName: 'tcAllPassed.html', - projectKey: 'EAXR', + projectKey: 'DEQUE', url: 'https://dequeuniversity.com/demo/mars/', }); const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcAllPassed.html'); @@ -132,4 +132,60 @@ describe('createHtmlReport() test', () => { // validate expect(htmlFileContent).toMatchSnapshot(); }); + it('Verify report is created with violations and custom summary', async () => { + const customSummary = `Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
`; + createHtmlReport({ + violations: axeRawViolations, + url: 'https://dequeuniversity.com/demo/mars/', + customSummary, + reportFileName: 'tcIncludingCustomSummary.html' + }); + const pathToTheReport = path.resolve( + process.cwd(), + 'artifacts', + 'tcIncludingCustomSummary.html' + ); + const htmlFileContent = fs.readFileSync(pathToTheReport, { + encoding: 'utf8', + }); + // do not clean up to verify results manually + // validate + expect(htmlFileContent).toMatchSnapshot(); + }); + + it('All optional parameters present', async () => { + const customSummary = `Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
`; + createHtmlReport({ + violations: axeRawViolations, + passes: axeRawPassed, + incomplete: [], + inapplicable: axeRawInapplicable, + projectKey: 'DEQUE', + url: 'https://dequeuniversity.com/demo/mars/', + customSummary, + outputDir: 'docs', + reportFileName: 'index.html' + }); + const pathToTheReport = path.resolve( + process.cwd(), + 'artifacts', + 'tcIncludingCustomSummary.html' + ); + const htmlFileContent = fs.readFileSync(pathToTheReport, { + encoding: 'utf8', + }); + // do not clean up to verify results manually + // validate + expect(htmlFileContent).toMatchSnapshot(); + }); });