From c61671327cc87ef7f8d4f564e8fa1cf913e7a243 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 3 Jan 2018 23:53:15 +0200
Subject: [PATCH] chore: add proper labels to slider a11y page (#9165)

Adds the missing ARIA labels to some of the sliders in the accessibility test app.
---
 src/demo-app/a11y/slider/slider-a11y.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/demo-app/a11y/slider/slider-a11y.html b/src/demo-app/a11y/slider/slider-a11y.html
index baa781c32f0..26fafadcd87 100644
--- a/src/demo-app/a11y/slider/slider-a11y.html
+++ b/src/demo-app/a11y/slider/slider-a11y.html
@@ -5,15 +5,15 @@
     <div class="demo-color-sliders">
       <div>
         <label class="demo-color-label" for="r-slider">Red</label>
-        <mat-slider id="r-slider" min="0" max="255" [(ngModel)]="red"></mat-slider>
+        <mat-slider aria-label="Red" id="r-slider" min="0" max="255" [(ngModel)]="red"></mat-slider>
       </div>
       <div>
         <label class="demo-color-label" for="g-slider">Green</label>
-        <mat-slider id="g-slider" min="0" max="255" [(ngModel)]="green"></mat-slider>
+        <mat-slider aria-label="Green" id="g-slider" min="0" max="255" [(ngModel)]="green"></mat-slider>
       </div>
       <div>
         <label class="demo-color-label" for="b-slider">Blue</label>
-        <mat-slider id="b-slider" min="0" max="255" [(ngModel)]="blue"></mat-slider>
+        <mat-slider aria-label="Blue" id="b-slider" min="0" max="255" [(ngModel)]="blue"></mat-slider>
       </div>
     </div>
   <div class="demo-color-swatch" [style.background]="swatchBackground"></div>
@@ -34,6 +34,6 @@
       <mat-icon aria-hidden>volume_up</mat-icon>
       <span class="cdk-visually-hidden">Volume</span>
     </label>
-    <mat-slider id="vol-slider" min="0" max="100" vertical inverted></mat-slider>
+    <mat-slider aria-label="Volume" id="vol-slider" min="0" max="100" vertical inverted></mat-slider>
   </div>
 </section>