iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Stefanie Fluin 2017-04-19 13:35:11 -07:00 committed by Pete Bacon Darwin
parent f90258162a
commit ab03852234
5 changed files with 76 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
aio/content/marketing/index.html
View File

@ -1,9 +1,11 @@
<header class="background-sky l-relative"> <header class="background-sky l-relative">
<div class="hero background-superhero-paper is-large"><img
src="assets/images/logos/angular/angular.svg" class="hero-logo"/> <div class="hero background-superhero-paper is-large">
<h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1><a
href="guide/quickstart" md-button="md-button" <img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
class="hero-cta mat-raised button button-large button-plain">Get Started</a> <h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1>
<a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
<announcement-bar class="announcement-bar"> <announcement-bar class="announcement-bar">
<div class="announcement-bar-slide cleafix is-visible"> <div class="announcement-bar-slide cleafix is-visible">
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/> <img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
@ -11,61 +13,79 @@
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a> <a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
</div> </div>
</announcement-bar> </announcement-bar>
</div> </div>
</header> </header>
<article class="l-content "> <article class="l-content ">
<div class="home-rows"><!-- Group 1--> <div class="home-rows"><!-- Group 1-->
<div layout="row" layout-xs="column" class="home-row"> <div layout="row" layout-xs="column" class="home-row">
<div class="promo-img-container promo-1"> <div class="promo-img-container promo-1">
<div><img src="assets/images/home/responsive-framework.svg" alt="responsive framework"></div> <div>
</div> <img src="assets/images/home/responsive-framework.svg" alt="responsive framework">
<div class="text-container">
<div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
All Platforms</h3>
<p class="text-body">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.
</p></div>
</div>
</div><!-- Group 2-->
<div layout="row" layout-xs="column" class="home-row">
<div class="text-container">
<div class="text-block"><h3 class="text-headline">Speed & Performance</h3>
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and
take it further, via Web Workers and server-side rendering.</p>
<p class="text-body">Angular puts you in control over scalability. Meet huge data
requirements by building data models on RxJS, Immutable.js or another push-model.</p>
</div> </div>
</div> </div>
<div class="text-container">
<div class="text-block promo-1-desc l-pad-top-2">
<h2 class="text-headline">Develop Across All Platforms</h2>
<p class="text-body">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.
</p>
</div>
</div>
</div><!-- Group 2-->
<div layout="row" layout-xs="column" class="home-row">
<div class="text-container">
<div class="text-block">
<h2 class="text-headline">Speed & Performance</h2>
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
<p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
</div>
</div>
<div class="promo-img-container promo-2"> <div class="promo-img-container promo-2">
<div><img src="assets/images/home/speed-performance.svg" alt="speed and performance"></div> <div>
<img src="assets/images/home/speed-performance.svg" alt="speed and performance">
</div>
</div> </div>
</div><!-- Group 3--> </div><!-- Group 3-->
<div layout="row" layout-xs="column" class="home-row"> <div layout="row" layout-xs="column" class="home-row">
<div class="promo-img-container promo-3"> <div class="promo-img-container promo-3">
<div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div> <div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
</div> </div>
<div class="text-container"> <div class="text-container">
<div class="text-block promo-3-desc"><h3 class="text-headline">Incredible Tooling</h3> <div class="text-block promo-3-desc">
<p class="text-body">Build features quickly with simple, declarative templates. Extend the <h2 class="text-headline">Incredible Tooling</h2>
template language with your own components and use a wide array of existing components. <p class="text-body">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.
Get immediate Angular-specific help and feedback with nearly every IDE and editor. All </p>
this comes together so you can focus on building amazing apps rather than trying to make </div>
the code work.
</p></div>
</div> </div>
</div><!-- Group 4--> </div><!-- Group 4-->
<div layout="row" layout-xs="column" class="home-row"> <div layout="row" layout-xs="column" class="home-row">
<div class="text-container"> <div class="text-container">
<div class="text-block l-pad-top-2"><h3 class="text-headline">Loved by Millions</h3> <div class="text-block l-pad-top-2">
<p class="text-body">From prototype through global deployment, Angular delivers the <h2 class="text-headline">Loved by Millions</h2>
productivity and scalable infrastructure that supports Google's largest <p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
applications.</p></div> </div>
</div> </div>
<div class="promo-img-container promo-4"> <div class="promo-img-container promo-4">
<div><img src="assets/images/home/loved-by-millions.png" alt="angular on the map"></div> <div>
<img src="assets/images/home/loved-by-millions.png" alt="angular on the map">
</div>
</div> </div>
</div> </div>
<div class="cta-bar"><a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
<div class="cta-bar">
<a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a>
</div>
</div> </div>
</article> </article>

8
aio/src/app/search/search-results/search-results.component.html
View File

@ -2,9 +2,11 @@
<h2 class="visually-hidden">Search Results</h2> <h2 class="visually-hidden">Search Results</h2>
<div class="search-area" *ngFor="let area of searchAreas | async"> <div class="search-area" *ngFor="let area of searchAreas | async">
<h3>{{area.name}}</h3> <h3>{{area.name}}</h3>
<div class="search-page" *ngFor="let page of area.pages"> <ul>
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a> <li class="search-page" *ngFor="let page of area.pages">
</div> <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
</li>
</ul>
</div> </div>
</div> </div>

1
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -11,6 +11,7 @@
div[layout=row]{ div[layout=row]{
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
align-items: center;
@media (max-width: 480px) { @media (max-width: 480px) {
display: block; display: block;

13
aio/src/styles/1-layouts/_search-results.scss
View File

@ -5,6 +5,7 @@ aio-search-results {
.search-results { .search-results {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
overflow: auto; overflow: auto;
padding: 68px 32px 0; padding: 68px 32px 0;
color: $offwhite; color: $offwhite;
@ -34,12 +35,23 @@ aio-search-results {
flex-direction: column; flex-direction: column;
margin: 16px 16px; margin: 16px 16px;
height: 100%; height: 100%;
h3 { h3 {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
margin: 10px 0px 5px; margin: 10px 0px 5px;
text-transform: uppercase; text-transform: uppercase;
} }
ul {
margin: 0;
padding: 0;
li {
list-style: none;
}
}
a { a {
font-size: 14px; font-size: 14px;
color: $lightgray; color: $lightgray;
@ -55,7 +67,6 @@ aio-search-results {
} }
@include bp(tiny) { @include bp(tiny) {
width: 100%;
display: block; display: block;
} }
} }

2
aio/src/styles/2-modules/_announcement-bar.scss
View File

@ -108,7 +108,7 @@ $announcement-bar-width: 784px;
.button.md-button { .button.md-button {
margin: 0; margin: 0;
padding: 0 40px; padding: 0 40px;
background: $lightgray; background: $mediumgray;
color: $white; color: $white;
float: right; float: right;
font-size: 14px; font-size: 14px;