From 1f91672d5027dc1456c831f020e64bedc5cdaeba Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Mon, 25 Jan 2021 16:39:31 -0500 Subject: [PATCH] docs: improve accessibility of toh2 example (#40575) Increases contrast of example copy. Explicitly references inputs from labels. Updates screenshot of styles that aren't accessible. Removes the term master. Provides more detailed alternate text for the image. Adds padding to input so it is an easier target for touch or pointer. PR Close #40575 --- .../src/app/heroes/heroes.component.css | 16 ++++++++--- .../src/app/heroes/heroes.component.html | 5 ++-- .../images/guide/toh/heroes-list-selected.png | Bin 6154 -> 6270 bytes aio/content/tutorial/toh-pt2.md | 27 +++++++----------- 4 files changed, 25 insertions(+), 23 deletions(-) diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css index 9759a4211b..7a6a8dfd03 100644 --- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css +++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css @@ -16,16 +16,20 @@ border-radius: 4px; } .heroes li:hover { - color: #607D8B; - background-color: #DDD; + color: #2c3a41; + background-color: #e6e6e6; left: .1em; } .heroes li.selected { - background-color: #CFD8DC; + background-color: black; color: white; } .heroes li.selected:hover { - background-color: #BBD8DC; + background-color: #505050; + color: white; +} +.heroes li.selected:active { + background-color: black; color: white; } .heroes .badge { @@ -42,3 +46,7 @@ margin-right: .8em; border-radius: 4px 0 0 4px; } + +input { + padding: .5rem; +} diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html index f8bcb64918..4a00357290 100644 --- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html +++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html @@ -17,9 +17,8 @@

{{selectedHero.name | uppercase}} Details

id: {{selectedHero.id}}
- + +
diff --git a/aio/content/images/guide/toh/heroes-list-selected.png b/aio/content/images/guide/toh/heroes-list-selected.png index 16ebad420235c25221b76664f7889c62f4f1a72f..edc3aee8d74d98ed08243744bced744ef16782f2 100644 GIT binary patch literal 6270 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 - For the sample app that this page describes, see the . + For the sample application that this page describes, see the . @@ -108,10 +108,9 @@ The `heroes.component.css` styles apply only to the `HeroesComponent` and don't -## Master/Detail +## Viewing details -When the user clicks a hero in the **master** list, -the component should display the selected hero's **details** at the bottom of the page. +When the user clicks a hero in the list, the component should display the selected hero's details at the bottom of the page. In this section, you'll listen for the hero item click event and update the hero detail. @@ -160,7 +159,7 @@ Open the browser developer tools and look in the console for an error message li #### What happened? -When the app starts, the `selectedHero` is `undefined` _by design_. +When the application starts, the `selectedHero` is `undefined` _by design_. Binding expressions in the template that refer to properties of `selectedHero`—expressions like `{{selectedHero.name}}`—_must fail_ because there is no selected hero. @@ -185,7 +184,7 @@ Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the sy After the browser refreshes, the list of names reappears. The details area is blank. Click a hero in the list of heroes and its details appear. -The app seems to be working again. +The application seems to be working again. The heroes appear in a list and details about the clicked hero appear at the bottom of the page. @@ -198,18 +197,14 @@ When the user picks a hero, `selectedHero` has a value and ### Style the selected hero -It's difficult to identify the _selected hero_ in the list when all `
  • ` elements look alike. - -If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: +To help identify the selected hero, you can use the `.selected` CSS class in the [styles you added earlier](#styles). +To apply the `.selected` class to the `
  • ` when the user clicks it, use class binding. -That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles). -You just have to apply the `.selected` class to the `
  • ` when the user clicks it. - -The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally. +Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally. Just add `[class.some-css-class]="some-condition"` to the element you want to style. Add the following `[class.selected]` binding to the `
  • ` in the `HeroesComponent` template: @@ -246,7 +241,7 @@ Here are the code files discussed on this page, including the `HeroesComponent` ## Summary -* The Tour of Heroes app displays a list of heroes in a Master/Detail view. +* The Tour of Heroes application displays a list of heroes with a detail view. * The user can select a hero and see that hero's details. * You used `*ngFor` to display a list. * You used `*ngIf` to conditionally include or exclude a block of HTML.