From 50cf2ac6d844d4680cdaad00e15071c532744745 Mon Sep 17 00:00:00 2001
From: WilliamKoza <william.koza@gmail.com>
Date: Fri, 11 Jan 2019 19:44:08 +0100
Subject: [PATCH] fix(docs-infra): improve a11y (#28086)

Issue #27723

PR Close #28086
---
 aio/content/marketing/features.html                       | 8 ++++----
 aio/content/marketing/index.html                          | 4 ++--
 aio/content/marketing/presskit.html                       | 6 +++---
 aio/src/404-body.html                                     | 2 +-
 aio/src/app/app.component.html                            | 4 ++--
 aio/src/app/app.component.spec.ts                         | 4 ++--
 .../announcement-bar/announcement-bar.component.ts        | 2 +-
 aio/src/index.html                                        | 2 +-
 aio/src/styles/1-layouts/_marketing-layout.scss           | 4 ++--
 aio/src/styles/2-modules/_notification.scss               | 2 +-
 10 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html
index e62dfd8e09..a4f5fcd6e9 100755
--- a/aio/content/marketing/features.html
+++ b/aio/content/marketing/features.html
@@ -8,7 +8,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Cross Platform</div>
-          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
         </div>
         <div class="feature-row">
 
@@ -34,7 +34,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Speed and Performance</div>
-          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
         </div>
         <div class="feature-row">
 
@@ -59,7 +59,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Productivity</div>
-          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
         </div>
         <div class="feature-row">
 
@@ -84,7 +84,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Full Development Story</div>
-          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
         </div>
         <div class="feature-row">
 
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index 7de22cc0f2..8bcdf397aa 100755
--- a/aio/content/marketing/index.html
+++ b/aio/content/marketing/index.html
@@ -9,7 +9,7 @@
 
     <!-- LOGO -->
     <div class="hero-logo">
-      <img src="assets/images/logos/angular/angular.svg"/>
+      <img src="assets/images/logos/angular/angular.svg" alt="Angular"/>
     </div>
 
     <!-- CONTAINER -->
@@ -104,7 +104,7 @@
     <div layout="row" layout-xs="column" class="home-row">
       <a href="guide/quickstart">
         <div class="card">
-          <img src="generated/images/marketing/home/code-icon.svg" height="70px">
+          <img src="generated/images/marketing/home/code-icon.svg" height="70px" alt="Angular quickstart">
           <div class="card-text-container">
             <div class="text-headline">Get Started</div>
             <p>Start building your Angular application.</p>
diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html
index 0bfb1b977c..4ae5b7cca4 100644
--- a/aio/content/marketing/presskit.html
+++ b/aio/content/marketing/presskit.html
@@ -20,7 +20,7 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="assets/images/logos/angular/angular.svg" alt="Angular">
+        <img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular">
       </div>
       <div>
         <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
@@ -40,7 +40,7 @@
     <div class="presskit-inner">
       <div class="presskit-image-container">
         <div>
-          <img src="assets/images/logos/angular/angular_solidBlack.svg">
+          <img src="assets/images/logos/angular/angular_solidBlack.svg" alt="Black logo Angular">
         </div>
       </div>
       <div>
@@ -61,7 +61,7 @@
     <div class="presskit-inner">
       <div class="presskit-image-container">
         <div>
-          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg">
+          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg" alt="Transparent logo Angular">
         </div>
       </div>
       <div>
diff --git a/aio/src/404-body.html b/aio/src/404-body.html
index 8b9185c228..1754328246 100644
--- a/aio/src/404-body.html
+++ b/aio/src/404-body.html
@@ -23,7 +23,7 @@
 
   <mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container" role="main">
     <mat-sidenav-content class="mat-drawer-content mat-sidenav-content">
-      <section class="sidenav-content" role="content">
+      <section class="sidenav-content" role="article">
         <aio-doc-viewer>
           <div class="content">
             <div class="nf-container l-flex-wrap flex-center">
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index fde39a7a93..5775bd9a1f 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -52,7 +52,7 @@
     </div>
   </mat-sidenav>
 
-  <section class="sidenav-content" [id]="pageId" role="content">
+  <main class="sidenav-content" [id]="pageId" role="main">
     <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
     <aio-doc-viewer [class.no-animations]="isStarting"
         [doc]="currentDocument"
@@ -62,7 +62,7 @@
         (docRendered)="onDocRendered()">
     </aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
-  </section>
+  </main>
 
 </mat-sidenav-container>
 
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 328501569e..f57db5b5aa 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -1071,7 +1071,7 @@ describe('AppComponent', () => {
 
       it('should set the id of the doc viewer container based on the current doc', () => {
         initializeTest(false);
-        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+        const container = fixture.debugElement.query(By.css('main.sidenav-content'));
 
         navigateTo('guide/pipes');
         expect(component.pageId).toEqual('guide-pipes');
@@ -1088,7 +1088,7 @@ describe('AppComponent', () => {
 
       it('should not be affected by changes to the query', () => {
         initializeTest(false);
-        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+        const container = fixture.debugElement.query(By.css('main.sidenav-content'));
 
         navigateTo('guide/pipes');
         navigateTo('guide/other?search=http');
diff --git a/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts
index 6698ec19bb..5ffa318e30 100644
--- a/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts
+++ b/aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts
@@ -46,7 +46,7 @@ export interface Announcement {
   template: `
   <div class="homepage-container" *ngIf="announcement">
     <div class="announcement-bar">
-      <img [src]="announcement.imageUrl">
+      <img [src]="announcement.imageUrl" alt="">
       <p [innerHTML]="announcement.message"></p>
       <a class="button" [href]="announcement.linkUrl">Learn More</a>
     </div>
diff --git a/aio/src/index.html b/aio/src/index.html
index 43c59b416f..5d9ccd10fa 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -93,7 +93,7 @@
     <div class="background-sky hero"></div>
     <section id="intro" style="text-shadow: 1px 1px #1976d2;">
       <div class="hero-logo">
-        <img src="assets/images/logos/angular/angular.svg" width="250" height="250">
+        <img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular">
       </div>
       <div class="homepage-container">
         <div class="hero-headline">One framework.<br>Mobile &amp; desktop.</div>
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index f90c0ec4ec..2d15939a79 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -268,13 +268,13 @@ section#intro {
 
 aio-shell {
   &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
-    section {
+    main {
       padding: 0rem 0rem 3rem;
     }
   }
 
   &.page-home {
-    section {
+    main {
       padding: 0;
     }
   }
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
index 78a6cde583..35121b27d9 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -89,7 +89,7 @@ aio-notification {
   }
 
   &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {
-    section {
+    main {
       padding-top: $notificationHeight;
     }
   }