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()