i18n

mderrick · mderrick · commit a2ece5fc3f53 · 2017-02-21T21:44:09.000Z
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # react-html5video
 
-A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls.
+A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y.
 
 V2 API has changed and is not backwards compatible. You can find the old documentation [here](https://github.com/mderrick/react-html5video/blob/master/README.md).
 
@@ -45,6 +45,20 @@ render() {
 }
 ```
 
+#### a11y* and i18n
+
+The custom controls provided are built using `<button>` and `<input type="range">` which means basic keyboard controls are available when they are focused. For example, you can and hit the space bar on mute, play and fullscreen buttons as well as seek using the arrow keys when focused on the slider. `aria-label` attributes for screen readers have been used where user interaction is required. Try tabbing through the [demo](http://mderrick.github.io/react-html5video/) with [Vox](http://www.chromevox.com/) enabled.
+
+You can change translate the `aria-label` values for all controls like so:
+
+```js
+<Video copy={{ key: value }}>
+```
+
+The default english `copy` can be found in [here](https://github.com/mderrick/react-html5video/blob/v2/src/DefaultPlayer/copy.js).
+
+*Disclaimer: Unfortuantely I don't much experience with a11y but I have tried to use some of the features from [PayPal's accessible HTML5 player](https://github.com/paypal/accessible-html5-video-player). If anyone has further input on this please raise an issue or a pull request.
+
 ### Advanced Usage
 
 If you want to get creative and create your own video player then you will need to use the higher order component. The HoC connects a React component to all the [HTML5 video attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) and the [HTMLMediaElement](https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement) of the first video it finds in the component it is wrapping.
@@ -74,7 +88,7 @@ const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
 export default videoConnect(MyVideoPlayer)
 ```
 
-The above will simply print out the properties of the HTML5 `<video>` within `MyVideoPlayer`. Now you have these properties and the HTMLMediaElement itself available in your component, it is up to you to create your new custom controls using them. See the default player as an example.
+The above will simply print out the properties of the HTML5 `<video>` within `MyVideoPlayer`. Now you have these properties and the HTMLMediaElement itself available in your component, it is up to you to create your new custom controls using them. See the [default player](https://github.com/mderrick/react-html5video/blob/v2/src/DefaultPlayer/DefaultPlayer.js) as an example.
 
 #### API
 
diff --git a/src/DefaultPlayer/Captions/Captions.js b/src/DefaultPlayer/Captions/Captions.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Captions.css';
 import ClosedCaptionIcon from './../Icon/closed_caption.svg';
 
-export default ({ textTracks, onClick, onItemClick, className }) => {
+export default ({ textTracks, onClick, onItemClick, className, ariaLabel }) => {
     return (
         <div className={[
             styles.component,
@@ -11,7 +11,7 @@ export default ({ textTracks, onClick, onItemClick, className }) => {
             <button
                 type="button"
                 onClick={onClick}
-                aria-label="Captions"
+                aria-label={ariaLabel}
                 className={styles.button}>
                 <ClosedCaptionIcon
                     className={styles.icon}
diff --git a/src/DefaultPlayer/Captions/Captions.test.js b/src/DefaultPlayer/Captions/Captions.test.js
@@ -7,7 +7,9 @@ describe('Captions', () => {
     let component;
 
     beforeAll(() => {
-        component = shallow(<Captions />);
+        component = shallow(
+            <Captions ariaLabel="Captions" />
+        );
     });
 
     it('should accept a className prop and append it to the components class', () => {
@@ -22,4 +24,9 @@ describe('Captions', () => {
         expect(component.prop('className'))
             .toContain(newClassNameString);
     });
+
+    it('has correct aria-label', () => {
+        expect(component.find('button').prop('aria-label'))
+            .toEqual('Captions');
+    });
 });
diff --git a/src/DefaultPlayer/DefaultPlayer.js b/src/DefaultPlayer/DefaultPlayer.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import videoConnect from './../video/video';
+import copy from './copy';
 import {
     setVolume,
     showTrack,
@@ -21,6 +22,7 @@ import Fullscreen from './Fullscreen/Fullscreen';
 import Overlay from './Overlay/Overlay';
 
 export const DefaultPlayer = ({
+    copy,
     video,
     style,
     controls,
@@ -56,17 +58,21 @@ export const DefaultPlayer = ({
                                 case 'Seek':
                                     return <Seek
                                         key={i}
+                                        ariaLabel={copy.seek}
                                         className={styles.seek}
                                         onChange={onSeekChange}
                                         {...video} />;
                                 case 'PlayPause':
                                     return <PlayPause
                                         key={i}
+                                        ariaLabelPlay={copy.play}
+                                        ariaLabelPause={copy.pause}
                                         onClick={onPlayPauseClick}
                                         {...video} />;
                                 case 'Fullscreen':
                                     return <Fullscreen
                                         key={i}
+                                        ariaLabel={copy.fullscreen}
                                         onClick={onFullscreenClick}
                                         {...video} />;
                                 case 'Time':
@@ -76,14 +82,17 @@ export const DefaultPlayer = ({
                                 case 'Volume':
                                     return <Volume
                                         key={i}
-                                        onChange={onVolumeChange}
                                         onClick={onVolumeClick}
+                                        onChange={onVolumeChange}
+                                        ariaLabelMute={copy.mute}
+                                        ariaLabelUnmute={copy.unmute}
                                         {...video} />;
                                 case 'Captions':
                                     return video.textTracks && video.textTracks.length
                                         ? <Captions
                                             key={i}
                                             onClick={onCaptionsClick}
+                                            ariaLabel={copy.captions}
                                             onItemClick={onCaptionsItemClick}
                                             {...video}/>
                                         : null;
@@ -100,13 +109,15 @@ export const DefaultPlayer = ({
 const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen', 'Captions'];
 
 DefaultPlayer.defaultProps = {
-    video: {},
-    controls
+    copy,
+    controls,
+    video: {}
 };
 
 DefaultPlayer.propTypes = {
-    video: PropTypes.object.isRequired,
-    controls: PropTypes.arrayOf(PropTypes.oneOf(controls))
+    copy: PropTypes.object.isRequired,
+    controls: PropTypes.arrayOf(PropTypes.oneOf(controls)),
+    video: PropTypes.object.isRequired
 };
 
 export default videoConnect(
diff --git a/src/DefaultPlayer/Fullscreen/Fullscreen.js b/src/DefaultPlayer/Fullscreen/Fullscreen.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Fullscreen.css';
 import FullscreenIcon from './../Icon/fullscreen.svg';
 
-export default ({ onClick, className }) => {
+export default ({ onClick, className, ariaLabel }) => {
     return (
         <div className={[
             styles.component,
@@ -11,7 +11,7 @@ export default ({ onClick, className }) => {
             <button
                 type="button"
                 onClick={onClick}
-                aria-label="Fullscreen"
+                aria-label={ariaLabel}
                 className={styles.button}>
                     <FullscreenIcon
                         fill="#fff"
diff --git a/src/DefaultPlayer/Fullscreen/Fullscreen.test.js b/src/DefaultPlayer/Fullscreen/Fullscreen.test.js
@@ -7,7 +7,9 @@ describe('Fullscreen', () => {
     let component;
 
     beforeAll(() => {
-        component = shallow(<Fullscreen />);
+        component = shallow(
+            <Fullscreen ariaLabel="Fullscreen" />
+        );
     });
 
     it('should accept a className prop and append it to the components class', () => {
diff --git a/src/DefaultPlayer/PlayPause/PlayPause.js b/src/DefaultPlayer/PlayPause/PlayPause.js
@@ -3,7 +3,7 @@ import styles from './PlayPause.css';
 import PlayArrow from './../Icon/play_arrow.svg';
 import Pause from './../Icon/pause.svg';
 
-export default ({ onClick, paused, className }) => {
+export default ({ onClick, paused, className, ariaLabelPlay, ariaLabelPause }) => {
     return (
         <div className={[
             styles.component,
@@ -13,8 +13,8 @@ export default ({ onClick, paused, className }) => {
                 className={styles.button}
                 onClick={onClick}
                 aria-label={ paused
-                    ? 'Play'
-                    : 'Pause' }
+                    ? ariaLabelPlay
+                    : ariaLabelPause }
                 type="button">
                 { paused
                     ? <PlayArrow
diff --git a/src/DefaultPlayer/PlayPause/PlayPause.test.js b/src/DefaultPlayer/PlayPause/PlayPause.test.js
@@ -9,7 +9,11 @@ describe('PlayPause', () => {
     let component;
 
     beforeAll(() => {
-        component = shallow(<PlayPause />);
+        component = shallow(
+            <PlayPause
+                ariaLabelPlay="Play"
+                ariaLabelPause="Pause" />
+        );
     });
 
     it('should accept a className prop and append it to the components class', () => {
diff --git a/src/DefaultPlayer/Seek/Seek.js b/src/DefaultPlayer/Seek/Seek.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Seek.css';
 
-export default ({ onChange, percentagePlayed, percentageBuffered, className }) => {
+export default ({ onChange, percentagePlayed, percentageBuffered, className, ariaLabel }) => {
     return (
         <div className={[
             styles.component,
@@ -25,6 +25,7 @@ export default ({ onChange, percentagePlayed, percentageBuffered, className }) =
                     type="range"
                     orient="horizontal"
                     onChange={onChange}
+                    aria-label={ariaLabel}
                     className={styles.input}
                     value={percentagePlayed} />
             </div>
diff --git a/src/DefaultPlayer/Volume/Volume.js b/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 }) => {
+export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute }) => {
     const volumeValue = muted
         ? 0
         : +volume;
@@ -15,8 +15,8 @@ export default ({ onChange, onClick, volume, muted, className }) => {
         ].join(' ')}>
             <button
                 aria-label={isSilent
-                    ? 'Unmute'
-                    : 'Mute'}
+                    ? ariaLabelUnmute
+                    : ariaLabelMute}
                 className={styles.button}
                 onClick={onClick}
                 type="button">
diff --git a/src/DefaultPlayer/Volume/Volume.test.js b/src/DefaultPlayer/Volume/Volume.test.js
@@ -9,7 +9,11 @@ describe('Volume', () => {
     let component;
 
     beforeAll(() => {
-        component = shallow(<Volume />);
+        component = shallow(
+            <Volume
+                ariaLabelMute="Mute"
+                ariaLabelUnmute="Unmute" />
+        );
     });
 
     it('should accept a className prop and append it to the components class', () => {
diff --git a/src/DefaultPlayer/copy.js b/src/DefaultPlayer/copy.js
@@ -0,0 +1,11 @@
+const copy = {
+    play: 'Play video',
+    pause: 'Pause video',
+    mute: 'Mute video',
+    unmute: 'Unmute video',
+    fullscreen: 'View video fullscreen',
+    seek: 'Seek video',
+    captions: 'Toggle captions'
+};
+
+export default copy;
