fix(accessibility): add basic accessibility compliance

unbxd · May 13, 2021 · aa8a362 · aa8a362
1 parent 1e1989c
commit aa8a362
Show file tree

Hide file tree

Showing 46 changed files with 1,357 additions and 38 deletions.
diff --git a/demo/src/components/ActiveFilters.js b/demo/src/components/ActiveFilters.js
@@ -4,17 +4,19 @@ import React from 'react';
 import { SelectedFacets } from '@unbxd-ui/react-search-sdk';
 
 export const FacetItemComponent = ({ itemData, onClick, priceUnit }) => {
-    const { name, type, dataId } = itemData;
+    const { name, type, dataId, facetName } = itemData;
     const handleClick = () => {
         onClick(itemData);
     };
 
     let selectedFacetMarkup = null;
+    let facetVal = dataId;
     if (type === 'TEXT_FACET') {
         selectedFacetMarkup = <span>{name}</span>;
     }
     if (type === 'RANGE_FACET') {
         const [valMin, valMax] = dataId.split(' TO ');
+        facetVal = `[${valMin}-${valMax}]`;
         selectedFacetMarkup = (
             <span>
                 {priceUnit} {valMin} - {priceUnit} {valMax}
@@ -23,7 +25,14 @@ export const FacetItemComponent = ({ itemData, onClick, priceUnit }) => {
     }
 
     return (
-        <div className="UNX-selectedFacets__item" onClick={handleClick}>
+        <div
+            className="UNX-selectedFacets__item"
+            onClick={handleClick}
+            data-facet-name={facetName}
+            data-id={facetVal}
+            tabIndex={0}
+            role={'button'}
+        >
             {selectedFacetMarkup} <span className="-cross" />
         </div>
     );

diff --git a/demo/src/components/MultilevelFilters.js b/demo/src/components/MultilevelFilters.js
@@ -4,7 +4,7 @@ import { MultilevelFacets } from '@unbxd-ui/react-search-sdk';
 import { scrollTop } from '../utils';
 
 export const FacetItemComponent = ({ itemData, onClick }) => {
-    const { name, count, level, isSelected } = itemData;
+    const { name, count, level, isSelected, fieldName } = itemData;
     const handleClick = () => {
         onClick(itemData);
     };
@@ -15,6 +15,10 @@ export const FacetItemComponent = ({ itemData, onClick }) => {
             }`}
             onClick={handleClick}
             data-testid="UNX_multilevelFacet__facetItem"
+            data-facet-name={fieldName}
+            data-id={name}
+            tabIndex={0}
+            role={'button'}
         >
             <div className="-checkbox" />
             <div className="-label">{name}</div>

diff --git a/demo/src/components/ProductsSize.js b/demo/src/components/ProductsSize.js
@@ -9,7 +9,6 @@ export const sizeOptions = [
     { id: 20, value: '20', label: '20' }
 ];
 
-
 export const PageSizeItemComponent = ({ itemData, onClick }) => {
     const { value, isSelected } = itemData;
     const handleClick = () => {
@@ -44,19 +43,33 @@ export const PageSizeItemDropdownComponent = ({
     };
     return (
         <div className="UNX-pageSize__container">
-            <span className="-label">Products per page</span>
+            <label
+                className="-label"
+                id="UNX-pageSize__dropdown-label"
+                htmlFor="UNX-pageSize__dropdown-input"
+            >
+                Products per page
+            </label>
             <Select
                 defaultValue={selectedOption}
                 options={sizeOptions}
                 value={selectedOption}
                 onChange={handleChange}
                 className="UNX-pageSize__dropdown UNX-dropdown-container"
                 classNamePrefix="UNX-dropdown"
+                aria-labelledby="UNX-pageSize__dropdown-label"
+                inputId="UNX-pageSize__dropdown-input"
             />
         </div>
     );
 };
 
+const label = (
+    <div className="-label" htmlFor={'UNX-pageSize__dropdown'}>
+        Sort by
+    </div>
+);
+
 // const ProductsSize = () => {
 //     return (
 //         <PageSize

diff --git a/demo/src/components/RangeFilters.js b/demo/src/components/RangeFilters.js
@@ -100,6 +100,10 @@ export const FacetItemComponent = ({ itemData, onClick, priceUnit }) => {
             className={`UNX-facet__item ${isSelected ? '-selected' : ''}`}
             onClick={handleClick}
             data-testid="UNX_rangeFacet__facetItem"
+            data-facet-name={facetName}
+            data-id={`[${fromDataId}-${toDataId}]`}
+            tabIndex={0}
+            role={'button'}
         >
             <div className="-checkbox" />
             <div className="-label">

diff --git a/demo/src/components/SearchBar.js b/demo/src/components/SearchBar.js
@@ -9,7 +9,11 @@ import { categoryLinks } from '../config';
 
 export const SearchButton = ({ onSearchBoxSubmit }) => {
     return (
-        <button onClick={onSearchBoxSubmit} className="UNX-searchbox__button" />
+        <button
+            onClick={onSearchBoxSubmit}
+            className="UNX-searchbox__button"
+            aria-label="Search"
+        />
     );
 };
 
@@ -81,7 +85,7 @@ const SearchBar = (props) => {
 
     return (
         <div className="UNX-header__container">
-            <a href="/">
+            <a href="/" aria-label="Unbxd">
                 <span className="UNX-header__logo" />
             </a>
             <CategoryLinks
@@ -106,6 +110,7 @@ const SearchBar = (props) => {
                     options={languageOptions}
                     className="UNX-language__dropdown UNX-dropdown-container"
                     classNamePrefix="UNX-dropdown"
+                    aria-label="language options"
                 />
                 <i className="UNX-cart__icon fa fa-shopping-bag fa-2x" />
             </div>

diff --git a/demo/src/components/Sorter.js b/demo/src/components/Sorter.js
@@ -17,7 +17,13 @@ export const sortOptions = [
         order: 'desc'
     }
 ];
-const label = <div className="-label">Sort by</div>;
+
+const label = (
+    <div className="-label" htmlFor={'UNX-sortby__dropdown'}>
+        Sort by
+    </div>
+);
+
 const onSortChange = (field, order) => {
     console.log('Sort change: ', field, order);
     return true;
@@ -52,14 +58,22 @@ const SortItemDropdownComponent = ({ sortOptions, noOfPages, onSortClick }) => {
     };
     return (
         <div className="UNX-sortby__container">
-            <span className="-label">Sort By</span>
+            <label
+                className="-label"
+                id="UNX-sortby__dropdown-label"
+                htmlFor="UNX-sortby__dropdown-input"
+            >
+                Sort By
+            </label>
             <Select
                 defaultValue={sortOptions[0]}
                 options={sortOptions}
                 value={selectedOption}
                 onChange={handleChange}
                 className="UNX-sort__dropdown UNX-dropdown-container"
                 classNamePrefix="UNX-dropdown"
+                aria-labelledby="UNX-sortby__dropdown-label"
+                inputId="UNX-sortby__dropdown-input"
             />
         </div>
     );

diff --git a/demo/src/components/SpellChecker.js b/demo/src/components/SpellChecker.js
@@ -15,6 +15,8 @@ export const SpellCheckItemComponent = ({ itemData, onClick }) => {
                 className="-suggestion"
                 onClick={handleClick}
                 data-testid="UNX_spellCheck"
+                tabIndex={0}
+                role={'button'}
             >
                 {suggestion}
             </span>

diff --git a/demo/src/components/TextFilters.js b/demo/src/components/TextFilters.js
@@ -9,7 +9,7 @@ export const transform = function () {
 };
 
 export const FacetItemComponent = ({ itemData, onClick }) => {
-    const { name, count, isSelected } = itemData;
+    const { name, count, isSelected, facetName } = itemData;
     const handleClick = () => {
         onClick(itemData);
     };
@@ -19,6 +19,10 @@ export const FacetItemComponent = ({ itemData, onClick }) => {
             className={`UNX-facet__item ${isSelected ? '-selected' : ''}`}
             onClick={handleClick}
             data-testid="UNX_textFacet__facetItem"
+            data-facet-name={facetName}
+            data-id={name}
+            tabIndex={0}
+            role={'button'}
         >
             <div className="-checkbox" />
             <div className="-label">{name}</div>

diff --git a/demo/src/pages/Accessories.js b/demo/src/pages/Accessories.js
@@ -26,7 +26,7 @@ const Accessories = () => {
         setProductType('CATEGORY');
     }, []);
     return (
-        <div className="UNX-search__container">
+        <main className="UNX-search__container">
             <div className="UNX-searchMeta__container">
                 <Crumbs />
                 <div className="UNX-searchMeta__more">
@@ -60,7 +60,7 @@ const Accessories = () => {
                     <Paginator />
                 </div>
             </div>
-        </div>
+        </main>
     );
 };
 

diff --git a/demo/src/pages/Balls.js b/demo/src/pages/Balls.js
@@ -26,7 +26,7 @@ const Balls = () => {
         setProductType('CATEGORY');
     }, []);
     return (
-        <div className="UNX-search__container">
+        <main className="UNX-search__container">
             <div className="UNX-searchMeta__container">
                 <Crumbs />
                 <div className="UNX-searchMeta__more">
@@ -60,7 +60,7 @@ const Balls = () => {
                     <Paginator />
                 </div>
             </div>
-        </div>
+        </main>
     );
 };
 

diff --git a/demo/src/pages/Grips.js b/demo/src/pages/Grips.js
@@ -26,7 +26,7 @@ const Grips = () => {
         setProductType('CATEGORY');
     }, []);
     return (
-        <div className="UNX-search__container">
+        <main className="UNX-search__container">
             <div className="UNX-searchMeta__container">
                 <Crumbs />
                 <div className="UNX-searchMeta__more">
@@ -60,7 +60,7 @@ const Grips = () => {
                     <Paginator />
                 </div>
             </div>
-        </div>
+        </main>
     );
 };
 

diff --git a/demo/src/pages/Home.js b/demo/src/pages/Home.js
@@ -28,7 +28,7 @@ const Home = (props) => {
         }
     }, []);
     return (
-        <div className="UNX-search__container">
+        <main className="UNX-search__container">
             <div className="UNX-searchMeta__container">
                 <Crumbs />
                 <div className="UNX-searchMeta__more">
@@ -62,7 +62,7 @@ const Home = (props) => {
                     <Paginator />
                 </div>
             </div>
-        </div>
+        </main>
     );
 };
 

diff --git a/demo/src/pages/Strings.js b/demo/src/pages/Strings.js
@@ -26,7 +26,7 @@ const Strings = () => {
         setProductType('CATEGORY');
     }, []);
     return (
-        <div className="UNX-search__container">
+        <main className="UNX-search__container">
             <div className="UNX-searchMeta__container">
                 <Crumbs />
                 <div className="UNX-searchMeta__more">
@@ -60,7 +60,7 @@ const Strings = () => {
                     <Paginator />
                 </div>
             </div>
-        </div>
+        </main>
     );
 };
 

diff --git a/public/css/core/base.scss b/public/css/core/base.scss
@@ -8,11 +8,6 @@ body {
   box-sizing: border-box;
 }
 
-button {
-  outline-color: transparent !important;
-  border-radius:1px;
-}
-
 body {
   background-color: #f6f6f6;
   margin:0;

diff --git a/public/css/core/modules.scss b/public/css/core/modules.scss
@@ -233,3 +233,7 @@
 .hidden {
     display: none;
 }
+
+.-label {
+    margin-bottom: 0;
+}
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Button = (props) => <button {...props}>{props.children}</button>;
+const Button = (props) => (
+    <button type="button" tabIndex={0} {...props}>
+        {props.children}
+    </button>
+);
 
 Button.propTypes = {
     children: PropTypes.oneOfType([

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -27,7 +27,8 @@ class Input extends React.PureComponent {
             clearable,
             clearComponent,
             onClear,
-            placeholder
+            placeholder,
+            ariaLabel
         } = this.props;
         const showClear = value && value.length > 0 && clearable;
 
@@ -40,6 +41,7 @@ class Input extends React.PureComponent {
                     onChange={onChange ? onChange : null}
                     className={className}
                     ref={this.inputRef}
+                    aria-label={ariaLabel}
                 />
                 {showClear &&
                     (clearComponent ? (
@@ -76,7 +78,8 @@ Input.propTypes = {
     className: PropTypes.string,
     clearable: PropTypes.bool,
     autoFocus: PropTypes.bool,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    ariaLabel: PropTypes.string
 };
 
 export default Input;
diff --git a/src/components/ViewMore.js b/src/components/ViewMore.js
@@ -6,6 +6,9 @@ const ViewMore = ({ facetName, toggleViewLess, viewLess, ...props }) => {
             className="view-More"
             data-unx_name={facetName}
             onClick={toggleViewLess}
+            aria-label="view less facets"
+            tabIndex={0}
+            role={'button'}
         >
             View Less
         </div>
@@ -14,6 +17,9 @@ const ViewMore = ({ facetName, toggleViewLess, viewLess, ...props }) => {
             className="view-More"
             data-unx_name={facetName}
             onClick={toggleViewLess}
+            aria-label="view more facets"
+            tabIndex={0}
+            role={'button'}
         >
             View More
         </div>

diff --git a/src/modules/banners/__tests__/__snapshots__/banners.test.js.snap b/src/modules/banners/__tests__/__snapshots__/banners.test.js.snap
@@ -214,7 +214,9 @@ Array [
           value="dunlop"
         />
         <button
+          aria-label="search"
           className="UNX-searchbox__button"
+          tabIndex={0}
           type="submit"
         >
           Search

diff --git a/src/modules/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.js.snap b/src/modules/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.js.snap
@@ -290,7 +290,9 @@ Array [
           value="*"
         />
         <button
+          aria-label="search"
           className="UNX-searchbox__button"
+          tabIndex={0}
           type="submit"
         >
           Search