Fix #106 a11y on volume control (#110)

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -87,6 +87,7 @@ export const DefaultPlayer = ({
                                         onChange={onVolumeChange}
                                         ariaLabelMute={copy.mute}
                                         ariaLabelUnmute={copy.unmute}
+                                        ariaLabelVolume={copy.volume}
                                         {...video} />;
                                 case 'Captions':
                                     return video.textTracks && video.textTracks.length

src/DefaultPlayer/Volume/Volume.js

@@ -3,7 +3,7 @@ import styles from './Volume.css';
 import VolumeOff from './../Icon/volume_off.svg';
 import VolumeUp from './../Icon/volume_up.svg';
 
-export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute }) => {
+export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute, ariaLabelVolume }) => {
     const volumeValue = muted
         ? 0
         : +volume;
@@ -46,6 +46,7 @@ export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ar
                         type="range"
                         orient="vertical"
                         onChange={onChange}
+                        aria-label={ariaLabelVolume}
                         className={styles.input}
                         value={volumeValue} />
                 </div>

src/DefaultPlayer/Volume/Volume.test.js

@@ -12,7 +12,8 @@ describe('Volume', () => {
         component = shallow(
             <Volume
                 ariaLabelMute="Mute"
-                ariaLabelUnmute="Unmute" />
+                ariaLabelUnmute="Unmute"
+                ariaLabelVolume="Change volume" />
         );
     });
 
@@ -41,6 +42,8 @@ describe('Volume', () => {
             .toEqual('0');
         expect(rangeInput.prop('max'))
             .toEqual('1');
+        expect(rangeInput.prop('aria-label'))
+            .toEqual('Change volume');
     });
 
     it('triggers \'onClick\' prop when the button is clicked', () => {

src/DefaultPlayer/copy.js

@@ -3,6 +3,7 @@ const copy = {
     pause: 'Pause video',
     mute: 'Mute video',
     unmute: 'Unmute video',
+    volume: 'Change volume',
     fullscreen: 'View video fullscreen',
     seek: 'Seek video',
     captions: 'Toggle captions'