fix(search): fix a11y structure (#4801)

This change does the following things: * Ensures that the `<label>` in `<Search>` is hidden when `<TableToolbarSearch>` hides it. This fixes the orphaned relationship between `<input>` and `<label>` when search box is collpased and fixes "INPUT LABEL references must be valid" DAP error * Changes the ARIA role of the search container in `<TableToolbarSearch>` to `search` rather than `searchbox`, to better reflect its "container" nature. Also added `searchbox` role to the underlying `<input>` to reflect where the search box is. This lets VoiceOver announce the `<input>` inside `<Search>` as a "search text field" rather than "edit text", and fixes "An interactive element/widget must have an accessible name" DAP error when search box is expanded Fixes #3806.
carbon-design-system · Dec 2, 2019 · f129993 · f129993
1 parent 6584943
commit f129993
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -94,6 +94,12 @@
     background: $hover-field;
   }
 
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--label {
+    visibility: hidden;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
     .#{$prefix}--search-input {
@@ -129,11 +135,14 @@
     width: 100%;
   }
 
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--label,
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-input {
     padding-left: $spacing-3xl;
-    visibility: visible;
+    visibility: inherit;
   }
 
   .#{$prefix}--toolbar-search-container-active

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -80,7 +80,7 @@ const TableToolbarSearch = ({
   return (
     <div
       tabIndex={expandedState ? '-1' : '0'}
-      role="searchbox"
+      role="search"
       ref={searchRef}
       onClick={event => handleExpand(event, true)}
       onFocus={event => handleExpand(event, true)}

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2228,7 +2228,7 @@ exports[`DataTable should render 1`] = `
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  role="searchbox"
+                  role="search"
                   tabIndex="0"
                 >
                   <Search
@@ -2289,6 +2289,7 @@ exports[`DataTable should render 1`] = `
                         id="custom-id"
                         onChange={[Function]}
                         placeholder="Filter table"
+                        role="searchbox"
                         type="text"
                         value=""
                       />
@@ -3203,7 +3204,7 @@ exports[`DataTable sticky header should render 1`] = `
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  role="searchbox"
+                  role="search"
                   tabIndex="0"
                 >
                   <Search
@@ -3264,6 +3265,7 @@ exports[`DataTable sticky header should render 1`] = `
                         id="custom-id"
                         onChange={[Function]}
                         placeholder="Filter table"
+                        role="searchbox"
                         type="text"
                         value=""
                       />

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -13,7 +13,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
-    role="searchbox"
+    role="search"
     tabIndex="0"
   >
     <Search
@@ -75,6 +75,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
           id="custom-id"
           onChange={[Function]}
           placeholder="Filter table"
+          role="searchbox"
           type="text"
           value=""
         />

diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
@@ -168,6 +168,7 @@ export default class Search extends Component {
           {labelText}
         </label>
         <input
+          role="searchbox"
           {...other}
           type={type}
           className={`${prefix}--search-input`}