From ab038522344c80e8c33f7c958f3c66ac1b7dcb96 Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Wed, 19 Apr 2017 13:35:11 -0700 Subject: [PATCH] fix(aio): accessibility items in search and home Index: Changed h3s to h2s given hierarchy Index: Aligned text and image blocks to be centered Index: Announcement bar button darkened for appropriate contrast Search Results: Changed to list items in unordered list to accommodate accessibility and updated styles accordingly --- aio/content/marketing/index.html | 94 +++++++++++-------- .../search-results.component.html | 8 +- .../styles/1-layouts/_marketing-layout.scss | 1 + aio/src/styles/1-layouts/_search-results.scss | 13 ++- .../styles/2-modules/_announcement-bar.scss | 2 +- 5 files changed, 76 insertions(+), 42 deletions(-) diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index 0b3ba28e86..9faa4b07f6 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -1,9 +1,11 @@
-
-

One framework.
Mobile & desktop.

Get Started + +
+ + +

One framework.
Mobile & desktop.

+ Get Started +
@@ -11,61 +13,79 @@ Learn More
+
+
+
+
-
responsive framework
-
-
-

Develop Across - All Platforms

-

Learn one way to build applications with Angular and reuse your code - and abilities to build apps for any deployment target. For web, mobile web, native - mobile and native desktop. -

-
-
-
-
-

Speed & Performance

-

Achieve the maximum speed possible on the Web Platform today, and - take it further, via Web Workers and server-side rendering.

-

Angular puts you in control over scalability. Meet huge data - requirements by building data models on RxJS, Immutable.js or another push-model.

+
+ responsive framework
+ +
+
+

Develop Across All Platforms

+

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop. +

+
+
+
+ +
+
+
+

Speed & Performance

+

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

+

Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.

+
+
+
-
speed and performance
+
+ speed and performance +
+
IDE example
+
-

Incredible Tooling

-

Build features quickly with simple, declarative templates. Extend the - template language with your own components and use a wide array of existing components. - Get immediate Angular-specific help and feedback with nearly every IDE and editor. All - this comes together so you can focus on building amazing apps rather than trying to make - the code work. -

+
+

Incredible Tooling

+

Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work. +

+
+
+
-

Loved by Millions

-

From prototype through global deployment, Angular delivers the - productivity and scalable infrastructure that supports Google's largest - applications.

+
+

Loved by Millions

+

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.

+
+
-
angular on the map
+
+ angular on the map +
-
Get Started
+ +
+ Get Started +
+
diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html index 998bb52b67..f4209dce2a 100644 --- a/aio/src/app/search/search-results/search-results.component.html +++ b/aio/src/app/search/search-results/search-results.component.html @@ -2,9 +2,11 @@

{{area.name}}

-
- {{ page.title }} -
+
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index d70fc26b02..9b10944250 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -11,6 +11,7 @@ div[layout=row]{ display: flex; box-sizing: border-box; + align-items: center; @media (max-width: 480px) { display: block; diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss index a2cea9089c..01ade01bb5 100644 --- a/aio/src/styles/1-layouts/_search-results.scss +++ b/aio/src/styles/1-layouts/_search-results.scss @@ -5,6 +5,7 @@ aio-search-results { .search-results { display: flex; flex-direction: row; + justify-content: space-between; overflow: auto; padding: 68px 32px 0; color: $offwhite; @@ -34,12 +35,23 @@ aio-search-results { flex-direction: column; margin: 16px 16px; height: 100%; + h3 { font-size: 16px; font-weight: 400; margin: 10px 0px 5px; text-transform: uppercase; } + + ul { + margin: 0; + padding: 0; + + li { + list-style: none; + } + } + a { font-size: 14px; color: $lightgray; @@ -55,7 +67,6 @@ aio-search-results { } @include bp(tiny) { - width: 100%; display: block; } } diff --git a/aio/src/styles/2-modules/_announcement-bar.scss b/aio/src/styles/2-modules/_announcement-bar.scss index 651ff5970d..f692a23020 100644 --- a/aio/src/styles/2-modules/_announcement-bar.scss +++ b/aio/src/styles/2-modules/_announcement-bar.scss @@ -108,7 +108,7 @@ $announcement-bar-width: 784px; .button.md-button { margin: 0; padding: 0 40px; - background: $lightgray; + background: $mediumgray; color: $white; float: right; font-size: 14px;