docs: address Lighthouse audit issues (#11475)

fix issues with background contrast
remove ng-class expressions which applied unused classes
add alt attributes to images
add titles to iframes
stop disabling user scaling (zooming)

Fixes #11452

Author: Splaktar

docs/app/css/highlightjs-material.css

@@ -111,7 +111,7 @@ hljs .hljs-constant,
 .hljs-shebang,
 .apache .hljs-sqbracket,
 .tex .hljs-formula {
-  color: #607D8B;
+  color: #6d8c9b;
 }
 
 .coffeescript .javascript,

docs/app/css/style.css

@@ -56,7 +56,7 @@ body.docs-body {
 
 
 .training_link {
-  color: rgb(255,82,82);
+  color: #D32F2F;
   text-transform: none;
 }
 
@@ -65,7 +65,6 @@ body.docs-body {
 }
 
 .training_info {
-  opacity: 0.4;
   text-transform: none;
 }
 /***************
@@ -75,7 +74,7 @@ a {
   text-decoration: none;
   font-weight: 400;
   transition: border-bottom 0.35s;
-  color: #1e88e5;
+  color: #1565C0;
 }
 a:visited {
   color: #7e57c2;
@@ -138,9 +137,13 @@ strong {
   background-color: #D1DEEC;
 }
 .md-api-table th {
-  background-color: #4C9EF0;
+  background-color: #1976D2;
   color: white;
 }
+.md-api-table code,
+.md-api-table a {
+  background-color: rgba(255, 255, 255, 0.25);
+}
 
 blockquote {
   border-left: 3px solid rgba(0, 0, 0, 0.12);
@@ -216,7 +219,7 @@ pre > code.highlight {
 
 code {
   font-size: 1.4rem;
-  background: rgba(0, 0, 0, 0.065);
+  background: rgba(0, 0, 0, 0.05);
 }
 
 code.highlight {
@@ -225,10 +228,9 @@ code.highlight {
 }
 
 code:not(.highlight) {
-  color: #106CC8;
+  color: #1565C0;
   margin-left: 1px;
   margin-right: 1px;
-  -webkit-font-smoothing: auto;
   padding: 0.125em 0.35em;
   border-radius: 2px;
 }
@@ -303,7 +305,7 @@ body[dir=rtl] .docs-menu .md-button {
 
 .docs-menu .md-button:hover,
 .docs-menu .md-button:focus {
-  background: #267ED5 !important;
+  background: #1D77D5 !important;
 }
 .docs-menu .md-button md-icon {
   color: white;
@@ -336,7 +338,7 @@ body[dir=rtl] .docs-menu .md-button {
   padding: 0;
 }
 .docs-menu .md-button.active {
-  background: #267ED5;
+  background: #1D77D5;
 }
 .menu-heading {
   display: block;
@@ -345,9 +347,12 @@ body[dir=rtl] .docs-menu .md-button {
   padding: 8px 16px 0;
   text-align: left;
   width: 100%;
-  color: rgba(255, 255, 255, 0.54)
 }
-
+.menu-heading>a {
+  color: white;
+  font-weight: 700;
+  font-size: 12px;
+}
 
 html[dir=rtl] .menu-heading,
 body[dir=rtl] .menu-heading {
@@ -411,7 +416,7 @@ body[dir=rtl] .menu-heading {
 .nav-header {
   background-color: #106CC8;
   background: linear-gradient(#185694, #106cc8);
-  border-bottom: 1px solid #267ED5;
+  border-bottom: 1px solid #1D77D5;
   flex-shrink: 0;
   z-index: 2;
 }
@@ -559,9 +564,10 @@ md-tabs.demo-source-tabs .active md-tab-label {
 md-toolbar.demo-toolbar {
   border-radius: 3px 3px 0 0;
   box-shadow: 0 1px rgba(255, 255, 255, 0.1);
+  color: white;
 }
 md-toolbar.demo-toolbar md-tab-label {
-  color: #99E4EE
+  color: #99E4EE;
 }
 md-toolbar.demo-toolbar .md-button:hover {
   background: rgba(0,0,0,0.1);
@@ -779,7 +785,7 @@ ul.methods > li:first-child > *:first-child {
 }
 
 .version-picker {
-  background: #267ED5 !important;
+  background: #1D77D5 !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   margin-bottom: 1px !important;
 }
@@ -813,6 +819,9 @@ docs-demo .doc-demo-content {
 .service-desc > p:last-child {
   margin-bottom: 0;
 }
+.service-desc code {
+  background-color: rgba(255, 255, 255, 0.25);
+}
 
 /* Styles for Windows High Contrast mode */
 @media screen and (-ms-high-contrast: active) {

docs/app/partials/getting-started.tmpl.html

@@ -56,7 +56,7 @@ <h2>How do I start with AngularJS Material?</h2>
       <li>Use the "Edit on CodePen" button on any of our Demos<br/>
         <img
             src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png"
-            style="width:75%;margin: 10px 30px 0 0">
+            style="width:75%;margin: 10px 30px 0 0" alt="Image with arrow to Edit on CodePen button">
       </li>
     </ul>
 
@@ -67,7 +67,7 @@ <h3>Build a Material Application (blank shell)</h3>
       the AngularJS Material library from the Google CDN:
     </p>
 
-    <iframe height='777' scrolling='no'
+    <iframe height='777' scrolling='no' title="AngularJS Material - Blank Starter"
             src='https://codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
             frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
       See the Pen <a
@@ -95,7 +95,7 @@ <h3>Our CodePen Community</h3>
       <a href="https://codepen.io/team/AngularMaterial/collections/public/" target="_blank">Collections</a>, and ideas.
     </p>
     <div layout-align="center" style="width: 100%">
-      <iframe height='777' scrolling='no'
+      <iframe height='777' scrolling='no' title="Our CodePen Community"
             src='https://codepen.io/collection/XExqGz/'
             frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
       </iframe>

docs/app/partials/home.tmpl.html

@@ -188,15 +188,15 @@ <h2 class="md-headline">Training Videos:</h2>
     <ul class="buckets" layout layout-align="center center" layout-wrap>
       <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
         { href: 'https://egghead.io/series/angular-material-introduction', icon: 'ondemand_video', text: 'Introduction to AngularJS Material', site : 'EggHead', access : 'free'},
-        { href: 'https://app.pluralsight.com/player?author=ajden-towfeek&name=angular-material-fundamentals-m0&mode=live&clip=0&course=angular-material-fundamentals', icon: 'ondemand_video', text: 'AngularJS Material Fundamentals', site : 'Pluralsight', access: 'member'},
+        { href: 'https://app.pluralsight.com/player?author=ajden-towfeek&name=angular-material-fundamentals-m0&mode=live&clip=0&course=angular-material-fundamentals', icon: 'ondemand_video', text: 'AngularJS Material Fundamentals', site : 'Pluralsight', access: 'member'}
       ]">
         <md-button
             class="md-primary md-raised"
             target="_blank"
             aria-label="{{link.text}}"
             ng-href="{{link.href}}">
           <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
-          {{link.site}} | <span style="color: rgb(255,82,82); text-transform: none;">{{link.text}}</span> | <span class="training_info">{{link.access}}</span>
+          {{link.site}} | <span class="training_link">{{link.text}}</span> | <span class="training_info">{{link.access}}</span>
         </md-button>
       </li>
     </ul>
@@ -210,7 +210,7 @@ <h2 class="md-headline">Conference Presentations:</h2>
     <ul class="buckets" layout layout-align="center center" layout-wrap>
       <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
         { href: 'https://www.youtube.com/watch?v=Qi31oO5u33U', icon: 'ondemand_video', text: 'Building with AngularJS Material', site : 'ng-conf',  date: '2015'},
-        { href: 'https://www.youtube.com/watch?v=363o4i0rdvU', icon: 'ondemand_video', text: 'AngularJS Material in Practice', site : 'AngularConnect', date:'2015'},
+        { href: 'https://www.youtube.com/watch?v=363o4i0rdvU', icon: 'ondemand_video', text: 'AngularJS Material in Practice', site : 'AngularConnect', date:'2015'}
       ]">
         <md-button
             class="md-primary md-raised"
@@ -250,7 +250,7 @@ <h2 class="md-headline">Google's Material Design</h2>
     <p class="md-caption" style="text-align: center; margin-bottom: 0;">
       These docs were generated from
       (<a ng-href="{{BUILDCONFIG.repository}}/{{menu.version.current.github}}" target="_blank"
-          rel="noopener" class="md-accent">v{{BUILDCONFIG.version}} - SHA {{BUILDCONFIG.commit.substring(0,7)}}</a>)
+          rel="noopener">v{{BUILDCONFIG.version}} - SHA {{BUILDCONFIG.commit.substring(0,7)}}</a>)
       on (<strong>{{BUILDCONFIG.date}}</strong>) GMT.
     </p>
   </md-content>

