Adicionado acessibilidade

src/app/about/about.component.html

@@ -15,13 +15,13 @@
 -->
 <div class="about">
   <!-- TODO: #6. Use Semantic HTML -->
-  <h3>Who are we?</h3>
-  <h2>Have you ever thought, “wow, I love dumplings”?</h2>
-  <h5 class="right">Who hasn't.</h5>
-  <h6 class="center">We took it one step further and created Dumpling Dumpling,</h6>
-  <h5 class="center">double the dumpling, double the fun.</h5>
+  <h2>Who are we?</h2>
+  <p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
+  <p class="right mat-subheading-1">Who hasn't.</p>
+  <p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p>
+  <p class="center mat-subheading-1">double the dumpling, double the fun.</p>
   <div class="spacer"></div>
-  <h5>How are we different?</h5>
-  <h4>Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</h4> 
-  <h3 class="right">This shop is concept only.</h3>
+  <h2>How are we different?</h2>
+  <p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
+  <p class="right mat-subheading-2">This shop is concept only.</p>
 </div>

src/app/app-routing.module.ts

@@ -21,9 +21,9 @@ import { ShopComponent } from './shop/shop.component';
 
 // TODO: #4. Define unique page titles
 const routes: Routes = [
-  { path: 'shop', component: ShopComponent },
-  { path: 'about', component: AboutComponent },
-  { path: 'locate', component: LocationComponent },
+  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
+  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
+  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
   { path: '',   redirectTo: '/shop', pathMatch: 'full' },
   { path: '**', component: ShopComponent },
 ];

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { NavigationComponent } from './navigation/navigation.component';
 import { ShopComponent } from './shop/shop.component';
 
 // TODO: #9. Add the power of @angular/cdk/a11y
+import { A11yModule } from '@angular/cdk/a11y';
 
 @NgModule({
   declarations: [
@@ -64,6 +65,7 @@ import { ShopComponent } from './shop/shop.component';
     MatSliderModule,
     MatToolbarModule,
     GoogleMapsModule,
+    A11yModule,
   ],
   providers: [Title],
   bootstrap: [AppComponent]

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

@@ -15,7 +15,7 @@
 -->
 <div mat-dialog-content>
   <!-- TODO: #10. Control focus with FocusTrap -->
-  <mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false">
+  <mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
     <mat-list-option *ngFor="let paint of defaultColors" [value]="paint" color="primary">
       <div class="color-option">
         <div class="circle" [ngStyle]="{'background': paint}"></div>

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 export interface ColorDialogData {
   color: string;
@@ -26,6 +27,7 @@ export interface ColorDialogData {
   styleUrls: ['./color-picker-dialog.component.scss']
 })
 export class ColorPickerDialogComponent implements OnInit {
+
   @Output() recolor = new EventEmitter();
   color = '#fff';
 
@@ -44,16 +46,15 @@ export class ColorPickerDialogComponent implements OnInit {
   ];
 
   // TODO: #11. Announce changes with LiveAnnouncer
-  constructor(public dialogRef: MatDialogRef<ColorPickerDialogComponent>) { }
+  constructor(
+    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
+    private liveAnnouncer: LiveAnnouncer) { }
 
   ngOnInit(): void { }
 
   public changeColor(color: string): void {
-    if (color) {
-      this.recolor.emit(color);
-    }
-
-    // TODO: #11. Announce changes with LiveAnnouncer
+    this.liveAnnouncer.announce(`Select color: ${color}`);
     this.dialogRef.close();
   }
 

src/app/shop/shop.component.html

@@ -22,67 +22,31 @@
       <mat-card-title>Fillings</mat-card-title>
       <mat-card-content>  
         <!-- TODO: #7. Create selectable controls with Angular Material -->
-        <ul>
-          <li>
-            <input type="checkbox" name="vegan" id="vegan"
-                   [(ngModel)]="fillings.bokchoy"
-                   [(ngModel)]="fillings.tofu">
-            <label for="tall">Vegan</label>
-            <ul>
-              <li>
-                <input type="checkbox" 
-                        id="bokchoy" 
-                        [(ngModel)]="fillings.bokchoy"
-                        name="bokchoy">
-                <label for="bokchoy">Bok Choy</label>
-              </li>
-              <li>
-                <input type="checkbox" 
-                        id="tofu" 
-                        [(ngModel)]="fillings.tofu"
-                        name="tofu">
-                <label for="tofu">Tofu & Shitake</label>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <input type="checkbox" 
-                   [(ngModel)]="fillings.chicken"
-                   [(ngModel)]="fillings.impossible"
-                   name="meat" id="meat">
-            <label for="meat">Meat</label>
-            <ul>
-              <li>
-                <input type="checkbox" 
-                        id="chicken" 
-                        [(ngModel)]="fillings.chicken"
-                        name="chicken">
-                <label for="chicken">Chicken</label>
-              </li>
-              <li>
-                <input type="checkbox" 
-                        id="impossible" 
-                        [(ngModel)]="fillings.impossible"
-                        name="impossible">
-                <label for="impossible">Impossible Meat</label>
-              </li>
-            </ul>
-          </li>
-        </ul>
+        <mat-selection-list [(ngModel)]="selectedFillings"
+          aria-label="Dumpling fillings">
+          <mat-list-option *ngFor="let flavor of fillings"
+            [value]="flavor"
+            color="primary">
+            {{ flavor }}
+          </mat-list-option>
+        </mat-selection-list>
       </mat-card-content>
     </mat-card>
     <mat-card class="quantity selection-card">
       <mat-card-title>Quantity</mat-card-title>
       <mat-card-content>
         <!-- TODO: #8. Provide control labels with ARIA -->
         <mat-slider
+          aria-label="Dumpling order quantity slider"
+          id="quantity"
+          name="quantity"
           color="primary"
           class="quantity-slider"
           [max]="13"
           [min]="1"
           [step]="1"
-          [thumbLabel]="true"
           [tickInterval]="1"
+          thumbLabel
           [(ngModel)]="quantity">
         </mat-slider>
       </mat-card-content>
@@ -95,7 +59,10 @@
     </mat-card>
   </div>
   <!-- TODO: #6. Use Semantic HTML (& Angular Material!) -->
-  <div (click)="fauxPurchase()" class="purchase-button">
-    <h3>Purchase</h3>
-  </div>
+  <button mat-flat-button
+    color="primary"
+    class="purchase-button"
+    (click)="fauxPurchase()">
+    Purchase
+  </button>
 </div>

src/app/shop/shop.component.scss

@@ -16,6 +16,7 @@
 @use '@angular/material' as mat;
 
 // TODO: #12. Enable HighContrast mode
+@use '@angular/cdk';
 
 :host {
   display: flex;
@@ -62,15 +63,6 @@
       flex-grow: 1;
 
       // TODO: #7. Create selectable controls with Angular Material
-      ul { 
-        list-style: none;
-        margin: 5px 20px;
-        padding: 0;
-      }
-
-      li {
-        margin: 10px 0;
-      }
     }
 
     .quantity {
@@ -90,6 +82,10 @@
     background-color: mat.get-color-from-palette(mat.$pink-palette, A100);
 
     // TODO: #12. Enable HighContrast mode
+    @include cdk.high-contrast() {
+      outline: solid 1px;
+      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
+    }
 
     text-align: center;
     text-transform: uppercase;
@@ -110,5 +106,9 @@
     background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);
 
     // TODO: #12. Enable HighContrast mode
+    @include cdk.high-contrast() {
+      outline: solid 1px;
+      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
+    }
   }
-}
+}

