Skip to content

Commit c26ed7e

Browse files
bors-voyager[bot]bors-voyager[bot]
committed
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!
2 parents fac6915 + 0682d78 commit c26ed7e

24 files changed

+297
-68
lines changed

‎app/components/user-avatar.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { computed } from '@ember/object';
55
export default Component.extend({
66
size: 'small',
77
user: null,
8-
attributeBindings: ['src', 'width', 'height'],
8+
attributeBindings: ['src', 'width', 'height', 'alt'],
99
tagName: 'img',
1010

1111
width: computed('size', function() {
@@ -20,6 +20,10 @@ export default Component.extend({
2020

2121
height: readOnly('width'),
2222

23+
alt: computed('user', function() {
24+
return `${this.get('user.name')} (${this.get('user.login')})`;
25+
}),
26+
2327
src: computed('size', 'user', function() {
2428
return `${this.get('user.avatar')}&s=${this.get('width') * 2}`;
2529
})

‎app/styles/app.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ body {
8484

8585
button {
8686
background: none;
87-
outline: 0;
8887
border: 0;
8988
padding: 10px 0;
9089

@@ -130,7 +129,6 @@ body {
130129
font-size: 90%;
131130
border: none;
132131
color: black;
133-
outline: 0;
134132
margin-left: 30px;
135133
padding: 5px 5px 5px 25px;
136134
background-color: white;
@@ -141,6 +139,15 @@ body {
141139
@include border-radius(15px);
142140
}
143141

142+
form.search label {
143+
position: absolute;
144+
left: -10000px;
145+
top: auto;
146+
width: 1px;
147+
height: 1px;
148+
overflow: hidden;
149+
}
150+
144151
#header input.search {
145152
width: 100%;
146153
margin-left: 16px;

‎app/styles/crate.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,12 @@
190190
font-size: 90%;
191191
margin-bottom: 20px;
192192

193+
ol {
194+
list-style: none;
195+
padding: 0;
196+
}
197+
ol, li { display: inline; }
198+
193199
a {
194200
color: $main-color-light;
195201
text-decoration: none;

‎app/styles/home.scss

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
margin-right: 10px;
2121
}
2222

23-
&:hover { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
23+
&:hover, &:focus { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
2424
&.active { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
2525
&[disabled] {
2626
@include vertical-gradient($start_light, $end_light);
@@ -111,9 +111,17 @@ button.small {
111111
line-height: 20px;
112112
}
113113

114-
> div { margin: 0 15px; }
114+
> section { margin: 0 15px; }
115115

116-
ul { list-style: none; padding: 0; }
116+
> section[aria-busy="true"] > h2::after {
117+
content: '';
118+
background-image: url('/assets/ajax-loader.gif');
119+
display: inline-block;
120+
height: 16px;
121+
width: 16px;
122+
}
123+
124+
ul, ol { list-style: none; padding: 0; }
117125
li { margin: 8px 0; }
118126

119127
li a {
@@ -143,7 +151,7 @@ button.small {
143151
@include flex-wrap(wrap);
144152
@include justify-content(left);
145153

146-
> div {
154+
> section {
147155
margin: 0;
148156
padding: 0 15px;
149157
width: 33.33%;

‎app/styles/me.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@
177177
margin-bottom: 20px;
178178
background-color: $bg;
179179
color: white;
180-
&:hover { background-color: darken($bg, 10%); }
180+
&:hover, &:focus { background-color: darken($bg, 10%); }
181181
}
182182
}
183183

‎app/templates/application.hbs

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{{title "Cargo: packages for Rust" separator=' - ' prepend=true}}
22
{{google-jsapi}}
33

4-
<a href='https://github.com/rust-lang/crates.io' class='fork-me'>
5-
<img src='/assets/forkme.png'/>
6-
</a>
7-
8-
<div id="header">
9-
{{#link-to "index"}}
4+
<nav id="header">
5+
{{#link-to "index" tabindex="-1"}}
106
<img src="/assets/Cargo-Logo-Small.png" id="logo"
117
height=100 width=100 alt="Cargo Logo"/>
128
{{/link-to}}
@@ -23,9 +19,9 @@
2319
value={{searchQuery}}
2420
oninput={{action (mut searchQuery) value="target.value"}}
2521
autofocus="autofocus"
26-
tabindex="1"
2722
required
2823
data-test-search-input>
24+
<label for="cargo-desktop-search">Search</label>
2925
</form>
3026

3127
<div class='nav'>
@@ -100,25 +96,25 @@
10096

10197
<div class='links'>
10298
</div>
103-
</div>
99+
</nav>
104100

105101
<form id='mobile-search' class='search' action='/search' {{ action "search" on="submit" }} >
106-
<input type="text" class="search" name="q"
102+
<input type="text" class="search" name="q" id="cargo-mobile-search"
107103
placeholder="Search"
108104
value={{searchQuery}}
109105
oninput={{action (mut searchQuery) value="target.value"}}
110106
autocorrect="off"
111-
tabindex="1"
112107
required>
108+
<label for="cargo-mobile-search">Search</label>
113109
</form>
114110

115-
<div id="main" class='inner-content'>
111+
<main id="main" class='inner-content'>
116112
{{flash-message}}
117113

118114
{{outlet}}
119-
</div>
115+
</main>
120116

121-
<div class='after-main-links'>
117+
<footer class='after-main-links'>
122118
{{#link-to 'install'}}Install{{/link-to}}
123119
<span class="sep">|</span>
124120
<a href='http://doc.crates.io'>Getting Started</a>
@@ -128,4 +124,8 @@
128124
<a href='mailto:[email protected]'>Send us an email</a>
129125
<span class="sep">|</span>
130126
{{#link-to 'policies'}}Policies{{/link-to}}
131-
</div>
127+
</footer>
128+
129+
<a href='https://github.com/rust-lang/crates.io' class='fork-me'>
130+
<img src='/assets/forkme.png' alt="Fork me on GitHub" />
131+
</a>

‎app/templates/components/crate-list.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ul>
1+
<ol>
22
{{#each crates as |crate index|}}
33
<li>
44
{{#link-to 'crate' crate.id class='name' data-test-crate-link=index}}
@@ -9,4 +9,4 @@
99
{{/link-to}}
1010
</li>
1111
{{/each}}
12-
</ul>
12+
</ol>

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<li>
2-
{{#link-to 'crate' dep.crate_id}}
3-
{{ dep.crate_id }} {{ format-req dep.req }}
4-
{{/link-to}}
5-
{{#if dep.optional}}
6-
<span class='optional'>optional</span>
7-
{{/if}}
8-
</li>
1+
{{#link-to 'crate' dep.crate_id}}
2+
{{ dep.crate_id }} {{ format-req dep.req }}
3+
{{/link-to}}
4+
{{#if dep.optional}}
5+
<span class='optional'>optional</span>
6+
{{/if}}

‎app/templates/crate/owners.hbs

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@
1010
<h2>Add Owner</h2>
1111

1212
<div class="row">
13-
<div class="label">
14-
<dt>Username</dt>
15-
</div>
16-
1713
<form class="email-form" {{action 'addOwner' on='submit'}}>
18-
{{input type='text' value=username placeholder='Username' class='form-control space-right' name='username'}}
14+
<label class="label" for='new-owner-username'>
15+
Username
16+
</label>
17+
{{input type='text' id='new-owner-username' value=username placeholder='Username' class='form-control space-right' name='username'}}
1918

2019
{{#if error}}
2120
<div class='error'>

‎app/templates/crate/version.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
7575

7676
{{#if (is-clipboard-supported)}}
77-
{{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError')}}
77+
{{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError') title="Copy to clipboard"}}
7878
{{svg-jar "copy" alt="Copy to clipboard"}}
7979
{{/copy-button}}
8080
{{/if}}
@@ -92,9 +92,9 @@
9292
</span>
9393
</div>
9494
{{#if crate.readme}}
95-
<div class="crate-readme">
95+
<section class="crate-readme" aria-label="Readme">
9696
{{crate-readme rendered=crate.readme}}
97-
</div>
97+
</section>
9898
{{else}}
9999
{{#if crate.description}}
100100
<div class='about'>
@@ -104,7 +104,7 @@
104104
{{/if}}
105105
{{/if}}
106106
</div>
107-
<div class='authorship'>
107+
<section class='authorship' aria-label="Crate metadata">
108108
<div class='top'>
109109
<div>
110110
<div class='last-update'><span class='small'>Last Updated</span></div>
@@ -225,7 +225,7 @@
225225
<h3>Dependencies</h3>
226226
<ul>
227227
{{#each currentDependencies as |dep|}}
228-
{{link-to-dep dep=dep}}
228+
{{link-to-dep tagName="li" dep=dep}}
229229
{{else}}
230230
<li>None</li>
231231
{{/each}}
@@ -243,7 +243,7 @@
243243
</div>
244244
{{/if}}
245245
</div>
246-
</div>
246+
</section>
247247
</div>
248248

249249
<div id='crate-downloads'>

‎app/templates/crates.hbs

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,20 @@
7171
{{/each}}
7272
</div>
7373

74-
<div class='pagination'>
74+
<nav class='pagination' aria-label="Pagination navigation">
7575
{{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page" data-test-pagination-prev=true}}
7676
{{svg-jar "left-pag"}}
7777
{{/link-to}}
78-
{{#each pages as |page|}}
79-
{{#link-to (query-params page=page)}}
80-
{{ page }}
81-
{{/link-to}}
82-
{{/each}}
78+
<ol>
79+
{{#each pages as |page|}}
80+
<li>
81+
{{#link-to (query-params page=page) title=(concat "Go to page " page)}}
82+
{{ page }}
83+
{{/link-to}}
84+
</li>
85+
{{/each}}
86+
</ol>
8387
{{#link-to (query-params page=nextPage) class="next" rel="next" title="next page" data-test-pagination-next=true}}
8488
{{svg-jar "right-pag"}}
8589
{{/link-to}}
86-
</div>
90+
</nav>

‎app/templates/index.hbs

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -36,28 +36,28 @@
3636
</div>
3737

3838
<div id='home-crates' class='crate-lists'>
39-
<div id='new-crates' data-test-new-crates>
40-
<h2>New Crates {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
39+
<section id='new-crates' data-test-new-crates aria-busy="{{dataTask.isRunning}}">
40+
<h2>New Crates</h2>
4141
{{crate-list crates=model.new_crates}}
42-
</div>
43-
<div id='most-downloaded' data-test-most-downloaded>
44-
<h2>Most Downloaded {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
42+
</section>
43+
<section id='most-downloaded' data-test-most-downloaded aria-busy="{{dataTask.isRunning}}">
44+
<h2>Most Downloaded</h2>
4545
{{crate-list crates=model.most_downloaded}}
46-
</div>
47-
<div id='just-updated' data-test-just-updated>
48-
<h2>Just Updated {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
46+
</section>
47+
<section id='just-updated' data-test-just-updated aria-busy="{{dataTask.isRunning}}">
48+
<h2>Just Updated</h2>
4949
{{crate-list crates=model.just_updated}}
50-
</div>
51-
<div id='most-recently-downloaded' data-test-most-recently-downloaded>
52-
<h2>Most Recent Downloads {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
50+
</section>
51+
<section id='most-recently-downloaded' data-test-most-recently-downloaded aria-busy="{{dataTask.isRunning}}">
52+
<h2>Most Recent Downloads</h2>
5353
{{crate-list crates=model.most_recently_downloaded}}
54-
</div>
55-
<div id='keywords' data-test-keywords>
56-
<h2>Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}} {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
54+
</section>
55+
<section id='keywords' data-test-keywords aria-busy="{{dataTask.isRunning}}">
56+
<h2>Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}}</h2>
5757
{{keyword-list keywords=model.popular_keywords}}
58-
</div>
59-
<div id='categories' data-test-categories>
60-
<h2>Popular Categories {{#link-to 'categories'}}(see all){{/link-to}} {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
58+
</section>
59+
<section id='categories' data-test-categories aria-busy="{{dataTask.isRunning}}">
60+
<h2>Popular Categories {{#link-to 'categories'}}(see all){{/link-to}}</h2>
6161
{{category-list categories=model.popular_categories}}
62-
</div>
62+
</section>
6363
</div>

‎config/environment.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ module.exports = function(environment) {
3939
// ENV.APP.LOG_TRANSITIONS = true;
4040
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
4141
// ENV.APP.LOG_VIEW_LOOKUPS = true;
42+
ENV['ember-a11y-testing'] = {
43+
componentOptions: {
44+
turnAuditOff: true,
45+
}
46+
};
4247
}
4348

4449
if (environment === 'test') {

0 commit comments

Comments
 (0)