Merge #1227

1227: Accessibility fixes (and tests) r=carols10cents

Most commits have a message explaining why I think the change is necessary. Let me know if anything is unclear or if I should follow up with other changes.

Shoutout to @chriskrycho for his talk [Becoming a Contributor](https://www.youtube.com/watch?v=Abu2BNixXak) which encouraged me to do this!

Author: bors-voyager[bot]

app/components/user-avatar.js

@@ -5,7 +5,7 @@ import { computed } from '@ember/object';
 export default Component.extend({
     size: 'small',
     user: null,
-    attributeBindings: ['src', 'width', 'height'],
+    attributeBindings: ['src', 'width', 'height', 'alt'],
     tagName: 'img',
 
     width: computed('size', function() {
@@ -20,6 +20,10 @@ export default Component.extend({
 
     height: readOnly('width'),
 
+    alt: computed('user', function() {
+        return `${this.get('user.name')} (${this.get('user.login')})`;
+    }),
+
     src: computed('size', 'user', function() {
         return `${this.get('user.avatar')}&s=${this.get('width') * 2}`;
     })

app/styles/app.scss

@@ -84,7 +84,6 @@ body {
 
     button {
         background: none;
-        outline: 0;
         border: 0;
         padding: 10px 0;
 
@@ -130,7 +129,6 @@ body {
     font-size: 90%;
     border: none;
     color: black;
-    outline: 0;
     margin-left: 30px;
     padding: 5px 5px 5px 25px;
     background-color: white;
@@ -141,6 +139,15 @@ body {
     @include border-radius(15px);
 }
 
+form.search label {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
 #header input.search {
     width: 100%;
     margin-left: 16px;

app/styles/crate.scss

@@ -190,6 +190,12 @@
     font-size: 90%;
     margin-bottom: 20px;
 
+    ol {
+        list-style: none;
+        padding: 0;
+    }
+    ol, li { display: inline; }
+
     a {
         color: $main-color-light;
         text-decoration: none;

app/styles/home.scss

@@ -20,7 +20,7 @@
         margin-right: 10px;
     }
 
-    &:hover { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
+    &:hover, &:focus { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
     &.active { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
     &[disabled] {
         @include vertical-gradient($start_light, $end_light);
@@ -111,9 +111,17 @@ button.small {
         line-height: 20px;
     }
 
-    > div { margin: 0 15px; }
+    > section { margin: 0 15px; }
 
-    ul { list-style: none; padding: 0; }
+    > section[aria-busy="true"] > h2::after {
+        content: '';
+        background-image: url('/assets/ajax-loader.gif');
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+    }
+
+    ul, ol { list-style: none; padding: 0; }
     li { margin: 8px 0; }
 
     li a {
@@ -143,7 +151,7 @@ button.small {
     @include flex-wrap(wrap);
     @include justify-content(left);
 
-    > div {
+    > section {
       margin: 0;
       padding: 0 15px;
       width: 33.33%;

app/styles/me.scss

@@ -177,7 +177,7 @@
         margin-bottom: 20px;
         background-color: $bg;
         color: white;
-        &:hover { background-color: darken($bg, 10%); }
+        &:hover, &:focus { background-color: darken($bg, 10%); }
     }
 }
 

app/templates/application.hbs

@@ -1,12 +1,8 @@
 {{title "Cargo: packages for Rust" separator=' - ' prepend=true}}
 {{google-jsapi}}
 
-<a href='https://github.com/rust-lang/crates.io' class='fork-me'>
-  <img src='/assets/forkme.png'/>
-</a>
-
-<div id="header">
-    {{#link-to "index"}}
+<nav id="header">
+    {{#link-to "index" tabindex="-1"}}
         <img src="/assets/Cargo-Logo-Small.png" id="logo"
              height=100 width=100 alt="Cargo Logo"/>
     {{/link-to}}
@@ -23,9 +19,9 @@
                 value={{searchQuery}}
                 oninput={{action (mut searchQuery) value="target.value"}}
                 autofocus="autofocus"
-                tabindex="1"
                 required
                 data-test-search-input>
+        <label for="cargo-desktop-search">Search</label>
     </form>
 
     <div class='nav'>
@@ -100,25 +96,25 @@
 
     <div class='links'>
     </div>
-</div>
+</nav>
 
 <form id='mobile-search' class='search' action='/search' {{ action "search" on="submit" }} >
-    <input type="text" class="search" name="q"
+    <input type="text" class="search" name="q" id="cargo-mobile-search"
             placeholder="Search"
             value={{searchQuery}}
             oninput={{action (mut searchQuery) value="target.value"}}
             autocorrect="off"
-            tabindex="1"
             required>
+    <label for="cargo-mobile-search">Search</label>
 </form>
 
-<div id="main" class='inner-content'>
+<main id="main" class='inner-content'>
     {{flash-message}}
 
     {{outlet}}
-</div>
+</main>
 
-<div class='after-main-links'>
+<footer class='after-main-links'>
     {{#link-to 'install'}}Install{{/link-to}}
     <span class="sep">|</span>
     <a href='http://doc.crates.io'>Getting Started</a>
@@ -128,4 +124,8 @@
     <a href='mailto:[email protected]'>Send us an email</a>
     <span class="sep">|</span>
     {{#link-to 'policies'}}Policies{{/link-to}}
-</div>
+</footer>
+
+<a href='https://github.com/rust-lang/crates.io' class='fork-me'>
+  <img src='/assets/forkme.png' alt="Fork me on GitHub" />
+</a>

app/templates/components/crate-list.hbs

@@ -1,4 +1,4 @@
-<ul>
+<ol>
     {{#each crates as |crate index|}}
         <li>
             {{#link-to 'crate' crate.id class='name' data-test-crate-link=index}}
@@ -9,4 +9,4 @@
             {{/link-to}}
         </li>
     {{/each}}
-</ul>
+</ol>

app/templates/components/link-to-dep.hbs

@@ -1,8 +1,6 @@
-<li>
-  {{#link-to 'crate' dep.crate_id}}
-      {{ dep.crate_id }} {{ format-req dep.req }}
-  {{/link-to}}
-  {{#if dep.optional}}
-      <span class='optional'>optional</span>
-  {{/if}}
-</li>
+{{#link-to 'crate' dep.crate_id}}
+    {{ dep.crate_id }} {{ format-req dep.req }}
+{{/link-to}}
+{{#if dep.optional}}
+    <span class='optional'>optional</span>
+{{/if}}

app/templates/crate/owners.hbs

@@ -10,12 +10,11 @@
     <h2>Add Owner</h2>
 
     <div class="row">
-        <div class="label">
-            <dt>Username</dt>
-        </div>
-
         <form class="email-form" {{action 'addOwner' on='submit'}}>
-            {{input type='text' value=username placeholder='Username' class='form-control space-right' name='username'}}
+            <label class="label" for='new-owner-username'>
+                Username
+            </label>
+            {{input type='text' id='new-owner-username' value=username placeholder='Username' class='form-control space-right' name='username'}}
 
             {{#if error}}
                 <div class='error'>

app/templates/crate/version.hbs

@@ -74,7 +74,7 @@
             <code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
 
             {{#if (is-clipboard-supported)}}
-              {{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError')}}
+              {{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError') title="Copy to clipboard"}}
                     {{svg-jar "copy" alt="Copy to clipboard"}}
                 {{/copy-button}}
             {{/if}}
@@ -92,9 +92,9 @@
             </span>
         </div>
         {{#if crate.readme}}
-            <div class="crate-readme">
+            <section class="crate-readme" aria-label="Readme">
                 {{crate-readme rendered=crate.readme}}
-            </div>
+            </section>
         {{else}}
             {{#if crate.description}}
                 <div class='about'>
@@ -104,7 +104,7 @@
             {{/if}}
         {{/if}}
     </div>
-    <div class='authorship'>
+    <section class='authorship' aria-label="Crate metadata">
         <div class='top'>
             <div>
                 <div class='last-update'><span class='small'>Last Updated</span></div>
@@ -225,7 +225,7 @@
                 <h3>Dependencies</h3>
                     <ul>
                         {{#each currentDependencies as |dep|}}
-                            {{link-to-dep dep=dep}}
+                            {{link-to-dep tagName="li" dep=dep}}
                         {{else}}
                             <li>None</li>
                         {{/each}}
@@ -243,7 +243,7 @@
                 </div>
             {{/if}}
         </div>
-    </div>
+    </section>
 </div>
 
 <div id='crate-downloads'>