feat(controls): Add WAI-ARIA support

Add WAI-ARIA support videogular#582
Mrhedges · Oct 6, 2017 · abba642 · abba642
1 parent 369f6cb
commit abba642
Show file tree

Hide file tree

Showing 10 changed files with 13,329 additions and 19 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/index.html b/docs/src/index.html
@@ -191,6 +191,19 @@ <h2 class="section-title">Core Features</h2>
                     </p>
                 </div>
             </li>
+            <li>
+                <input type="radio" name="core-features" id="aria">
+                <div class="core-features-item">
+                    <label for="aria" class="core-features-label">
+                        WAI-ARIA support
+                    </label>
+                    <p class="core-features-description">
+                        Videogular has out-of-the-box <a href="https://www.w3.org/WAI/intro/aria" target="_blank">WAI-ARIA</a>
+                        support for all buttons like play/pause, mute, fullscreen and more, but also for other components
+                        like track selector, volume, scrub bar and so on.
+                    </p>
+                </div>
+            </li>
         </ul>
     </section>
 </article>

diff --git a/fonts/videogular.css b/fonts/videogular.css
@@ -20,6 +20,8 @@
   line-height: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 50px;
   font-size: 24px;
 
   /* Better Font Rendering =========== */

diff --git a/src/controls/vg-fullscreen/vg-fullscreen.ts b/src/controls/vg-fullscreen/vg-fullscreen.ts
@@ -7,9 +7,14 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
     selector: 'vg-fullscreen',
     encapsulation: ViewEncapsulation.None,
-    template: `<div class="icon"
+    template: `
+        <div class="icon"
              [class.vg-icon-fullscreen]="!isFullscreen"
