fix(search): add button to clear icon for a11y (#864)

Author: tw15egan

src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -937,35 +937,37 @@ exports[`DataTable should render 1`] = `
                     placeholder="Search"
                     type="text"
                   />
-                  <Icon
+                  <button
                     className="bx--search-close bx--search-close--hidden"
-                    description="close"
-                    fillRule="evenodd"
-                    name="close--glyph"
                     onClick={[Function]}
-                    role="img"
+                    type="button"
                   >
-                    <svg
-                      alt="close"
-                      aria-label="close"
-                      className="bx--search-close bx--search-close--hidden"
+                    <Icon
+                      description="close"
                       fillRule="evenodd"
-                      height="16"
                       name="close--glyph"
-                      onClick={[Function]}
                       role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
                     >
-                      <title>
-                        close
-                      </title>
-                      <path
-                        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"
-                        key="key0"
-                      />
-                    </svg>
-                  </Icon>
+                      <svg
+                        alt="close"
+                        aria-label="close"
+                        fillRule="evenodd"
+                        height="16"
+                        name="close--glyph"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <title>
+                          close
+                        </title>
+                        <path
+                          d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"
+                          key="key0"
+                        />
+                      </svg>
+                    </Icon>
+                  </button>
                 </div>
               </Search>
             </div>

src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -66,35 +66,37 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
           placeholder="Search"
           type="text"
         />
-        <Icon
+        <button
           className="bx--search-close bx--search-close--hidden"
-          description="close"
-          fillRule="evenodd"
-          name="close--glyph"
           onClick={[Function]}
-          role="img"
+          type="button"
         >
-          <svg
-            alt="close"
-            aria-label="close"
-            className="bx--search-close bx--search-close--hidden"
+          <Icon
+            description="close"
             fillRule="evenodd"
-            height="16"
             name="close--glyph"
-            onClick={[Function]}
             role="img"
-            viewBox="0 0 16 16"
-            width="16"
           >
-            <title>
-              close
-            </title>
-            <path
-              d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"
-              key="key0"
-            />
-          </svg>
-        </Icon>
+            <svg
+              alt="close"
+              aria-label="close"
+              fillRule="evenodd"
+              height="16"
+              name="close--glyph"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <title>
+                close
+              </title>
+              <path
+                d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"
+                key="key0"
+              />
+            </svg>
+          </Icon>
+        </button>
       </div>
     </Search>
   </div>

src/components/Search/Search-test.js

@@ -75,10 +75,10 @@ describe('Search', () => {
     describe('Large Search', () => {
       describe('buttons', () => {
         const btns = wrapper.find('button');
-        const sortBtn = btns.first();
+        const sortBtn = btns.last();
 
-        it('should be two buttons', () => {
-          expect(btns.length).toBe(2);
+        it('should be three buttons', () => {
+          expect(btns.length).toBe(3);
         });
 
         it('should have type="button"', () => {
@@ -145,9 +145,9 @@ describe('Search', () => {
         expect(smallContainer.hasClass('bx--search--sm')).toEqual(true);
       });
 
-      it('should not have buttons', () => {
+      it('should only have 1 button (clear)', () => {
         const btn = small.find('button');
-        expect(btn.length).toEqual(0);
+        expect(btn.length).toEqual(1);
       });
 
       it('renders one Icon', () => {
@@ -198,13 +198,13 @@ describe('Search', () => {
       });
 
       it('should toggle layout to "grid" when clicked', () => {
-        const button = wrapper.find('button').at(1);
+        const button = wrapper.find('button').at(2);
         button.simulate('click');
         const icon = wrapper.find(Icon).at(3);
         expect(icon.props().name).toEqual('grid');
       });
       it('should toggle layout to "list" when clicked and currently set to "grid"', () => {
-        const button = wrapper.find('button').at(1);
+        const button = wrapper.find('button').at(2);
         wrapper.setState({
           format: 'grid',
         });

src/components/Search/Search.js

@@ -16,6 +16,7 @@ export default class Search extends Component {
     id: PropTypes.string,
     searchButtonLabelText: PropTypes.string,
     layoutButtonLabelText: PropTypes.string,
+    closeButtonLabelText: PropTypes.string,
   };
 
   static defaultProps = {
@@ -66,6 +67,7 @@ export default class Search extends Component {
       labelText,
       searchButtonLabelText,
       layoutButtonLabelText,
+      closeButtonLabelText,
       small,
       children,
       ...other
@@ -108,12 +110,13 @@ export default class Search extends Component {
             this.input = input;
           }}
         />
-        <Icon
-          name="close--glyph"
-          description="close"
+        <button
           className={clearClasses}
           onClick={this.clearInput}
-        />
+          type="button"
+          aria-label={closeButtonLabelText}>
+          <Icon name="close--glyph" description="close" />
+        </button>
         {children}
         {renderButtons && (
           <SearchFilterButton labelText={searchButtonLabelText} />