Added a ref the the Add Some Movies link on the Movie WishList page t…

…hat is automatically focused on componentDidMount when it exists
erin-doyle · Sep 2, 2018 · 3630618 · 3630618
1 parent 743af51
commit 3630618
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/primitives/TabList.js b/src/primitives/TabList.js
@@ -27,9 +27,9 @@ class TabList extends Component {
     }
 
     componentDidUpdate() {
-        if (!this.selectedTabRef) return;
-
-        this.selectedTabRef.focus();
+        if (this.selectedTabRef) {
+            this.selectedTabRef.focus();
+        }
     }
 
     setSelectedTabRef(element) {

diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
@@ -19,11 +19,24 @@ class MovieWishlist extends Component {
             movieIdInEdit: null
         };
 
+        this.addSomeMoviesLink = null;
+
+        this.setAddSomeMoviesLinkRef = this.setAddSomeMoviesLinkRef.bind(this);
         this.handleShowEditor = this.handleShowEditor.bind(this);
         this.handleHideEditor = this.handleHideEditor.bind(this);
         this.handleUpdateMovie = this.handleUpdateMovie.bind(this);
     }
 
+    componentDidMount() {
+        if (this.addSomeMoviesLink) {
+            this.addSomeMoviesLink.focus();
+        }
+    }
+
+    setAddSomeMoviesLinkRef(element) {
+        this.addSomeMoviesLink = element;
+    }
+
     handleShowEditor(movieId) {
         this.setState({
             showEditor: true,
@@ -109,7 +122,9 @@ class MovieWishlist extends Component {
                         // No movies yet in the WishList
                         : <div aria-labelledby="noMoviesText addLink" className="no-movies-container">
                             <span id="noMoviesText">
-                                No Movies in your Wish List! <Link id="addLink" to="/browse">Add some Movies!</Link>
+                                No Movies in your Wish List! <Link id="addLink" to="/browse"
+                                        aria-label="Add some movies to your wishlist now!"
+                                        innerRef={this.setAddSomeMoviesLinkRef}>Add some Movies!</Link>
                             </span>
                         </div>
                     }