-             [class.vg-icon-fullscreen_exit]="isFullscreen">
+             [class.vg-icon-fullscreen_exit]="isFullscreen"
+             tabindex="0"
+             role="button"
+             aria-label="fullscreen button"
+             [attr.aria-valuetext]="ariaValue">
         </div>`,
     styles: [ `
         vg-fullscreen {
@@ -41,6 +46,8 @@ export class VgFullscreen implements OnInit, OnDestroy {
 
     subscriptions: Subscription[] = [];
 
+    ariaValue = 'normal mode';
+
     constructor(ref: ElementRef, public API: VgAPI, public fsAPI: VgFullscreenAPI) {
         this.elem = ref.nativeElement;
         this.subscriptions.push(this.fsAPI.onChangeFullscreen.subscribe(this.onChangeFullscreen.bind(this)));
@@ -60,11 +67,25 @@ export class VgFullscreen implements OnInit, OnDestroy {
     }
 
     onChangeFullscreen(fsState: boolean) {
+        this.ariaValue = fsState ? 'fullscren mode' : 'normal mode';
         this.isFullscreen = fsState;
     }
 
     @HostListener('click')
     onClick() {
+        this.changeFullscreenState();
+    }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        // On press Enter (13) or Space (32)
+        if (event.keyCode === 13 || event.keyCode === 32) {
+            event.preventDefault();
+            this.changeFullscreenState();
+        }
+    }
+
+    changeFullscreenState() {
         let element = this.target;
 
         if (this.target instanceof VgAPI) {

diff --git a/src/controls/vg-mute/vg-mute.ts b/src/controls/vg-mute/vg-mute.ts
@@ -6,11 +6,16 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
     selector: 'vg-mute',
     encapsulation: ViewEncapsulation.None,
-    template: `<div class="icon"
+    template: `
+        <div class="icon"
              [class.vg-icon-volume_up]="getVolume() >= 0.75"
              [class.vg-icon-volume_down]="getVolume() >= 0.25 && getVolume() < 0.75"
              [class.vg-icon-volume_mute]="getVolume() > 0 && getVolume() < 0.25"
-             [class.vg-icon-volume_off]="getVolume() === 0">
+             [class.vg-icon-volume_off]="getVolume() === 0"
+             tabindex="0"
+             role="button"
+             aria-label="mute button"
+             [attr.aria-valuetext]="ariaValue">
         </div>`,
     styles: [ `
         vg-mute {
@@ -43,6 +48,8 @@ export class VgMute implements OnInit, OnDestroy {
 
     subscriptions: Subscription[] = [];
 
+    ariaValue = 'unmuted';
+
     constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
     }
@@ -63,6 +70,19 @@ export class VgMute implements OnInit, OnDestroy {
 
     @HostListener('click')
     onClick() {
+        this.changeMuteState();
+    }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        // On press Enter (13) or Space (32)
+        if (event.keyCode === 13 || event.keyCode === 32) {
+            event.preventDefault();
+            this.changeMuteState();
+        }
+    }
+
+    changeMuteState() {
         let volume = this.getVolume();
 
         if (volume === 0) {
@@ -75,7 +95,9 @@ export class VgMute implements OnInit, OnDestroy {
     }
 
     getVolume() {
-        return this.target ? this.target.volume : 0;
+        const volume = this.target ? this.target.volume : 0;
+        this.ariaValue = volume ? 'unmuted' : 'muted';
+        return volume;
     }
 
     ngOnDestroy() {

diff --git a/src/controls/vg-play-pause/vg-play-pause.ts b/src/controls/vg-play-pause/vg-play-pause.ts
@@ -6,9 +6,14 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
     selector: 'vg-play-pause',
     encapsulation: ViewEncapsulation.None,
-    template: `<div class="icon"
+    template: `
+        <div class="icon"
              [class.vg-icon-pause]="getState() === 'playing'"
-             [class.vg-icon-play_arrow]="getState() === 'paused' || getState() === 'ended'">
+             [class.vg-icon-play_arrow]="getState() === 'paused' || getState() === 'ended'"
+             tabindex="0"
+             role="button"
+             aria-label="play pause button"
+             [attr.aria-valuetext]="ariaValue">
         </div>`,
     styles: [ `
         vg-play-pause {
@@ -40,6 +45,8 @@ export class VgPlayPause implements OnInit, OnDestroy {
 
     subscriptions: Subscription[] = [];
 
+    ariaValue = VgStates.VG_PAUSED;
+
     constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
     }
@@ -59,6 +66,19 @@ export class VgPlayPause implements OnInit, OnDestroy {
 
     @HostListener('click')
     onClick() {
+        this.playPause();
+    }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        // On press Enter (13) or Space (32)
+        if (event.keyCode === 13 || event.keyCode === 32) {
+            event.preventDefault();
+            this.playPause();
+        }
+    }
+
+    playPause() {
         let state = this.getState();
 
         switch (state) {
@@ -74,7 +94,8 @@ export class VgPlayPause implements OnInit, OnDestroy {
     }
 
     getState() {
-        return this.target ? this.target.state : VgStates.VG_PAUSED;
+        this.ariaValue = this.target ? this.target.state : VgStates.VG_PAUSED;
+        return this.ariaValue;
     }
 
     ngOnDestroy() {

diff --git a/src/controls/vg-playback-button/vg-playback-button.ts b/src/controls/vg-playback-button/vg-playback-button.ts
@@ -5,7 +5,14 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
     selector: 'vg-playback-button',
     encapsulation: ViewEncapsulation.None,
-    template: `{{getPlaybackRate()}}x`,
+    template: `
+    <span class="button"
+          tabindex="0"
+          role="button"
+          aria-label="playback speed button"
+          [attr.aria-valuetext]="ariaValue">
+        {{getPlaybackRate()}}x
+    </span>`,
     styles: [ `
         vg-playback-button {
             -webkit-touch-callout: none;
@@ -22,6 +29,13 @@ import { Subscription } from 'rxjs/Subscription';
             line-height: 50px;
             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
         }
+
+        vg-playback-button .button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+        }
     ` ]
 })
 export class VgPlaybackButton implements OnInit, OnDestroy {
@@ -35,6 +49,8 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
 
     subscriptions: Subscription[] = [];
 
+    ariaValue = 1;
+
     constructor(ref: ElementRef, public API: VgAPI) {
         this.elem = ref.nativeElement;
         this.playbackValues = [ '0.5', '1.0', '1.5', '2.0' ];
@@ -56,6 +72,19 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
 
     @HostListener('click')
     onClick() {
+        this.updatePlaybackSpeed();
+    }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        // On press Enter (13) or Space (32)
+        if (event.keyCode === 13 || event.keyCode === 32) {
+            event.preventDefault();
+            this.updatePlaybackSpeed();
+        }
+    }
+
+    updatePlaybackSpeed() {
         this.playbackIndex = ++this.playbackIndex % this.playbackValues.length;
 
         if (this.target instanceof VgAPI) {
@@ -67,7 +96,8 @@ export class VgPlaybackButton implements OnInit, OnDestroy {
     }
 
     getPlaybackRate() {
-        return this.target ? this.target.playbackRate : 1.0;
+        this.ariaValue = this.target ? this.target.playbackRate : 1.0;
+        return this.ariaValue;
     }
 
     ngOnDestroy() {

diff --git a/src/controls/vg-scrub-bar/vg-scrub-bar.ts b/src/controls/vg-scrub-bar/vg-scrub-bar.ts
@@ -10,9 +10,27 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
     selector: 'vg-scrub-bar',
     encapsulation: ViewEncapsulation.None,
-    template: `<ng-content></ng-content>`,
+    template: `
+        <div class="scrubBar"
+             tabindex="0"
+             role="slider"
+             aria-label="scrub bar"
+             aria-level="polite"
+             [attr.aria-valuenow]="getPercentage()"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             [attr.aria-valuetext]="getPercentage() + '%'">
+            <ng-content></ng-content>
+        </div>
+        
+    `,
     styles: [ `
         vg-scrub-bar {
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
             position: absolute;
             width: 100%;
             height: 5px;
@@ -28,6 +46,13 @@ import { Subscription } from 'rxjs/Subscription';
             -ms-transition: bottom 1s, opacity 0.5s;
             transition: bottom 1s, opacity 0.5s;
         }
+        
+        vg-scrub-bar .scrubBar {
+            position: relative;
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+        }
 
         vg-controls vg-scrub-bar {
             position: relative;
@@ -98,6 +123,7 @@ export class VgScrubBar implements OnInit, OnDestroy {
 
     protected seekMove(offset: number) {
         if (this.isSeeking) {
+            console.log(offset);
             let percentage = Math.max(Math.min(offset * 100 / this.elem.scrollWidth, 99.9), 0);
             this.target.time.current = percentage * this.target.time.total / 100;
             this.target.seekTime(percentage, true);
@@ -207,6 +233,22 @@ export class VgScrubBar implements OnInit, OnDestroy {
         }
     }
 
+    @HostListener('keydown', ['$event'])
+    arrowAdjustVolume(event: KeyboardEvent) {
+        if (event.keyCode === 38 || event.keyCode === 39) {
+            event.preventDefault();
+            this.target.seekTime((this.target.time.current + 5000) / 1000, false);
+        }
+        else if (event.keyCode === 37 || event.keyCode === 40) {
+            event.preventDefault();
+            this.target.seekTime((this.target.time.current - 5000) / 1000, false);
+        }
+    }
+
+    getPercentage() {
+        return this.target ? ((this.target.time.current * 100) / this.target.time.total) + '%' : '0%';
+    }
+
     onHideScrubBar(hide: boolean) {
         this.hideScrubBar = hide;
     }

diff --git a/src/controls/vg-track-selector/vg-track-selector.ts b/src/controls/vg-track-selector/vg-track-selector.ts
@@ -14,13 +14,17 @@ export interface Option {
     template: `
         <div class="container">
             <div class="track-selected"
-                [class.vg-icon-closed_caption]="!trackSelected">
+                 [class.vg-icon-closed_caption]="!trackSelected">
                 {{ trackSelected || '' }}
             </div>
             
-            <select class="trackSelector" (change)="selectTrack($event.target.value)">
+            <select class="trackSelector" 
+                    (change)="selectTrack($event.target.value)"
+                    tabindex="0"
+                    aria-label="track selector"
+                    [attr.aria-valuetext]="ariaValue">
                 <option 
-                    *ngFor="let track of tracks" 
+                    *ngFor="let track of tracks"
                     [value]="track.id"
                     [selected]="track.selected === true">
                     {{ track.label }}
@@ -63,9 +67,6 @@ export interface Option {
             color: transparent;
             font-size: 16px;
         }
-        vg-track-selector select.trackSelector:focus {
-            outline: none;
-        }
         vg-track-selector .track-selected {
             position: absolute;
             width: 100%;

diff --git a/src/controls/vg-volume/vg-volume.ts b/src/controls/vg-volume/vg-volume.ts
@@ -138,11 +138,11 @@ export class VgVolume implements OnInit, OnDestroy {
 
     @HostListener('keydown', ['$event'])
     arrowAdjustVolume(event: KeyboardEvent) {
-        if (event.keyCode == 38 || event.keyCode == 39) { 
+        if (event.keyCode === 38 || event.keyCode === 39) {
             event.preventDefault();
             this.setVolume(Math.max(0, Math.min(100,(this.getVolume() * 100) + 10)));
         }
-        else if (event.keyCode == 37 || event.keyCode == 40) {
+        else if (event.keyCode === 37 || event.keyCode === 40) {
             event.preventDefault();
             this.setVolume(Math.max(0, Math.min(100,(this.getVolume() * 100) - 10)));
         }