fix(TableToolbarSearch): allow screen reader navigation (#7986)

* refactor(data-table-action): specify background-color * fix(TableToolbarSearch): remove toolbar action class * refactor(data-table-action): use rem based calculation * fix(TableToolbarSearch): remove toolbar search container * chore: update snapshots * fix(data-table-action): update spacing token
carbon-design-system · Mar 30, 2021 · 8abe3ae · 8abe3ae
1 parent 7a80e67
commit 8abe3ae
Show file tree

Hide file tree

Showing 4 changed files with 286 additions and 399 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
@@ -23,7 +23,7 @@
     width: 100%;
     height: $spacing-09;
     overflow: hidden;
-    background: $ui-01;
+    background-color: $ui-01;
   }
 
   .#{$prefix}--toolbar-content {
@@ -63,126 +63,82 @@
     width: $spacing-09;
     height: $spacing-09;
     box-shadow: none;
-    transition: flex $transition--expansion $carbon--standard-easing;
+    cursor: pointer;
+    transition: width $transition--expansion $carbon--standard-easing,
+      background-color $duration--fast-02 motion(entrance, productive);
+
+    &:hover {
+      background-color: $hover-field;
+    }
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search {
-    position: initial;
-    width: $spacing-09;
+  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
   }
 
   .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier {
     left: 0;
     width: $spacing-09;
     height: $spacing-09;
     padding: $spacing-05;
-    cursor: pointer;
-    transition: background $duration--fast-02 motion(entrance, productive);
-    pointer-events: all;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search--disabled
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
     .#{$prefix}--search-magnifier {
-    background: $disabled-01;
+    background-color: $disabled-01;
     cursor: not-allowed;
     transition: background-color none;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-magnifier:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-magnifier:hover {
-    background: $hover-field;
-  }
-
-  .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
+  .#{$prefix}--toolbar-search-container-disabled {
     cursor: not-allowed;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier:hover {
-    background: $disabled-01;
-    cursor: not-allowed;
-    transition: background-color none;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--label {
     visibility: hidden;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
-    height: 100%;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    visibility: hidden;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--search-close {
     width: $spacing-09;
     height: $spacing-09;
 
     &::before {
-      top: 2px;
-      height: calc(100% - 4px);
+      top: rem(2px);
+      height: calc(100% - #{rem(4px)});
       background-color: $hover-ui;
     }
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--search-close:focus::before {
     background-color: $focus;
   }
 
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
-  .#{$prefix}--toolbar-search-container-active {
-    flex: auto;
-    transition: flex $duration--moderate-01 motion(standard, productive);
-  }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search {
+  .#{$prefix}--toolbar-search-container-active.#{$prefix}--search {
     width: 100%;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--label,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
-    padding: 0 $spacing-09;
-    visibility: inherit;
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
+    opacity: 1;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-input:focus {
-    @include focus-outline('outline');
-
-    box-shadow: inset 0 0 0 2px $focus;
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--label,
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
+    padding: 0 $spacing-09;
+    cursor: text;
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-input:focus
     + .#{$prefix}--search-close {
     border: none;
@@ -191,22 +147,18 @@
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-input:not(:placeholder-shown) {
-    background: $hover-field;
+    background-color: $hover-field;
     border: none;
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:focus,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:active,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:hover {
-    background: transparent;
+    background-color: transparent;
     border: none;
     outline: none;
   }
@@ -217,12 +169,8 @@
   .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search-close:hover,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-close:hover {
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close,
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover {
     background-color: transparent;
     border: none;
   }
@@ -258,11 +206,11 @@
   }
 
   .#{$prefix}--toolbar-action:hover:not([disabled]) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
   .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
-    background: $ui-01;
+    background-color: $ui-01;
   }
 
   .#{$prefix}--toolbar-action[disabled] {
@@ -325,43 +273,34 @@
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier {
     left: $spacing-05;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
     height: $spacing-09;
     padding: 0 $spacing-09;
     border: none;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:focus:not([disabled]) {
     @include focus-outline('outline');
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:hover:not([disabled]) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:active:not([disabled]),
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:not(:placeholder-shown) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
-    .#{$prefix}--search-close {
+  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
     width: $spacing-09;
     height: $spacing-09;
   }
@@ -514,30 +453,20 @@
       height: rem(32px);
     }
 
-    .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
-      .#{$prefix}--search-input,
-    .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
-      .#{$prefix}--search-input {
+    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
+    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
       height: rem(32px);
     }
 
-    .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
-      .#{$prefix}--search-close,
-    .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
-      .#{$prefix}--search-close {
+    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
+    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
       width: rem(32px);
       height: rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier,
     .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier {
       width: rem(32px);
       height: rem(32px);
@@ -565,46 +494,38 @@
       transition: flex 175ms $carbon--standard-easing;
     }
 
-    .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
-      .#{$prefix}--search-input {
+    .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
       visibility: inherit;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:focus {
       @include focus-outline('outline');
 
-      background: $hover-field;
+      background-color: $hover-field;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:active,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:not(:placeholder-shown) {
-      background: $hover-field;
+      background-color: $hover-field;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:focus,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:active,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:hover {
       @include focus-outline('reset');
 
-      background: transparent;
+      background-color: transparent;
     }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
-    background: transparent;
+    background-color: transparent;
   }
 
   //-------------------------------------------------