A11y fixes for pa11y dashboard pages. (#306)

* First draft of a11y fixes.

* Amended results title

* Amended results title (again)

* Back to top keyboard operation

Removed the 'data-role="top"' attribute, which implemented a cool animation to scroll to top but prevented the default behaviour, resulting in the keyboard focus not going back to top.

* Options Button

Fix to have a working options button, but using the mouse only. This is not a good solution because it cannot be operated via the keyboard.

* Fixed options menu css.

* Results view layout changes

* Undoing layout changes

* Graph layout fixes.

* Skip Rules Link

Added a link to skip the list of rules, which can get very long and annoying for any keyboard user not interested in selecting a rule. Most probably, implementing a collapsible list of rules would be a better solution here.

Co-authored-by: Carlos Muncharaz <carlos@muncharaz.eu>

public/js/vendor/bootstrap/_layouts/default.html

@@ -43,9 +43,9 @@
             </ul>
           </div>
         </div>
-        <div class="col-md-9" role="main">
+        <main class="col-md-9" role="main">
           {{ content }}
-        </div>
+        </main>
       </div>
 
     </div>

public/js/vendor/bootstrap/js/tab.js

@@ -68,10 +68,12 @@
     function next() {
       $active
         .removeClass('active')
+        .attr('aria-selected', false)
         .find('> .dropdown-menu > .active')
         .removeClass('active')
 
       element.addClass('active')
+      element.attr('aria-selected', true)
 
       if (transition) {
         element[0].offsetWidth // reflow for transition

public/js/vendor/bootstrap/js/tests/unit/alert.js

@@ -32,7 +32,7 @@ $(function () {
         $.support.transition = false
 
         var alertHTML = '<div class="alert-message warning fade in">'
-          + '<a class="close" href="#" data-dismiss="alert">×</a>'
+          + '<a class="close" href="#" data-dismiss="alert" aria-label="Close">×</a>'
           + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
           + '</div>'
           , alert = $(alertHTML).appendTo('#qunit-fixture').alert()

public/less/site.less

@@ -95,6 +95,11 @@
 	li a {
 		text-indent: -20px;
 	}
+	ul.options-menu  {
+		list-style: none;
+		padding: 5px 0;
+		margin: 2px 10px 0 0;
+	}
 }
 
 .dropdown-toggle {
@@ -262,6 +267,7 @@
 }
 
 /* Task details page*/
+
 .task-header {
 	margin-bottom: 30px;
 
@@ -502,6 +508,10 @@ ul.date-links {
 		padding: 0;
 		margin: 0;
 	}
+	.dates-list > li:first-child a {
+		font-weight: bold;
+		font-size: 16px;
+	}
 
 	.dates-list a {
 		color: #fff;
@@ -709,6 +719,16 @@ ul.date-links {
 	}
 }
 
+/* Edit task page */
+
+#skipRules {
+	position: absolute;
+	left: -999px;
+}
+#skipRules:focus {
+	position: static;
+}
+
 /* inline link list */
 
 .inline-list {
@@ -760,3 +780,7 @@ ul.date-links {
 		opacity: 1;
 	};
 }
+
+section {
+	margin: 1em 0;
+}