Improve markup and accessibility

Ref #305

assets/javascripts/templates/notice_tmpl.coffee

@@ -6,4 +6,4 @@ app.templates.singleDocNotice = (doc) ->
 
 app.templates.disabledDocNotice = ->
   notice """ <strong>This documentation is currently disabled.</strong>
-             To enable it, click <a class="_notice-link" data-pick-docs>Select documentation</a>. """
+             To enable it, click <a href="#" class="_notice-link" data-pick-docs>Select documentation</a>. """

assets/javascripts/templates/notif_tmpl.coffee

@@ -1,6 +1,6 @@
 notif = (title, html) ->
   html = html.replace /<a /g, '<a class="_notif-link" '
-  """<h5 class="_notif-title">#{title}</h5>#{html}<a href="#" class="_notif-close"></a>"""
+  """<h5 class="_notif-title">#{title}</h5>#{html}<button type="button" class="_notif-close" title="Close">Close</a>"""
 
 textNotif = (title, message) ->
   notif title, """<p class="_notif-text">#{message}"""

assets/javascripts/templates/pages/about_tmpl.coffee

@@ -1,5 +1,5 @@
 app.templates.aboutPage = -> """
-  <div class="_toc">
+  <nav class="_toc" role="directory">
     <h3 class="_toc-title">Table of Contents</h3>
     <ul class="_toc-list">
       <li><a href="#credits">Credits</a>
@@ -8,7 +8,7 @@ app.templates.aboutPage = -> """
       <li><a href="#plugins">Plugins</a>
       <li><a href="#privacy">Privacy Policy</a>
     </ul>
-  </div>
+  </nav>
 
   <h1 class="_lined-heading">API Documentation Browser</h1>
   <p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

assets/javascripts/templates/pages/help_tmpl.coffee

@@ -2,14 +2,14 @@ ctrlKey = if $.isMac() then 'cmd' else 'ctrl'
 navKey = if $.isWindows() then 'alt' else ctrlKey
 
 app.templates.helpPage = """
-  <div class="_toc">
+  <nav class="_toc" role="directory">
     <h3 class="_toc-title">Table of Contents</h3>
     <ul class="_toc-list">
       <li><a href="#search">Search</a>
       <li><a href="#shortcuts">Keyboard Shortcuts</a>
       <li><a href="#abbreviations">Abbreviations</a>
     </ul>
-  </div>
+  </nav>
 
   <h2 class="_lined-heading" id="search">Search</h2>
   <p>

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -67,10 +67,10 @@ sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>"""
 
 templates.sidebarSettings = ->
   sidebarFooter """
-    <a class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light></a>
-    <a class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout></a>
-    <a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
+    <button type="button" class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light>Toggle light</button>
+    <button type="button" class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout>Toggle layout</button>
+    <a href="#" class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
   """
 
 templates.sidebarSave = ->
-  sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save">Save</a>"""
+  sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save" role="button">Save</a>"""

assets/javascripts/views/layout/path.coffee

@@ -1,5 +1,7 @@
 class app.views.Path extends app.View
   @className: '_path'
+  @attributes:
+    role: 'complementary'
 
   @events:
     click: 'onClick'

assets/javascripts/views/misc/notice.coffee

@@ -1,5 +1,7 @@
 class app.views.Notice extends app.View
   @className: '_notice'
+  @attributes:
+    role: 'alert'
 
   constructor: (@type, @args...) -> super
 

assets/javascripts/views/misc/notif.coffee

@@ -1,6 +1,8 @@
 class app.views.Notif extends app.View
   @className: '_notif'
   @activeClass: '_in'
+  @attributes:
+    role: 'alert'
 
   @defautOptions:
     autoHide: 15000

assets/javascripts/views/sidebar/doc_list.coffee

@@ -1,5 +1,7 @@
 class app.views.DocList extends app.View
   @className: '_list'
+  @attributes:
+    role: 'navigation'
 
   @events:
     open:  'onOpen'

assets/javascripts/views/sidebar/doc_picker.coffee

@@ -1,5 +1,7 @@
 class app.views.DocPicker extends app.View
   @className: '_list _list-picker'
+  @attributes:
+    role: 'form'
 
   @elements:
     saveLink: '._sidebar-footer-save'

assets/javascripts/views/view.coffee

@@ -16,6 +16,10 @@ class app.View
       @constructor.el
     else
       document.createElement @constructor.tagName or 'div'
