docs: improve accessibility of animations example (#41385)

PR Close #41385

aio/content/examples/animations/e2e/src/app.e2e-spec.ts

@@ -77,7 +77,7 @@ describe('Animation Tests', () => {
   });
 
   describe('Status Slider Component', () => {
-    const activeColor = 'rgba(255, 165, 0, 1)';
+    const activeColor = 'rgba(117, 70, 0, 1)';
     const inactiveColor = 'rgba(0, 0, 255, 1)';
 
     beforeAll(async () => {

aio/content/examples/animations/src/app/app.component.css

@@ -1,7 +1,3 @@
-:host {
+nav a {
-  display: block;
+  padding: .7rem;
-}
-
-section {
-  margin-top: 100px;
 }

aio/content/examples/animations/src/app/app.component.html

@@ -1,6 +1,10 @@
 <h1>Animations</h1>
 
-Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (click)="toggleAnimations()"/>
+<input type="checkbox"
+       id="animation-toggle"
+       [checked]="!animationsDisabled"
+       (click)="toggleAnimations()">
+<label for="animation-toggle">Toggle All Animations</label>
 
 <nav>
   <a id="home" routerLink="/home" routerLinkActive="active">Home</a>

aio/content/examples/animations/src/app/hero-list-page.component.css

@@ -1,51 +1,33 @@
 .heroes {
-  margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 15em;
 }
 
 .heroes li {
-  position: relative;
-  height: 2.3em;
   overflow:hidden;
-  margin: .5em;
+  margin: .5em 0;
 }
 
 .heroes li > .inner {
   cursor: pointer;
   background-color: #EEE;
-  padding: .3em 0;
+  padding: .3rem 0;
-  height: 1.6em;
+  height: 1.6rem;
   border-radius: 4px;
-  width: 19em;
 }
 
 .heroes li:hover > .inner {
-  color: #607D8B;
+  color: black;
   background-color: #DDD;
   transform: translateX(.1em);
 }
 
-.heroes a {
-  color: #888;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.heroes a:hover {
-  color:#607D8B;
-}
-
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #3d5157;
-  line-height: 1em;
   position: relative;
   left: -1px;
   top: -4px;
@@ -56,38 +38,12 @@
   border-radius: 4px 0 0 4px;
 }
 
-.button {
+label {
-  background-color: #eee;
+  display: block;
-  border: none;
+  padding-bottom: .5rem;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-}
-
-button:hover {
-  background-color: #cfd8dc;
-}
-
-button.delete {
-  position: relative;
-  left: 24em;
-  top: -32px;
-  background-color: gray !important;
-  color: white;
-  display: inherit;
-  padding: 5px 8px;
-  width: 2em;
 }
 
 input {
   font-size: 100%;
-  margin-bottom: 2px;
+  margin-bottom: 1rem;
-  width: 11em;
-}
-
-.heroes input {
-  position: relative;
-  top: -3px;
-  width: 12em;
 }

aio/content/examples/animations/src/app/hero-list-page.component.html

@@ -2,18 +2,22 @@
 <h2>Filter/Stagger</h2>
 
 <form>
-  <input #criteria (input)="updateCriteria(criteria.value)" placeholder="Search Heroes" />
+  <label for="search">Search heroes: </label>
-</form>    
+  <input type="text"
+         id="search"
+         #criteria (input)="updateCriteria(criteria.value)"
+         placeholder="Search heroes">
+</form>
 
 <!-- #docregion filter-animations -->
 <ul class="heroes" [@filterAnimation]="heroTotal">
-<!-- #enddocregion filter-animations -->  
+<!-- #enddocregion filter-animations -->
   <li *ngFor="let hero of heroes" class="hero">
     <div class="inner">
       <span class="badge">{{ hero.id }}</span>
       <span>{{ hero.name }}</span>
     </div>
   </li>
-<!-- #docregion filter-animations -->  
+<!-- #docregion filter-animations -->
 </ul>
-<!-- #enddocregion filter-animations -->
+<!-- #enddocregion filter-animations -->

aio/content/examples/animations/src/app/open-close-page.component.ts

@@ -5,7 +5,8 @@ import { Component } from '@angular/core';
   template: `
     <section>
       <h2>Open Close Component</h2>
-      <input type="checkbox" [checked]="logging" (click)="toggleLogging()"/> Console Log Animation Events
+      <input type="checkbox" id="log-checkbox" [checked]="logging" (click)="toggleLogging()"/>
+      <label for="log-checkbox">Console Log Animation Events</label>
 
       <app-open-close [logging]="logging"></app-open-close>
     </section>

aio/content/examples/animations/src/app/open-close.component.4.ts

@@ -21,8 +21,8 @@ import { trigger, transition, state, animate, style } from '@angular/animations'
       })),
       state('closed', style({
         width: '100px',
-        opacity: 0.5,
+        opacity: 0.8,
-        backgroundColor: 'green'
+        backgroundColor: '#c6ecff'
       })),
       transition('* => *', [
         animate('1s')

aio/content/examples/animations/src/app/open-close.component.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  margin-top: 1rem;
 }
 
 .open-close-container {

aio/content/examples/animations/src/app/open-close.component.html

@@ -1,10 +1,8 @@
-<nav>
+<button (click)="toggle()">Toggle Open/Close</button>
-  <button (click)="toggle()">Toggle Open/Close</button>
-</nav>
 
 <div [@openClose]="isOpen ? 'open' : 'closed'"
   (@openClose.start)="onAnimationEvent($event)"
   (@openClose.done)="onAnimationEvent($event)"
-  class="open-close-container">  
+  class="open-close-container">
   <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
 </div>

aio/content/examples/animations/src/app/open-close.component.ts

@@ -20,8 +20,8 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 // #docregion state2
       state('closed', style({
         height: '100px',
-        opacity: 0.5,
+        opacity: 0.8,
-        backgroundColor: 'green'
+        backgroundColor: '#c6ecff'
       })),
 // #enddocregion state2, trigger-wildcard1
 // #docregion transition1

aio/content/examples/animations/src/app/status-slider.component.ts

@@ -8,19 +8,19 @@ import { trigger, transition, state, animate, style, keyframes } from '@angular/
   animations: [
     trigger('slideStatus', [
       state('inactive', style({ backgroundColor: 'blue' })),
-      state('active', style({ backgroundColor: 'orange' })),
+      state('active', style({ backgroundColor: '#754600' })),
 
 // #docregion keyframesWithOffsets
       transition('* => active', [
         animate('2s', keyframes([
           style({ backgroundColor: 'blue', offset: 0}),
           style({ backgroundColor: 'red', offset: 0.8}),
-          style({ backgroundColor: 'orange', offset: 1.0})
+          style({ backgroundColor: '#754600', offset: 1.0})
         ])),
       ]),
       transition('* => inactive', [
         animate('2s', keyframes([
-          style({ backgroundColor: 'orange', offset: 0}),
+          style({ backgroundColor: '#754600', offset: 0}),
           style({ backgroundColor: 'red', offset: 0.2}),
           style({ backgroundColor: 'blue', offset: 1.0})
         ]))

aio/content/guide/animations.md

@@ -1,6 +1,6 @@
 # Introduction to Angular animations
 
-Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways:
+Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways:
 
 * Without animations, web page transitions can seem abrupt and jarring.
 
@@ -17,7 +17,7 @@ Angular's animation system is built on CSS functionality, which means you can an
 
 This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
 
-The features described in this guide &mdash; and the more advanced features described in the related Angular animations guides &mdash; are demonstrated in an example app available as a <live-example></live-example>.
+The features described in this guide &mdash; and the more advanced features described in the related Angular animations guides &mdash; are demonstrated in an example application available as a <live-example></live-example>.
 
 #### Prerequisites
 
@@ -63,16 +63,12 @@ In the component file, add a metadata property called `animations:` within the `
 <code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="decorator" language="typescript">
 </code-example>
 
-## Animating a simple transition
+## Animating a transition
 
-Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's in the `closed` state, it's transparent and green.
+Let's animate a transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's translucent and blue.
 
 In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
 
-<div class="lightbox">
-  <img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
-</div>
-
 <div class="alert is-helpful">
 
   Let's create a new `open-close` component to animate with simple transitions.
@@ -95,7 +91,7 @@ Let's see how Angular's `state()` function works with the `style⁣­(⁠)` func
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state1" language="typescript">
 </code-example>
 
-In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green.
+In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.7, and a background color of blue.
 
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state2" language="typescript">
 </code-example>
@@ -117,7 +113,7 @@ The `timings` parameter takes a string defined in three parts.
 
 >`animate ('duration delay easing')`
 
-The first part, `duration`, is required. The duration can be expressed in milliseconds as a simple number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows:
+The first part, `duration`, is required. The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows:
 
 * As a plain number, in milliseconds: `100`
 
@@ -177,10 +173,6 @@ The `trigger()` function describes the property name to watch for changes. When
 
 In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.
 
-<div class="lightbox">
-  <img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
-</div>
-
 <div class="alert is-helpful">
 
 **Note:** Within each `trigger()` function call, an element can only be in one state at any given time. However, it's possible for multiple triggers to be active at once.
@@ -239,7 +231,7 @@ region="trigger">
 
 ### Summary
 
-You learned to add animation to a simple transition between two states, using `style()` and `state()` along with `animate()` for the timing.
+You learned to add animation to a transition between two states, using `style()` and `state()` along with `animate()` for the timing.
 
 You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers).