From 0929810becd7b08463ee974c562975d3bb7014b4 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 9 Jan 2018 21:00:08 +0100 Subject: [PATCH 01/24] fix(templates/application): Add labels to search input fields Labels are hidden, but still accessible for screen readers (https://webaim.org/techniques/css/invisiblecontent/#absolutepositioning). --- app/styles/app.scss | 9 +++++++++ app/templates/application.hbs | 4 +++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/styles/app.scss b/app/styles/app.scss index d21c08f0ae3..aefcc507402 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -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; diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 8e60329cfdc..40bf61aa631 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -26,6 +26,7 @@ tabindex="1" required data-test-search-input> +
@@ -103,13 +104,14 @@
From c00715ffed5ac738f4747f388bfe6bfea859bd0a Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 9 Jan 2018 22:32:32 +0100 Subject: [PATCH 02/24] fix(templates/application): Logo should not be focusable When using tab to navigate between focusable elements, it does not make sense to have two adjacent links pointing to the same address. Another solution would be to place the img tag inside the second address tag, but that leads to some style issue so I have opted for this approach instead. --- app/templates/application.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 40bf61aa631..c5211d0efda 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -6,7 +6,7 @@
-
+

New Crates {{#if dataTask.isRunning}}{{/if}}

{{crate-list crates=model.new_crates}} -
-
+ +

Most Downloaded {{#if dataTask.isRunning}}{{/if}}

{{crate-list crates=model.most_downloaded}} -
-
+ +

Just Updated {{#if dataTask.isRunning}}{{/if}}

{{crate-list crates=model.just_updated}} -
-
+ +

Most Recent Downloads {{#if dataTask.isRunning}}{{/if}}

{{crate-list crates=model.most_recently_downloaded}} -
-
+ +

Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}} {{#if dataTask.isRunning}}{{/if}}

{{keyword-list keywords=model.popular_keywords}} -
-
+ +

Popular Categories {{#link-to 'categories'}}(see all){{/link-to}} {{#if dataTask.isRunning}}{{/if}}

{{category-list categories=model.popular_categories}} -
+
From 89c8edecc8e2ea9ec6f4f9f7131fa2edd87738bd Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 9 Jan 2018 22:51:47 +0100 Subject: [PATCH 06/24] fix(templates/components/crate-list): Use ol instead of ul Semantically, the crates are sorted by time, so usage of ul is incorrect. --- app/styles/home.scss | 2 +- app/templates/components/crate-list.hbs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/styles/home.scss b/app/styles/home.scss index 51e795bf27a..fb5b23cf200 100644 --- a/app/styles/home.scss +++ b/app/styles/home.scss @@ -113,7 +113,7 @@ button.small { > section { margin: 0 15px; } - ul { list-style: none; padding: 0; } + ul, ol { list-style: none; padding: 0; } li { margin: 8px 0; } li a { diff --git a/app/templates/components/crate-list.hbs b/app/templates/components/crate-list.hbs index 8c3dbb91073..f13d4061ffb 100644 --- a/app/templates/components/crate-list.hbs +++ b/app/templates/components/crate-list.hbs @@ -1,4 +1,4 @@ -
    +
      {{#each crates as |crate index|}}
    1. {{#link-to 'crate' crate.id class='name' data-test-crate-link=index}} @@ -9,4 +9,4 @@ {{/link-to}}
      2. {{/each}} -
+ From 3e94117ca9b2a9a8f412666bb476a09f64faf299 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 9 Jan 2018 22:54:47 +0100 Subject: [PATCH 07/24] fix(templates/application): Remove tabindex="1" from search fields It is important not to break the focus order users expect. https://dequeuniversity.com/rules/axe/2.6/tabindex --- app/templates/application.hbs | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 95db4307041..5792e10fcd4 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -23,7 +23,6 @@ value={{searchQuery}} oninput={{action (mut searchQuery) value="target.value"}} autofocus="autofocus" - tabindex="1" required data-test-search-input> @@ -109,7 +108,6 @@ value={{searchQuery}} oninput={{action (mut searchQuery) value="target.value"}} autocorrect="off" - tabindex="1" required> From f0c83777b0d8e04854f956190004707d54125e2e Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 9 Jan 2018 22:58:42 +0100 Subject: [PATCH 08/24] fix(templates/application): Add alt text for the "For me on GitHub" link --- app/templates/application.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 5792e10fcd4..62e976b704e 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -2,7 +2,7 @@ {{google-jsapi}} - + Fork me on GitHub
{{#if crate.readme}} -
+
{{crate-readme rendered=crate.readme}} -
+ {{else}} {{#if crate.description}}
@@ -104,7 +104,7 @@ {{/if}} {{/if}}
-
+
Last Updated
@@ -243,7 +243,7 @@
{{/if}}
-
+
From 4a36d50054446b3b343ecba1625fdbeb5a69b572 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Wed, 10 Jan 2018 00:41:34 +0100 Subject: [PATCH 16/24] fix(templates/crate/owners): Add label to username input field --- app/templates/crate/owners.hbs | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/templates/crate/owners.hbs b/app/templates/crate/owners.hbs index ddb351249e5..0dd1218b443 100644 --- a/app/templates/crate/owners.hbs +++ b/app/templates/crate/owners.hbs @@ -10,12 +10,11 @@

Add Owner

-
-
Username
-
-
- + From 8d2157a209a0a4b44c871ed88a379cfdbba995b1 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Sun, 14 Jan 2018 22:46:01 +0100 Subject: [PATCH 22/24] fix(templates/crate/version): Change aria-label to Crate metadata --- app/templates/crate/version.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs index 1d0141b9907..d3b6f421b44 100644 --- a/app/templates/crate/version.hbs +++ b/app/templates/crate/version.hbs @@ -104,7 +104,7 @@ {{/if}} {{/if}}
-
+
Last Updated
From e7a82091da2b99ebfddc3f7ead218572562aa80b Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Sun, 14 Jan 2018 22:47:13 +0100 Subject: [PATCH 23/24] fix(styles/home): Update custom home crate style from div to section --- app/styles/home.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/home.scss b/app/styles/home.scss index b303cd76d42..e8316b36979 100644 --- a/app/styles/home.scss +++ b/app/styles/home.scss @@ -151,7 +151,7 @@ button.small { @include flex-wrap(wrap); @include justify-content(left); - > div { + > section { margin: 0; padding: 0 15px; width: 33.33%; From 0682d78d7e119ea2a3b02dd63739fade78e72732 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Wed, 17 Jan 2018 16:56:20 +0100 Subject: [PATCH 24/24] fix(themes/application): Invalid markup --- app/templates/application.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 37b2368ac73..0979f8285fc 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -127,5 +127,5 @@ - Fork me on GitHub + Fork me on GitHub