improve accessibility

dermike · Apr 10, 2016 · ff0cc7f · ff0cc7f
1 parent 1306fe7
commit ff0cc7f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -42,6 +42,7 @@ body {
   font-size: 80px;
   text-align: center;
   margin: 0;
+  cursor: pointer;
 }
 
 body.error #header {
@@ -52,15 +53,15 @@ body.error #header {
   display: flex;
 }
 
-#status ul {
+#status {
   width: 100%;
   display: table;
   table-layout: fixed;
   margin: 0;
   padding: 0;
 }
 
-#status ul li {
+#status #message {
   display: table-cell;
   padding: 2.2em 1em;
 }

diff --git a/index.html b/index.html
@@ -9,9 +9,9 @@
   </head>
   <body class="error">
 
-    <div id="dialog" class="hide">
+    <div id="dialog" class="hide" aria-hidden="true">
       <div class="vertical-center" style="height: 45px; width: 80%;">
-        <input type="text" id="input" />
+        <input type="text" id="input" aria-label="Enter URL to broadcast" />
         <input type="submit" id="submit" value="Set" />
         <div class="labels">
           <div class="label desc">Broadcast URL using:</div>
@@ -21,11 +21,12 @@
       </div>
     </div>
 
-    <div id="status"><ul><li id="message"></li></ul></div>
     <div id="eddystone" class="vertical-center">
-      <h1 id="header"></h1>
+      <h1 id="header" role="button" tabindex="1" aria-controls="dialog" aria-describedby="message"></h1>
     </div>
 
+    <div id="status"><span id="message" role="status"></span></div>
+
     <script src="js/app.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -6,6 +6,19 @@
     dialog = document.getElementById('dialog'),
     input = document.getElementById('input');
 
+  function showDialog(show) {
+    if (show) {
+      header.setAttribute('tabindex', '-1');
+      dialog.classList.remove('hide');
+      dialog.setAttribute('aria-hidden', 'false');
+      input.focus();
+    } else {
+      header.setAttribute('tabindex', '1')
+      dialog.classList.add('hide');
+      dialog.setAttribute('aria-hidden', 'true');
+    }
+  }
+
   ipc.on('status', (event, message) => {
     if (message.length === 3) {
       status.innerHTML = message[0];
@@ -19,8 +32,7 @@
   });
 
   ipc.on('enter-url', () => {
-    dialog.classList.remove('hide');
-    input.focus();
+    showDialog(true);
   });
 
   ipc.on('mode', (event, message) => {
@@ -38,7 +50,7 @@
 
   function setUrl(url) {
     input.value = '';
-    dialog.classList.add('hide');
+    showDialog(false);
     if (url) {
       ipc.send('set-url', url);
     }
@@ -65,18 +77,28 @@
       toggleMode(e.target);
       break;
     case 'dialog':
-      e.target.classList.add('hide');
+      showDialog(false);
       break;
     default:
       break;
     }
   });
 
+  header.addEventListener('click', () => {
+    showDialog(true);
+  });
+
+  header.addEventListener('keydown', e => {
+    if (e.keyCode === 13 || e.keyCode === 32) {
+      showDialog(true);
+    }
+  });
+
   document.addEventListener('keydown', e => {
     if (e.target.id === 'input' && e.keyCode === 13) {
       setUrl(input.value);
     } else if (e.keyCode === 27) {
-      dialog.classList.add('hide');
+      showDialog(false);
       input.value = '';
     }
   });

diff --git a/main.js b/main.js
@@ -130,7 +130,7 @@ app.on('ready', () => {
           'click': () => {
             EddystoneBeacon.stop();
             stopMdns();
-            mainWindow.webContents.send('status', ['Use reveal.js presentation plugin or <span class="key" aria-label="command">&#8984;</span> + <span class="key">B</span> to enter', 'Waiting', true]);
+            mainWindow.webContents.send('status', ['Use reveal.js presentation plugin or <span class="key" aria-label="command">&#8984;</span> + <span class="key">B</span> to enter URL', 'Waiting', true]);
           }
         },
         {
@@ -183,7 +183,7 @@ app.on('ready', () => {
   });
 
   mainWindow.webContents.on('did-finish-load', () => {
-    mainWindow.webContents.send('status', ['Use reveal.js presentation plugin or <span class="key" aria-label="command">&#8984;</span> + <span class="key">B</span> to enter', 'Waiting', true]);
+    mainWindow.webContents.send('status', ['Use reveal.js presentation plugin or <span class="key" aria-label="command">&#8984;</span> + <span class="key">B</span> to enter URL', 'Waiting', true]);
   });
 
   wss.on('connection', ws => {