docs/app/partials/layout-introduction.tmpl.html

@@ -80,7 +80,7 @@ <h3>Overview</h3>
       href="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
       target="_blank"><img
       src="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
-      alt=""
+      alt="Breakpoints as specified in the Material Design Spec"
       style="max-width:100%;"></a>
   </p>
 

docs/config/template/index.template.html

@@ -1,13 +1,14 @@
 <!doctype html>
 <html ng-app="docsApp" ng-controller="DocsCtrl" lang="en" ng-strict-di>
 <head>
+<meta charset="utf-8">
 <base href="/">
 <title ng-bind="'AngularJS Material - ' + menu.currentSection.name +
     (menu.currentSection === menu.currentPage ? '' : ' > ' + menu.currentPage.name)">
   AngularJS Material
 </title>
 <link rel="icon" type="image/x-icon" href="favicon.ico" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="angular-material.min.css">
 <link rel="stylesheet" href="docs.css">
@@ -33,7 +34,7 @@ <h1 class="docs-logotype md-heading">AngularJS Material</h1>
 
     <md-content flex role="navigation">
       <ul class="docs-menu">
-        <li ng-repeat="section in menu.sections" class="parent-list-item {{section.className || ''}}" ng-class="{'parentActive' : isSectionSelected(section)}">
+        <li ng-repeat="section in menu.sections" class="parent-list-item {{section.className || ''}}">
           <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
             {{section.name}}
           </h2>
