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

feat(aio): search results accessibility items 

Add visually hidden class and apply to h2 in search results
Changed h2 group headers to h3s
Add roles to main and content
Fix API material icon placement
Image alt additions where needed
Add lang attribute to html tag
Add aria-label on search input
This commit is contained in:
Stefanie Fluin 2017-04-17 10:57:49 -07:00 committed by Pete Bacon Darwin
parent 76269f4a1f
commit 4624406ce8
11 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/animations/src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Animations</title> <title>Animations</title>

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

@ -17,7 +17,7 @@
<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"></div> <div><img src="assets/images/home/responsive-framework.svg" alt="responsive framework"></div>
</div> </div>
<div class="text-container"> <div class="text-container">
<div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across <div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
@ -38,12 +38,12 @@
</div> </div>
</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"></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"></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"><h3 class="text-headline">Incredible Tooling</h3>
@ -63,7 +63,7 @@
applications.</p></div> applications.</p></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"></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>

2
aio/content/marketing/presskit.html
View File

@ -16,7 +16,7 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="assets/images/logos/angular/angular.svg"> <img src="assets/images/logos/angular/angular.svg" alt="Angular">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">FULL COLOR LOGO</h3> <h3 class="l-space-left-3">FULL COLOR LOGO</h3>

4
aio/src/app/app.component.html
View File

@ -9,14 +9,14 @@
<span class="fill-remaining-space"></span> <span class="fill-remaining-space"></span>
</md-toolbar> </md-toolbar>
<md-sidenav-container class="sidenav-container"> <md-sidenav-container class="sidenav-container" role="main">
<md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode"> <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
<aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu> <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu> <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
</md-sidenav> </md-sidenav>
<section class="sidenav-content" [id]="pageId"> <section class="sidenav-content" [id]="pageId" role="content">
<aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer> <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
<aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt> <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
</section> </section>

1
aio/src/app/search/search-box/search-box.component.ts
View File

@ -17,6 +17,7 @@ import { LocationService } from 'app/shared/location.service';
@Component({ @Component({
selector: 'aio-search-box', selector: 'aio-search-box',
template: `<input #searchBox template: `<input #searchBox
aria-label="search"
placeholder="Search" placeholder="Search"
(keyup)="onSearch($event.target.value, $event.which)" (keyup)="onSearch($event.target.value, $event.which)"
(focus)="onSearch($event.target.value)" (focus)="onSearch($event.target.value)"

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

@ -1,6 +1,7 @@
<div class="search-results" *ngIf="(searchAreas | async)?.length > 0" > <div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
<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">
<h2>{{area.name}}</h2> <h3>{{area.name}}</h3>
<div class="search-page" *ngFor="let page of area.pages"> <div class="search-page" *ngFor="let page of area.pages">
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a> <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
</div> </div>

2
aio/src/index.html
View File

@ -40,7 +40,7 @@
<noscript> <noscript>
<header> <header>
<div class="hero"> <div class="hero">
<img src="assets/images/logos/angular/angular.svg" /> <img src="assets/images/logos/angular/angular.svg" alt="Angular"/>
<h1>One framework.<br>Mobile &amp; desktop.</h1> <h1>One framework.<br>Mobile &amp; desktop.</h1>
<br /> <br />
<h3 style="color:red"> <h3 style="color:red">

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

@ -11,6 +11,9 @@
aio-menu { aio-menu {
display: none; display: none;
} }
.sidenav-content {
min-height: 450px;
}
} }
.sidenav-container { .sidenav-container {

6
aio/src/styles/1-layouts/_layout-global.scss
View File

@ -34,4 +34,10 @@ l-relative {
.center { .center {
text-align: center; text-align: center;
}
.visually-hidden {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
} }

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

@ -34,8 +34,9 @@ aio-search-results {
flex-direction: column; flex-direction: column;
margin: 16px 16px; margin: 16px 16px;
height: 100%; height: 100%;
h2 { h3 {
font-size: 16px; font-size: 16px;
font-weight: 400;
margin: 10px 0px 5px; margin: 10px 0px 5px;
text-transform: uppercase; text-transform: uppercase;
} }

8
aio/src/styles/2-modules/_api-list.scss
View File

@ -1,3 +1,11 @@
/* API EDIT ICON */
#api {
.info-bar .material-icons {
top: 24px;
right: 48px;
}
}
/* API LIST STYLES */ /* API LIST STYLES */
aio-api-list { aio-api-list {