From edd26a2b7960a7407c99aa76e7ef1ef9ac32cf34 Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Mon, 8 Feb 2021 10:05:25 -0500 Subject: [PATCH] docs: improve accessibility of toh-pt6 (#40805) PR Close #40805 --- .../examples/toh-pt6/e2e/src/app.e2e-spec.ts | 14 +-- .../toh-pt6/src/app/app.component.css | 15 ++- .../src/app/dashboard/dashboard.component.css | 97 ++++++++---------- .../app/dashboard/dashboard.component.html | 10 +- .../app/dashboard/dashboard.component.spec.ts | 2 +- .../app/hero-detail/hero-detail.component.css | 15 +-- .../hero-detail/hero-detail.component.html | 5 +- .../app/hero-search/hero-search.component.css | 56 +++++----- .../hero-search/hero-search.component.html | 3 +- .../src/app/heroes/heroes.component.css | 65 +++++++----- .../src/app/heroes/heroes.component.html | 10 +- .../src/app/messages/messages.component.css | 15 ++- .../src/app/messages/messages.component.html | 2 +- .../images/guide/toh/toh-hero-search.gif | Bin 0 -> 11073 bytes aio/content/tutorial/toh-pt6.md | 20 ++-- 15 files changed, 167 insertions(+), 162 deletions(-) create mode 100644 aio/content/images/guide/toh/toh-hero-search.gif diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts index f9c8b74904..1856368208 100644 --- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts @@ -53,7 +53,7 @@ describe('Tutorial part 6', () => { 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')), @@ -176,7 +176,7 @@ describe('Tutorial part 6', () => { const numHeroes = heroesBefore.length; await element(by.css('input')).sendKeys(addedHeroName); - await element(by.buttonText('add')).click(); + await element(by.buttonText('Add hero')).click(); const page = getPageElts(); const heroesAfter = await toHeroArray(page.allHeroes); @@ -195,18 +195,18 @@ describe('Tutorial part 6', () => { // Inherited styles from styles.css expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif'); expect(await button.getCssValue('border')).toContain('none'); - expect(await button.getCssValue('padding')).toBe('5px 10px'); + expect(await button.getCssValue('padding')).toBe('1px 10px 3px'); expect(await button.getCssValue('border-radius')).toBe('4px'); // Styles defined in heroes.component.css - expect(await button.getCssValue('left')).toBe('194px'); - expect(await button.getCssValue('top')).toBe('-32px'); + expect(await button.getCssValue('left')).toBe('210px'); + expect(await button.getCssValue('top')).toBe('5px'); } - const addButton = element(by.buttonText('add')); + const addButton = element(by.buttonText('Add hero')); // Inherited styles from styles.css expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif'); expect(await addButton.getCssValue('border')).toContain('none'); - expect(await addButton.getCssValue('padding')).toBe('5px 10px'); + expect(await addButton.getCssValue('padding')).toBe('8px 24px'); expect(await addButton.getCssValue('border-radius')).toBe('4px'); }); diff --git a/aio/content/examples/toh-pt6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css index 1bdf7bdd58..114a0b70dd 100644 --- a/aio/content/examples/toh-pt6/src/app/app.component.css +++ b/aio/content/examples/toh-pt6/src/app/app.component.css @@ -1,23 +1,20 @@ /* 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; } diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css index 031b2e382f..b1e6e6785e 100644 --- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css +++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css @@ -1,61 +1,54 @@ /* 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: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + 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: black; +} diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html index b70c0c7d6e..9a20700f46 100644 --- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html +++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html @@ -1,10 +1,8 @@ -

Top Heroes

-
- Top Heroes +
+ -
-

{{hero.name}}

-
+ {{hero.name}}
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts index 224f5db3ce..7fb248d94b 100644 --- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts +++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts @@ -37,7 +37,7 @@ describe('DashboardComponent', () => { }); it('should display "Top Heroes" as headline', () => { - expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Top Heroes'); + expect(fixture.nativeElement.querySelector('h2').textContent).toEqual('Top Heroes'); }); it('should call heroService', waitForAsync(() => { diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css index 6a860b871d..f15f55a449 100644 --- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css +++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css @@ -1,24 +1,19 @@ /* 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; + margin-right: .5rem; background-color: #eee; - border: none; - padding: 5px 10px; + padding: 1rem; border-radius: 4px; - cursor: pointer; + font-size: 1rem; } button:hover { background-color: #cfd8dc; diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html index 860378b3b4..dbef138c6d 100644 --- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html +++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html @@ -2,9 +2,8 @@

{{hero.name | uppercase}} Details

id: {{hero.id}}
- + +
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css index 190d9bbc10..ce919d87f4 100644 --- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css +++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css @@ -1,37 +1,45 @@ /* HeroSearch private styles */ -.search-result li { + +label { + display: block; + font-weight: bold; + font-size: 1.2rem; + margin-top: 1rem; + margin-bottom: .5rem; + +} +input { + padding: .5rem; + width: 100%; + max-width: 600px; + box-sizing: border-box; + display: block; +} + +input:focus { + outline: #336699 auto 1px; +} + +li { + list-style-type: none; +} +.search-result li a { border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray; - width: 195px; - height: 16px; - padding: 5px; - background-color: white; - cursor: pointer; - list-style-type: none; -} - -.search-result li:hover { - background-color: #607D8B; -} - -.search-result li a { - color: #888; - display: block; + display: inline-block; + width: 100%; + max-width: 600px; + padding: .5rem; + box-sizing: border-box; text-decoration: none; + color: black; } .search-result li a:hover { + background-color: #435A60; color: white; } -.search-result li a:active { - color: white; -} -#search-box { - width: 200px; - height: 20px; -} - ul.search-result { margin-top: 0; diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html index de72fd791f..30f649d251 100644 --- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html +++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html @@ -1,6 +1,5 @@
-

- + diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css index 8e44b7ccda..62760d9fd1 100644 --- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css +++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css @@ -5,32 +5,44 @@ padding: 0; width: 15em; } + +input { + display: block; + width: 100%; + padding: .5rem; + margin: 1rem 0; + box-sizing: border-box; +} + .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 { @@ -38,7 +50,7 @@ font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #405061; + background-color:#405061; line-height: 1em; position: relative; left: -1px; @@ -50,23 +62,28 @@ border-radius: 4px 0 0 4px; } -button { - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - font-family: Arial, sans-serif; +.add-button { + padding: .5rem 1.5rem; + font-size: 1rem; + margin-bottom: 2rem; } -button:hover { - background-color: #cfd8dc; +.add-button:hover { + color: white; + background-color: #42545C; } button.delete { - position: relative; - left: 194px; - top: -32px; - background-color: gray !important; + position: absolute; + left: 210px; + top: 5px; + background-color: white; + color: #525252; + font-size: 1.1rem; + padding: 1px 10px 3px 10px; +} + +button.delete:hover { + background-color: #525252; color: white; } diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html index 5daa83bd64..0959a24256 100644 --- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html +++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html @@ -2,12 +2,12 @@
- + + + -
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css index 08585dcbaf..9a914ecbc2 100644 --- a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css +++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css @@ -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; } diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html index 1df7dfd989..2f0c79464a 100644 --- a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html +++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html @@ -2,7 +2,7 @@

Messages

+ (click)="messageService.clear()">Clear messages
{{message}}
diff --git a/aio/content/images/guide/toh/toh-hero-search.gif b/aio/content/images/guide/toh/toh-hero-search.gif new file mode 100644 index 0000000000000000000000000000000000000000..dfd50fc3f98bfbc19f3d791b2a3c9771bbe0ac33 GIT binary patch literal 11073 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 x*Mj-0noUUyJ56)++7B)e6mu-2D)OwVw`9~ - For the sample app that this page describes, see the . + For the sample application that this page describes, see the .
@@ -17,7 +17,7 @@ Angular's `HttpClient`. `HttpClient` is Angular's mechanism for communicating with a remote server over HTTP. -Make `HttpClient` available everywhere in the app in two steps. First, add it to the root `AppModule` by importing it: +Make `HttpClient` available everywhere in the application in two steps. First, add it to the root `AppModule` by importing it: @@ -33,7 +33,7 @@ Next, still in the `AppModule`, add `HttpClient` to the `imports` array: This tutorial sample mimics communication with a remote data server by using the [In-memory Web API](https://github.com/angular/angular/tree/master/packages/misc/angular-in-memory-web-api "In-memory Web API") module. -After installing the module, the app will make requests to and receive responses from the `HttpClient` +After installing the module, the application will make requests to and receive responses from the `HttpClient` without knowing that the *In-memory Web API* is intercepting those requests, applying them to an in-memory data store, and returning simulated responses. @@ -127,7 +127,7 @@ Convert that method to use `HttpClient` as follows: Refresh the browser. The hero data should successfully load from the mock server. -You've swapped `of()` for `http.get()` and the app keeps working without any other changes +You've swapped `of()` for `http.get()` and the application keeps working without any other changes because both functions return an `Observable`. ### `HttpClient` methods return one value @@ -197,10 +197,10 @@ has configured with both the name of the operation that failed and a safe return After reporting the error to the console, the handler constructs -a user friendly message and returns a safe value to the app so the app can keep working. +a user friendly message and returns a safe value to the application so the application can keep working. Because each service method returns a different kind of `Observable` result, -`handleError()` takes a type parameter so it can return the safe value as the type that the app expects. +`handleError()` takes a type parameter so it can return the safe value as the type that the application expects. ### Tap into the Observable @@ -283,7 +283,7 @@ The hero now appears in the list with the changed name. ## Add a new hero -To add a hero, this app only needs the hero's name. You can use an `` +To add a hero, this application only needs the hero's name. You can use an `` element paired with an add button. Insert the following into the `HeroesComponent` template, just after @@ -506,7 +506,7 @@ It cancels and discards previous search observables, returning only the latest s Note that canceling a previous `searchHeroes()` Observable doesn't actually abort a pending HTTP request. - Unwanted results are simply discarded before they reach your application code. + Unwanted results are discarded before they reach your application code. @@ -515,11 +515,11 @@ That's the job of the [`AsyncPipe`](#asyncpipe) in the template. #### Try it -Run the app again. In the *Dashboard*, enter some text in the search box. +Run the application again. In the *Dashboard*, enter some text in the search box. If you enter characters that match any existing hero names, you'll see something like this.
- Hero Search Component + Hero Search field with the letters 'm' and 'a' along with four search results that match the query displayed in a list beneath the search input
## Final code review