@@ -42,7 +43,7 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
           <menu-toggle section="section" ng-if="section.type === 'toggle' && !section.hidden"></menu-toggle>
 
           <ul ng-if="section.children" class="menu-nested-list">
-            <li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
+            <li ng-repeat="child in section.children">
               <menu-link section="child" ng-if="child.type === 'link'"></menu-link>
 
               <menu-toggle section="child" ng-if="child.type === 'toggle'"></menu-toggle>
@@ -159,9 +160,9 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline">
       <div layout="row" flex="noshrink" layout-align="center center">
         <div id="license-footer" flex>
           Powered by Google &copy;2014&#8211;{{thisYear}}.
-          Code licensed under the <a ng-href="./license"  class="md-accent">MIT License</a>.
+          Code licensed under the <a ng-href="./license">MIT License</a>.
           Documentation licensed under
-          <a href="http://creativecommons.org/licenses/by/4.0/"  target="_blank" class="md-default-theme md-accent">CC BY 4.0</a>.
+          <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
         </div>
       </div>
 

src/components/autocomplete/demoFloatingLabel/index.html

@@ -2,7 +2,7 @@
   <md-content class="md-padding">
     <form ng-submit="$event.preventDefault()" name="searchForm">
       <p>The following example demonstrates floating labels being used as a normal form element.</p>
-      <div layout-gt-sm="row">
+      <div layout-gt-sm="row" style="background-color: white" class="md-padding">
         <md-input-container flex>
           <label for="floatingLabelName">Name</label>
           <input id="floatingLabelName" type="text"/>