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

@@ -12,7 +12,7 @@ Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter;
 
 ## Latest news from Pa11y
 
-✨ 🔜 ✨ The Pa11y team is very excited to announce plans for the successor to Pa11y Dashboard and Pa11y Webservice, codename "Sidekick". Help us define the features that you want to see by visiting the [proposal][sidekick-proposal]. ✨  
+✨ 🔜 ✨ The Pa11y team is very excited to announce plans for the successor to Pa11y Dashboard and Pa11y Webservice, codename "Sidekick". Help us define the features that you want to see by visiting the [proposal][sidekick-proposal]. ✨
 
 ---
 
@@ -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",
-    "express": "~4.15.2",
+    "compression": "^1.7.2",
+    "express": "^4.16.3",
     "express-hbs": "~1.0",
     "http-headers": "^3.0.1",
-    "moment": "~2.15.2",
-    "pa11y-webservice": "^2.3.0",
+    "moment": "^2.22.2",
+    "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;
-  margin-bottom: 15px;
+  padding: 0 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">