Added aria-labels for the Movie action toolbar buttons

src/browse/BrowseList.js

@@ -9,7 +9,7 @@ const BrowseList = ({ movieList, wishlist, movieActions }) => {
         const inWishlist = !!wishlist[movieId];
 
         return (
-            <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, inWishlist)}/>
+            <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, movie.name, inWishlist)}/>
         );
     });
 };

src/browse/getBrowseActions.js

@@ -1,13 +1,15 @@
 import React from 'react';
 
+import MovieToolbarButton from '../primitives/MovieToolbarButton';
 
-const getMovieActions = (handleAdd, handleRemove) => (movieId, inWishlist) => {
+
+const getMovieActions = (handleAdd, handleRemove) => (movieId, movieTitle, inWishlist) => {
     const buttonText = inWishlist ? 'Remove' : 'Add';
     const clickHandler = () => inWishlist ? handleRemove(movieId) : handleAdd(movieId);
 
     return (
         <div className="btn-group">
-            <button className="btn btn-secondary" onClick={clickHandler}>{buttonText}</button>
+            <MovieToolbarButton movieTitle={movieTitle} buttonText={buttonText} clickHandler={clickHandler} />
         </div>
     );
 };

src/primitives/MovieToolbarButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const MovieToolbarButton = ({ movieTitle, buttonText, buttonLabel, clickHandler }) => {
+    const ariaLabel = buttonLabel || `${buttonText} ${movieTitle}`;
+
+    return (
+        <button className="btn btn-secondary" aria-label={ariaLabel} onClick={clickHandler}>{buttonText}</button>
+    );
+};
+
+MovieToolbarButton.defaultProps = {
+    buttonText: '',
+    buttonLabel: null,
+    clickHandler: () => {}
+};
+
+MovieToolbarButton.propTypes = {
+    movieTitle: PropTypes.string.isRequired,
+    buttonText: PropTypes.string,
+    buttonLabel: PropTypes.string,
+    clickHandler: PropTypes.func
+};
+
+
+export default MovieToolbarButton;

src/wishlist/WishList.js

@@ -11,7 +11,7 @@ const WishList = ({ movieList, watched, movieActions }) => {
     return Object.entries(movieList)
         .filter(isWatched)
         .map(([ movieId, movie ]) =>
-                <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, movie.watched)}/>
+                <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, movie.name, movie.watched)}/>
         );
 };
 

src/wishlist/getWishlistActions.js

@@ -1,18 +1,19 @@
 import React from 'react';
+import MovieToolbarButton from '../primitives/MovieToolbarButton';
 
 
 const getMovieActions = (showEditor, setAsWatched, setAsUnwatched, handleRemove) =>
-    (movieId, watched) => {
+    (movieId, movieTitle, watched) => {
         const watchButtonText = watched ? 'Unwatch' : 'Watched';
         const watchClickHandler = () => watched ? setAsUnwatched(movieId) : setAsWatched(movieId);
         const editClickHandler = () => showEditor(movieId);
         const removeClickHandler = () => handleRemove(movieId);
 
         return (
             <div className="btn-group">
-                <button className="btn btn-secondary" onClick={watchClickHandler}>{watchButtonText}</button>
-                <button className="btn btn-secondary" onClick={editClickHandler}>Edit</button>
-                <button className="btn btn-secondary" onClick={removeClickHandler}>Remove</button>
+                <MovieToolbarButton movieTitle={movieTitle} buttonText={watchButtonText} clickHandler={watchClickHandler} />
+                <MovieToolbarButton movieTitle={movieTitle} buttonText="Edit" clickHandler={editClickHandler} />
+                <MovieToolbarButton movieTitle={movieTitle} buttonText="Remove" clickHandler={removeClickHandler} />
             </div>
         );
     };