+
+    if @constructor.attributes
+      for key, value of @constructor.attributes
+        @el.setAttribute(key, value)
     return
 
   refreshElements: ->

assets/stylesheets/components/_header.scss

@@ -139,8 +139,10 @@
   top: .5em;
   right: 0;
   padding: .5em;
-  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
   opacity: .3;
+  @extend %content-box, %hide-text;
 
   &:hover { opacity: .5; }
   @if $style == 'dark' {

assets/stylesheets/components/_mobile.scss

@@ -155,11 +155,12 @@
   float: left;
   width: 2.5rem;
   height: 100%;
-  background: none;
-  border: 0;
   @extend %hide-text;
 
-  &[disabled] { opacity: .3; }
+  &[disabled] {
+    opacity: .3;
+    cursor: not-allowed;
+  }
 
   &:before {
     position: absolute;

assets/stylesheets/components/_notif.scss

@@ -43,9 +43,11 @@
   position: absolute;
   top: 0;
   right: 0;
+  width: 1rem;
+  height: 1rem;
   padding: .625rem;
   opacity: .9;
-  cursor: pointer;
+  @extend %content-box, %hide-text;
 
   &:before { @extend %icon, %icon-close-white; }
 }

assets/stylesheets/components/_sidebar.scss

@@ -434,6 +434,7 @@
   width: 2rem;
   padding: 0;
   opacity: .65;
+  @extend %hide-text;
 
   &:before {
     float: none;
@@ -454,6 +455,7 @@
   width: 2rem;
   padding: 0;
   opacity: .65;
+  @extend %hide-text;
 
   &:before {
     float: none;

assets/stylesheets/global/_base.scss

@@ -159,7 +159,7 @@ td {
   > pre:last-child, > p:last-child, > ul:last-child, > ol:last-child { margin-bottom: 0; }
 }
 
-input {
+input, button {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
@@ -168,7 +168,16 @@ input {
   @extend %border-box;
 }
 
-input[type="search"] { -webkit-appearance: none; }
+button {
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+button, input[type="search"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {

assets/stylesheets/global/_classes.scss

@@ -7,6 +7,11 @@
        box-sizing: border-box;
 }
 
+%content-box {
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
+}
+
 %user-select-none {
   -webkit-user-select: none;
      -moz-user-select: -moz-none;
@@ -17,7 +22,7 @@
 %hide-text {
   white-space: nowrap;
   overflow: hidden;
-  color: transparent;
+  color: transparent !important;
   @extend %user-select-none;
 }
 

views/app.erb

@@ -1,18 +1,18 @@
-<div class="_app<%= " #{app_layout}" if app_layout %>">
-  <header class="_header">
+<div class="_app<%= " #{app_layout}" if app_layout %>" role="application">
+  <header class="_header" role="banner">
     <button type="button" class="_mobile-btn _back-btn">Back</button>
     <button type="button" class="_mobile-btn _forward-btn">Forward</button>
     <button type="button" class="_mobile-btn _menu-btn">Menu</button>
     <button type="button" class="_mobile-btn _home-btn">Home</button>
-    <form class="_search">
+    <form class="_search" role="search">
       <input type="search" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
-      <a class="_search-clear"></a>
+      <button type="reset" class="_search-clear" title="Clear search">Clear search</button>
       <div class="_search-tag"></div>
     </form>
     <h1 class="_logo">
       <a href="/" class="_nav-link" title="Offline API Documentation Browser">DevDocs</a><%= "/ #{@doc['full_name']}" if @doc %>
     </h1>
-    <nav class="_nav">
+    <nav class="_nav" role="navigation">
       <a href="/offline" class="_nav-link">Offline</a>
       <a href="/about" class="_nav-link">About</a>
       <a href="/news" class="_nav-link">News</a>
@@ -20,7 +20,7 @@
     </nav>
   </header>
   <section class="_sidebar">
-    <div class="_list">
+    <div class="_list" role="navigation">
       <% unless @doc %>
       <% App.docs.each do |slug, doc| %>
       <a href="/<%= slug %>/" class="_list-item"><span class="_list-arrow"></span><%= doc['full_name'] %></a>
@@ -28,9 +28,9 @@
       <% end %>
     </div>
   </section>
-  <section class="_container">
-    <div class="_content _content-loading"></div>
-  </section>
+  <div class="_container" role="document">
+    <main class="_content _content-loading" role="main"></main>
+  </div>
 </div>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }