chore: fix axe-core accessibility errors

axe-core didn't run in the past due to a runtime dependency
resolution error. Protractor didn't report this as an error
and silently skipped the plugin.

Now that the plugin runs again, we need to fix all axe-core
errors. We want to leave the `missing-label` rule to be active since it
could catch issues with real components.

(cherry picked from commit e902a4f)

Author: devversion

src/e2e-app/input/input-e2e.html

@@ -1,23 +1,27 @@
 <section>
   <p>
     <mat-form-field>
-      <input matInput type="text" id="text-input" placeholder="Enter some text">
+      <mat-label>Enter some text</mat-label>
+      <input matInput type="text" id="text-input">
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <input matInput type="number" id="number-input" placeholder="Enter a number">
+      <mat-label>Enter a number</mat-label>
+      <input matInput type="number" id="number-input">
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <textarea matInput id="text-area" placeholder="Enter some text"></textarea>
+      <mat-label>Enter some text</mat-label>
+      <textarea matInput id="text-area"></textarea>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="10" id="autosize-text-area"
-                placeholder="Enter some text"></textarea>
+      <mat-label>Enter some text</mat-label>
+      <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="10" id="autosize-text-area">
+      </textarea>
     </mat-form-field>
   </p>
 </section>

src/e2e-app/mdc-tabs/mdc-tabs-e2e.html

@@ -3,7 +3,10 @@
     <mat-tab>
       <ng-template mat-tab-label>One</ng-template>
       <mat-form-field>
-        <textarea matInput placeholder="Autosize textarea" cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+        <mat-label>Autosize textarea</mat-label>
+        <textarea matInput cdkTextareaAutosize>
+          This is an autosize textarea, it should adjust to the size of its content.
+        </textarea>
       </mat-form-field>
     </mat-tab>
     <mat-tab>

src/e2e-app/tabs/tabs-e2e.html

@@ -3,7 +3,10 @@
     <mat-tab>
       <ng-template mat-tab-label>One</ng-template>
       <mat-form-field>
-        <textarea matInput placeholder="Autosize textarea" cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+        <mat-label>Autosize textarea</mat-label>
+        <textarea matInput cdkTextareaAutosize>
+          This is an autosize textarea, it should adjust to the size of its content.
+        </textarea>
       </mat-form-field>
     </mat-tab>
     <mat-tab>

tools/axe-protractor/index.js

@@ -13,8 +13,8 @@ const checkedPages = [];
 /**
  * Protractor plugin hook which always runs when Angular successfully bootstrapped.
  */
-function onPageStable() {
-  AxeBuilder(browser.driver)
+async function onPageStable() {
+  await AxeBuilder(browser.driver)
     .configure(this.config || {})
     .analyze(results => handleResults(this, results));
 }
@@ -32,7 +32,7 @@ function handleResults(context, results) {
     checkedPages.push(results.url);
 
     results.violations.forEach(violation => {
-      
+
       let specName = `${violation.help} (${results.url})`;
       let message = '\n' + buildMessage(violation);