Version 2.4.2

It's defined as WCAG2AA.Principle1.Guideline1_4.1_4_3.G18, but gets reported as WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail

CHANGELOG.md

@@ -1,6 +1,23 @@
 
 # Changelog
 
+## 2.4.2 (2018-06-21)
+
+  * Update dependencies
+    * body-parser: ~1.17.1 to ^1.18.3
+    * compression: ~1.6 to ^1.7.2
+    * express: ~4.15.2 to ^4.16.3
+    * moment: ~2.15.2 to ^2.22.2
+
+## 2.4.1 (2017-11-28)
+
+  * Update dependencies
+    * pa11y-webservice: ^2.3.0 to ^2.3.1
+
+## 2.4.0 (2017-11-23)
+
+  * Add the ability to export the results graph as a PNG, see #197 for more information
+
 ## 2.3.0 (2017-10-31)
 
   * Large overhaul of the results page, see #196 for more information

Makefile

@@ -35,6 +35,7 @@ uglify:
 		public/js/vendor/flot/jquery.flot.time.js \
 		public/js/vendor/flot/jquery.flot.selection.js \
 		public/js/vendor/flot/jquery.flot.resize.js \
+		public/js/vendor/helpers/html2canvas.min.js \
 		public/js/site.js \
 		-o ./public/js/site.min.js
 	@$(TASK_DONE)

README.md

@@ -58,7 +58,7 @@ Now that you've got your application configured, make sure you have a MongoDB se
 NODE_ENV=development node index.js
 ```
 
-See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
+See [Contributing](#contributing) for more information about running locally (and restarting automatically when files change).
 
 If you run into problems, check the [troubleshooting guide][troubleshooting].
 
@@ -156,5 +156,5 @@ Copyright © 2013–2017, Team Pa11y
 [info-build]: https://travis-ci.org/pa11y/pa11y-dashboard
 [shield-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg
 [shield-node]: https://img.shields.io/badge/node.js%20support-4–6-brightgreen.svg
-[shield-version]: https://img.shields.io/badge/version-2.3.0-blue.svg
+[shield-version]: https://img.shields.io/badge/version-2.4.2-blue.svg
 [shield-build]: https://img.shields.io/travis/pa11y/pa11y-dashboard/master.svg

data/standards.js

@@ -910,7 +910,7 @@ function getStandards() {
 					description: 'If any audio plays automatically for longer than 3 seconds, check that there is the ability to pause, stop or mute the audio.'
 				},
 				{
-					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18',
+					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail',
 					description: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of /{value/}. Recommendation: /{colour recommendations/}.'
 				},
 				{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -24,14 +24,15 @@
     "node": ">=4"
   },
   "dependencies": {
-    "body-parser": "~1.17.1",
+    "body-parser": "^1.18.3",
     "chalk": "~1.1",
-    "compression": "~1.6",
+    "compression": "^1.7.2",
-    "express": "~4.15.2",
+    "express": "^4.16.3",
     "express-hbs": "~1.0",
     "http-headers": "^3.0.1",
-    "moment": "~2.15.2",
+    "moment": "^2.22.2",
-    "pa11y-webservice": "^2.3.0",
+    "npm": "^6.1.0",
+    "pa11y-webservice": "^2.3.1",
     "pa11y-webservice-client-node": "^1.2.1",
     "underscore": "~1.8"
   },

public/js/site.js

@@ -132,7 +132,7 @@ $(document).ready(function(){
         plotGraphData();
     });
 
-    $(ruleTooltip).tooltip();
+    ruleTooltip.tooltip();
 
     // Function to animate sections
     function animateSection (sectionName, offset){
@@ -172,6 +172,7 @@ $(document).ready(function(){
 
     function plotGraphData () {
         $.plot(graphContainer, getData(), graphOptions);
+        exportGraph();
     }
 
     function getData() {
@@ -202,6 +203,37 @@ $(document).ready(function(){
         zoomResetButton.toggleClass('hidden');
     }
 
+	function exportGraph() {
+		var exportBtn = $('.btn_action_export');
+
+		exportBtn.click(function(e) {
+			e.preventDefault();
+
+			var fileName = $('h1').text().toLowerCase().split(' ').join('_');
+			var date = new Date();
+
+			fileName += '_' + date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+
+			html2canvas($('.graph').get(0), {
+				onrendered: function (canvas) {
+					downloadFile(canvas.toDataURL('image/png'), fileName + '.png');
+				}
+			});
+		});
+	}
+
+	function downloadFile(dataurl, filename) {
+		var link = document.createElement('a');
+		link.href = dataurl;
+		link.setAttribute('download', filename);
+
+		var clickEvent = document.createEvent('MouseEvents');
+		clickEvent.initEvent('click', false, true);
+		link.dispatchEvent(clickEvent);
+
+		return false;
+	}
+
     graphContainer.bind('plotselected', function (event, ranges) {
         // clamp the zooming to prevent eternal zoom
         if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {

public/less/site.less

@@ -523,8 +523,8 @@ ul.date-links {
 }
 
 .series-checkboxes {
-  padding: 0 30px;
+  padding: 0 15px;
-  margin-bottom: 15px;
+  margin-bottom: 16px;
 
   li {
 	width: 32%;
@@ -532,7 +532,7 @@ ul.date-links {
 	border-radius: @border-radius-base;
 
 	.series-checkbox-container {
-	  padding: 2px 4px 3px 4px;
+	  padding: 4px 4px 5px 4px;
 	}
 
 	label {

view/partial/graph.html

@@ -17,7 +17,13 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-12 clearfix">
 	<div class="graph-container graph-spacer ruled clearfix">
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix col-md-5 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
+			<div class="col-md-3 col-sm-4 col-xs-3">
+				<span class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</span>
+			</div>
+
+			<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
+				<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
+			</div>
 		</div>
 		<div data-role="graph" class="graph"></div>
 		<div class="dashedLegend">