Merge pull request #246 from Jorys-Paulin/feature-a11y

Accessibility and keyboard support

index.html

@@ -14,7 +14,7 @@
 <div class="mdl-layout mdl-js-layout">
     <header id="main-navigation" class="mdl-layout__header mdl-layout__header--transparent">
         <div class="mdl-layout__header-row">
-            <span id='backIcon'><i class="material-icons">keyboard_arrow_left</i></span>
+            <button id="backIcon" class="mdl-button mdl-js-button mdl-button--icon" role="link" aria-label="Host selection"><i class="material-icons">keyboard_arrow_left</i></button>
             <!-- Title -->
             <span class="mdl-layout-title">MOON<span>LIGHT</span></span>
             <!-- Add spacer, to align navigation to the right -->
@@ -61,7 +61,7 @@
 
                     <div class="nav-menu-parent">
                         <div id="bandwidthMenu">
-                            <button id='bitrateField' class="mdl-button">10 Mbps</button>
+                            <button id="bitrateField" class="mdl-button">10 Mbps</button>
                         </div>
 
                         <div class="bitrateMenu mdl-menu mdl-js-menu mdl-js-ripple-effect" for="bandwidthMenu">
@@ -81,7 +81,7 @@
                         Remote audio
                     </div>
 
-                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp">
+                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp" aria-label="Quit current app">
                         <i class="material-icons">remove_circle_outline</i>
                         Quit Current App
                     </button>
@@ -91,8 +91,8 @@
     <main id="main-content" class="mdl-layout__content">
             <div id="host-grid">
                 <div class="page-title">Your PCs</div>
-                <div class="add-host-card mdl-card mdl-shadow--4dp" id='addHostCell'>
+                <div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
-                    <div class="mdl-card__title mdl-card--expand" id="addHostIcon">
+                    <div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
                         <h2 class="mdl-card__title-text" >Add Host</h2>
                     </div>
                 </div>
@@ -168,7 +168,7 @@
 </dialog>
 <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
     <div class="mdl-snackbar__text"></div>
-    <button id='snackButton' class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
+    <button id="snackButton" class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
 </div>
 </body>
 </html>

static/css/style.css

@@ -105,10 +105,7 @@ main {
     padding:25px;
 }
 #backIcon {
-    width: 32px;
-    height: 24px;
     position: fixed;
-    top: 16px;
     left: 28px;
 }
 #backIcon:hover {
@@ -191,7 +188,7 @@ main {
     cursor: pointer;
     transition: all .2s ease-in-out;
 }
-#host-grid .mdl-card:hover, #game-grid .mdl-card:hover {
+#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
     transform: scale(1.1);
 }
 #host-grid .mdl-card__title {

static/js/index.js

@@ -337,10 +337,10 @@ function addHost() {
 // host is an NvHTTP object
 function addHostToGrid(host, ismDNSDiscovered) {
 
-    var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid });
+    var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid, role: 'link', tabindex: 0, 'aria-label': host.hostname });
     var cell = $("<div>", {class: 'mdl-card__title mdl-card--expand', id: 'hostgrid-' + host.serverUid });
     $(cell).prepend($("<h2>", {class: "mdl-card__title-text", html: host.hostname}));
-    var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid});
+    var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid, role: 'button', tabindex: 0, 'aria-label': 'Remove host ' + host.hostname});
     removalButton.off('click');
     removalButton.click(function () {
         removeClicked(host);
@@ -349,6 +349,11 @@ function addHostToGrid(host, ismDNSDiscovered) {
     cell.click(function () {
         hostChosen(host);
     });
+    outerDiv.keypress(function(e){
+      if(e.keyCode == 13) {
+        hostChosen(host);
+      }
+    });
     $(outerDiv).append(cell);
     if (!ismDNSDiscovered) {
         // we don't have the option to delete mDNS hosts.  So don't show it to the user.
@@ -430,7 +435,7 @@ function showApps(host) {
                     // to mitigate this we ensure we don't add a duplicate.
                     // This isn't perfect: there's lots of RTTs before the logic prevents anything
                     var imageBlob =  new Blob([resolvedPromise], {type: "image/png"});
-                    var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob) });
+                    var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob), role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title });
                     $(outerDiv).append($("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }));
                     $(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
                     $("#game-grid").append(outerDiv);
@@ -440,6 +445,11 @@ function showApps(host) {
                     $('#game-'+app.id).on('click', function () {
                         startGame(host, app.id);
                     });
+                    $('#game-'+app.id).keypress(function(e){
+                      if(e.keyCode == 13) {
+                        startGame(host, app.id);
+                      }
+                    });
 
                     // apply CSS stylization to indicate whether the app is active
                     stylizeBoxArt(host, app.id);