Added a hidden legend tag to describe the tablist for screen readers

erin-doyle · Sep 2, 2018 · d9cd674 · d9cd674
1 parent 9579770
commit d9cd674
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/public/app.css b/public/app.css
@@ -52,6 +52,14 @@ a {
     border-color: var(--dark-blue);
 }
 
+.screen-reader-text {
+    position: absolute !important;
+    height: 1px; width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+}
+
 .no-movies-container {
     margin-top: 50px;
     text-align: center;

diff --git a/src/browse/MovieBrowser.js b/src/browse/MovieBrowser.js
@@ -36,7 +36,7 @@ const MovieBrowser = ({
             <Header title="Browse Movies" buttonText="< Back" buttonLabel="Back to Wish List" handleButtonClick={goToWishlist} />
 
             <main>
-                <TabList ariaLabel="Movie Genres" tabList={tabList} />
+                <TabList ariaLabel="Select a Movie Genre to Browse" tabList={tabList} />
 
                 <div
                     id={`${selectedGenre}-panel`}

diff --git a/src/primitives/TabList.js b/src/primitives/TabList.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
@@ -165,9 +165,12 @@ class TabList extends Component {
         });
 
         return (
-            <div className="nav nav-tabs nav-justified" role="tablist" aria-label={ariaLabel} tabIndex="0">
-                {tabItems}
-            </div>
+            <Fragment>
+                <legend id="tablist-title" className="screen-reader-text">{ariaLabel}</legend>
+                <div className="nav nav-tabs nav-justified" role="tablist" aria-describedby="tablist-title" tabIndex="0">
+                    {tabItems}
+                </div>
+            </Fragment>
         );
     }
 }

diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
@@ -77,7 +77,7 @@ class MovieWishlist extends Component {
                         // Show WishList
                         ? <Fragment>
 
-                            <TabList ariaLabel="WishLists by Status" tabList={tabList} />
+                            <TabList ariaLabel="Select a WishList by Status" tabList={tabList} />
 
                             <div
                                 id={`${selectedStatus}-panel`}