docs: improve accessibility of toh-pt5 example (#40632)
PR Close #40632
This commit is contained in:
Kapunahele Wong
atscott
parent
edd26a2b79
commit
4d1299bd82
|
|
@ -46,7 +46,7 @@ describe('Tutorial part 5', () => {
|
|||
|
||||
appDashboardHref: navElts.get(0),
|
||||
appDashboard: element(by.css('app-root app-dashboard')),
|
||||
topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
|
||||
topHeroes: element.all(by.css('app-root app-dashboard > div a')),
|
||||
|
||||
appHeroesHref: navElts.get(1),
|
||||
appHeroes: element(by.css('app-root app-heroes')),
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
/* AppComponent's private CSS styles */
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav a {
|
||||
padding: 5px 10px;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
background-color: #e8e8e8;
|
||||
color: #3d3d3d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
nav a:visited, a:link {
|
||||
color: #334953;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #039be5;
|
||||
background-color: #cfd8dc;
|
||||
color: white;
|
||||
background-color: #42545C;
|
||||
}
|
||||
nav a.active {
|
||||
color: #039be5;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- #docplaster -->
|
||||
<!-- #docregion, heroes, outlet -->
|
||||
<h1>{{title}}</h1>
|
||||
<h1 id="main-content-header">{{title}}</h1>
|
||||
<!-- #enddocregion outlet -->
|
||||
<nav>
|
||||
<!-- #enddocregion heroes -->
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<h3>Top Heroes</h3>
|
||||
<div class="grid grid-pad">
|
||||
<a *ngFor="let hero of heroes" class="col-1-4">
|
||||
<div class="module hero">
|
||||
<h4>{{hero.name}}</h4>
|
||||
</div>
|
||||
<h2>Top Heroes</h2>
|
||||
<div class="heroes-menu">
|
||||
<a *ngFor="let hero of heroes">
|
||||
{{hero.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,50 @@
|
|||
/* DashboardComponent's private CSS styles */
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
[class*='col-']:last-of-type {
|
||||
padding-right: 0;
|
||||
|
||||
.heroes-menu {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
|
||||
/* flexbox */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
margin: 0;
|
||||
}
|
||||
.col-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
.module {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
max-height: 120px;
|
||||
min-width: 120px;
|
||||
background-color: #3f525c;
|
||||
border-radius: 2px;
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-width: 70px;
|
||||
margin: .5rem auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* flexbox */
|
||||
order: 0;
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
}
|
||||
.module:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
color: #607d8b;
|
||||
}
|
||||
.grid-pad {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.grid-pad > [class*='col-']:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.module {
|
||||
font-size: 10px;
|
||||
max-height: 75px; }
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
margin: 0;
|
||||
}
|
||||
.module {
|
||||
min-width: 60px;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
a {
|
||||
width: 18%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<h3>Top Heroes</h3>
|
||||
<div class="grid grid-pad">
|
||||
<h2>Top Heroes</h2>
|
||||
<div class="heroes-menu">
|
||||
<!-- #docregion click -->
|
||||
<a *ngFor="let hero of heroes" class="col-1-4"
|
||||
routerLink="/detail/{{hero.id}}">
|
||||
<div class="module hero">
|
||||
<h4>{{hero.name}}</h4>
|
||||
</div>
|
||||
<a *ngFor="let hero of heroes"
|
||||
routerLink="/detail/{{hero.id}}">
|
||||
{{hero.name}}
|
||||
</a>
|
||||
<!-- #enddocregion click -->
|
||||
<!-- #enddocregion click -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
/* HeroDetailComponent's private CSS styles */
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
margin: .5em 0;
|
||||
color: #607D8B;
|
||||
color: #435960;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: .4em;
|
||||
padding: .5rem;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@
|
|||
<h2>{{hero.name | uppercase}} Details</h2>
|
||||
<div><span>id: </span>{{hero.id}}</div>
|
||||
<div>
|
||||
<label>name:
|
||||
<input [(ngModel)]="hero.name" placeholder="name"/>
|
||||
</label>
|
||||
<label for="hero-name">Hero name: </label>
|
||||
<input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
|
||||
</div>
|
||||
<!-- #docregion back-button -->
|
||||
<button (click)="goBack()">go back</button>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,32 @@
|
|||
.heroes li {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.heroes li:hover {
|
||||
color: #607D8B;
|
||||
background-color: #DDD;
|
||||
left: .1em;
|
||||
}
|
||||
|
||||
.heroes a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroes a:hover {
|
||||
color:#607D8B;
|
||||
color: #2c3a41;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.heroes a:active {
|
||||
background-color: #525252;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.heroes .badge {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
/* MessagesComponent's private CSS styles */
|
||||
h2 {
|
||||
color: red;
|
||||
color: #A80000;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
button.clear {
|
||||
font-family: Arial, sans-serif;
|
||||
.clear {
|
||||
color: #333;
|
||||
background-color: #eee;
|
||||
margin-bottom: 12px;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
.clear:hover {
|
||||
color: #fff;
|
||||
background-color: #42545C;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<h2>Messages</h2>
|
||||
<button class="clear"
|
||||
(click)="messageService.clear()">clear</button>
|
||||
(click)="messageService.clear()">Clear messages</button>
|
||||
<div *ngFor="let message of messageService.messages"> {{message}} </div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -567,7 +567,7 @@
|
|||
},
|
||||
{
|
||||
"url": "tutorial/toh-pt5",
|
||||
"title": "5. Add In-app Navigation",
|
||||
"title": "5. Add Navigation",
|
||||
"tooltip": "Part 5: Add the Angular router and navigate among the views."
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# Add in-app navigation with routing
|
||||
# Add navigation with routing
|
||||
|
||||
There are new requirements for the Tour of Heroes app:
|
||||
|
||||
|
|
@ -9,11 +9,11 @@ There are new requirements for the Tour of Heroes app:
|
|||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For the sample app that this page describes, see the <live-example></live-example>.
|
||||
For the sample application that this page describes, see the <live-example></live-example>.
|
||||
|
||||
</div>
|
||||
|
||||
When you’re done, users will be able to navigate the app like this:
|
||||
When you’re done, users will be able to navigate the application like this:
|
||||
|
||||
<div class="lightbox">
|
||||
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
|
||||
|
|
@ -48,7 +48,7 @@ Replace it with the following:
|
|||
<code-example path="toh-pt5/src/app/app-routing.module.1.ts" header="src/app/app-routing.module.ts (updated)">
|
||||
</code-example>
|
||||
|
||||
First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the app can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
|
||||
First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the application can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
|
||||
|
||||
Notice that the `CommonModule` references and `declarations` array are unnecessary, so are no
|
||||
longer part of `AppRoutingModule`. The following sections explain the rest of the `AppRoutingModule` in more detail.
|
||||
|
|
@ -105,7 +105,7 @@ Open the `AppComponent` template and replace the `<app-heroes>` element with a `
|
|||
<code-example path="toh-pt5/src/app/app.component.html" region="outlet" header="src/app/app.component.html (router-outlet)">
|
||||
</code-example>
|
||||
|
||||
The `AppComponent` template no longer needs `<app-heroes>` because the app will only display the `HeroesComponent` when the user navigates to it.
|
||||
The `AppComponent` template no longer needs `<app-heroes>` because the application will only display the `HeroesComponent` when the user navigates to it.
|
||||
|
||||
The `<router-outlet>` tells the router where to display routed views.
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ You should still be running with this CLI command.
|
|||
ng serve
|
||||
</code-example>
|
||||
|
||||
The browser should refresh and display the app title but not the list of heroes.
|
||||
The browser should refresh and display the application title but not the list of heroes.
|
||||
|
||||
Look at the browser's address bar.
|
||||
The URL ends in `/`.
|
||||
|
|
@ -153,7 +153,7 @@ The `routerLink` is the selector for the [`RouterLink` directive](/api/router/Ro
|
|||
that turns user clicks into router navigations.
|
||||
It's another of the public directives in the `RouterModule`.
|
||||
|
||||
The browser refreshes and displays the app title and heroes link,
|
||||
The browser refreshes and displays the application title and heroes link,
|
||||
but not the heroes list.
|
||||
|
||||
Click the link.
|
||||
|
|
@ -228,11 +228,11 @@ Add a route to the `routes` array that matches a path to the `DashboardComponent
|
|||
|
||||
### Add a default route
|
||||
|
||||
When the app starts, the browser's address bar points to the web site's root.
|
||||
When the application starts, the browser's address bar points to the web site's root.
|
||||
That doesn't match any existing route so the router doesn't navigate anywhere.
|
||||
The space below the `<router-outlet>` is blank.
|
||||
|
||||
To make the app navigate to the dashboard automatically, add the following
|
||||
To make the application navigate to the dashboard automatically, add the following
|
||||
route to the `routes` array.
|
||||
|
||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="redirect-route">
|
||||
|
|
@ -274,7 +274,7 @@ and liberate it from the `HeroesComponent`.
|
|||
### Delete _hero details_ from `HeroesComponent`
|
||||
|
||||
When the user clicks a hero item in the `HeroesComponent`,
|
||||
the app should navigate to the `HeroDetailComponent`,
|
||||
the application should navigate to the `HeroDetailComponent`,
|
||||
replacing the heroes list view with the hero detail view.
|
||||
The heroes list view should no longer show hero details as it does now.
|
||||
|
||||
|
|
@ -409,7 +409,7 @@ Route parameters are always strings.
|
|||
The JavaScript (+) operator converts the string to a number,
|
||||
which is what a hero `id` should be.
|
||||
|
||||
The browser refreshes and the app crashes with a compiler error.
|
||||
The browser refreshes and the application crashes with a compiler error.
|
||||
`HeroService` doesn't have a `getHero()` method.
|
||||
Add it now.
|
||||
|
||||
|
|
@ -435,7 +435,7 @@ without having to change the `HeroDetailComponent` that calls it.
|
|||
|
||||
#### Try it
|
||||
|
||||
The browser refreshes and the app is working again.
|
||||
The browser refreshes and the application is working again.
|
||||
You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
|
||||
|
||||
If you paste `localhost:4200/detail/11` in the browser address bar,
|
||||
|
|
@ -566,7 +566,7 @@ Here are the code files discussed on this page.
|
|||
* You added the Angular router to navigate among different components.
|
||||
* You turned the `AppComponent` into a navigation shell with `<a>` links and a `<router-outlet>`.
|
||||
* You configured the router in an `AppRoutingModule`
|
||||
* You defined simple routes, a redirect route, and a parameterized route.
|
||||
* You defined routes, a redirect route, and a parameterized route.
|
||||
* You used the `routerLink` directive in anchor elements.
|
||||
* You refactored a tightly-coupled master/detail view into a routed detail view.
|
||||
* You used router link parameters to navigate to the detail view of a user-selected hero.
|
||||
|
|
|
|||
Loading…
Reference in New Issue