src/app/shop/shop.component.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-shop',
@@ -25,15 +26,13 @@ export class ShopComponent implements OnInit {
   color = 'gold';
 
   // TODO: #7. Create selectable controls with Angular Material
-  fillings = {
-    bokchoy: true,
-    tofu: true,
-    chicken: false,
-    impossible: false,
-  };
+  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
+  selectedFillings: string[] = [];
+
+
 
   // TODO: #11. Announce changes with LiveAnnouncer
-  constructor() { }
+  constructor(private liveAnnouncer: LiveAnnouncer) { }
 
   ngOnInit(): void { }
 
@@ -46,17 +45,9 @@ export class ShopComponent implements OnInit {
   }
 
   fauxPurchase(): void {
-    let flavor = '';
-
-    // TODO: #7. Create selectable controls with Angular Material
-    if (this.fillings.bokchoy) { flavor += 'Bok Choy '; }
-    if (this.fillings.tofu) { flavor += 'Tofu & Mushroom '; }
-    if (this.fillings.chicken) { flavor += 'Chicken & Ginger '; }
-    if (this.fillings.impossible) { flavor += 'Impossible Meat '; }
-
+    let flavor = '...';
     const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;
-    console.log(fakePurchase);
 
-    // TODO: #11. Announce changes with LiveAnnouncer
+    this.liveAnnouncer.announce(fakePurchase);
   }
 }

src/styles.scss

@@ -20,7 +20,7 @@ $vollkorn-font-family: 'Vollkorn', serif;
 $lato-font-family: 'Lato', sans-serif;
 
 // TODO: #5. Ensure adequate color contrast
-$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 500);
+$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);
 $light-accent: mat.define-palette(mat.$red-palette, $default: A400, $lighter: 100);
 
 $dark-primary: mat.define-palette(mat.$light-green-palette, $default: A100, $lighter: 50, $text: 900);