Skip to content

Accessibility fixes (and tests) #1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Jan 17, 2018
Merged

Accessibility fixes (and tests) #1227

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
0929810
fix(templates/application): Add labels to search input fields
sorin-davidoi Jan 9, 2018
c00715f
fix(templates/application): Logo should not be focusable
sorin-davidoi Jan 9, 2018
dd877cc
fix(styles/home/button): Use hover style for focus
sorin-davidoi Jan 9, 2018
d3ff8cd
fix(templates/application): Use semantics HTML tags (nav, main, footer)
sorin-davidoi Jan 9, 2018
bd4c191
fix(templates/index): Use section for each crate list
sorin-davidoi Jan 9, 2018
89c8ede
fix(templates/components/crate-list): Use ol instead of ul
sorin-davidoi Jan 9, 2018
3e94117
fix(templates/application): Remove tabindex="1" from search fields
sorin-davidoi Jan 9, 2018
f0c8377
fix(templates/application): Add alt text for the "For me on GitHub" link
sorin-davidoi Jan 9, 2018
72407de
fix(styles/app/button): Do not set outline: 0
sorin-davidoi Jan 9, 2018
522eb3e
fix(styles/me): Set focus style for load more button
sorin-davidoi Jan 9, 2018
1aa4b29
fix(templates/application): Move fork button to the end of the document
sorin-davidoi Jan 9, 2018
ea4fb9c
fix(componentns/user-avatar): Add alt text (name, username)
sorin-davidoi Jan 9, 2018
961ba48
fix(crate/version): Nest li directly inside ul
sorin-davidoi Jan 9, 2018
7c58178
fix(templates/crate/version): Add title to copy-to-clipboard button
sorin-davidoi Jan 9, 2018
c27533d
feat(templates/crate/version): Use section for readme and authorship
sorin-davidoi Jan 9, 2018
4a36d50
fix(templates/crate/owners): Add label to username input field
sorin-davidoi Jan 9, 2018
274c841
chore(npm/dev-dependencies): Install ember-a11y-testing
sorin-davidoi Jan 10, 2018
ed4333a
test(acceptance): Create accessibility tests
sorin-davidoi Jan 10, 2018
1ff0a23
feat(config/environment): Disable accessibility audit in during devel…
sorin-davidoi Jan 10, 2018
fc5a680
fix(templates/index): Use aria-busy and show loader using CSS
sorin-davidoi Jan 10, 2018
2cd5ac1
fix(templates/crates): Make pagination accessible
sorin-davidoi Jan 10, 2018
8d2157a
fix(templates/crate/version): Change aria-label to Crate metadata
sorin-davidoi Jan 14, 2018
e7a8209
fix(styles/home): Update custom home crate style from div to section
sorin-davidoi Jan 14, 2018
0682d78
fix(themes/application): Invalid markup
sorin-davidoi Jan 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,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;
Expand Down
4 changes: 2 additions & 2 deletions app/styles/home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -111,7 +111,7 @@ button.small {
line-height: 20px;
}

> div { margin: 0 15px; }
> section { margin: 0 15px; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the div on line 146 of this file needs to be updated to a section as well, otherwise the columns on the home page take up a variable amount of width when they should be taking up ~1/3 of the width, which starts happening at this commit.


ul { list-style: none; padding: 0; }
li { margin: 8px 0; }
Expand Down
18 changes: 10 additions & 8 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<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}}
Expand All @@ -26,6 +26,7 @@
tabindex="1"
required
data-test-search-input>
<label for="cargo-desktop-search">Search</label>
</form>

<div class='nav'>
Expand Down Expand Up @@ -100,25 +101,26 @@

<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'>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not ideal since each page should define it's own main - but I'm not familiar enough with the pages and don't have time to go through them all, so I think this is good enough for now.

{{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>
Expand All @@ -128,4 +130,4 @@
<a href='mailto:[email protected]'>Send us an email</a>
<span class="sep">|</span>
{{#link-to 'policies'}}Policies{{/link-to}}
</div>
</footer>
24 changes: 12 additions & 12 deletions app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,28 +36,28 @@
</div>

<div id='home-crates' class='crate-lists'>
<div id='new-crates' data-test-new-crates>
<section id='new-crates' data-test-new-crates>
<h2>New Crates {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{crate-list crates=model.new_crates}}
</div>
<div id='most-downloaded' data-test-most-downloaded>
</section>
<section id='most-downloaded' data-test-most-downloaded>
<h2>Most Downloaded {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{crate-list crates=model.most_downloaded}}
</div>
<div id='just-updated' data-test-just-updated>
</section>
<section id='just-updated' data-test-just-updated>
<h2>Just Updated {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{crate-list crates=model.just_updated}}
</div>
<div id='most-recently-downloaded' data-test-most-recently-downloaded>
</section>
<section id='most-recently-downloaded' data-test-most-recently-downloaded>
<h2>Most Recent Downloads {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{crate-list crates=model.most_recently_downloaded}}
</div>
<div id='keywords' data-test-keywords>
</section>
<section id='keywords' data-test-keywords>
<h2>Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}} {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{keyword-list keywords=model.popular_keywords}}
</div>
<div id='categories' data-test-categories>
</section>
<section id='categories' data-test-categories>
<h2>Popular Categories {{#link-to 'categories'}}(see all){{/link-to}} {{#if dataTask.isRunning}}<img src="/assets/ajax-loader.gif">{{/if}}</h2>
{{category-list categories=model.popular_categories}}
</div>
</section>
</div>