fix(multiselect): 5880-multiselect-active-descendent (#7908)

* fix(multiselect): 5880-multiselect-active-descendent * fix(multiselect): adds visually hidden description * chore: update ListBox test * feat: add delete key * fix: use keys/match for evt listener * fix: support backspace or delete * fix: add prop for clear selection text * chore: update tests * fix: combine title with delete description * chore: update tests Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: DAK <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 18, 2021 · ff5c467 · ff5c467
1 parent 038aa67
commit ff5c467
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 6 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3672,6 +3672,8 @@ Map {
       },
     },
     "defaultProps": Object {
+      "clearSelectionDescription": "Total items selected: ",
+      "clearSelectionText": "To clear selection, press Delete or Backspace,",
       "compareItems": [Function],
       "direction": "bottom",
       "disabled": false,
@@ -3687,6 +3689,12 @@ Map {
     },
     "displayName": "MultiSelect",
     "propTypes": Object {
+      "clearSelectionDescription": Object {
+        "type": "string",
+      },
+      "clearSelectionText": Object {
+        "type": "string",
+      },
       "compareItems": Object {
         "isRequired": true,
         "type": "func",

diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -76,6 +76,7 @@ const ListBoxSelection = ({
         onKeyDown={handleOnKeyDown}
         disabled={disabled}
         aria-label={t('clear.all')}
+        aria-hidden={true}
         title={description}>
         <Close16 />
       </div>
@@ -88,6 +89,7 @@ const ListBoxSelection = ({
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
       aria-label={description}
+      aria-hidden={true}
       title={description}>
       {selectionCount}
       <Close16 />

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
@@ -14,6 +14,7 @@ exports[`ListBoxField should render 1`] = `
       translateWithId={[Function]}
     >
       <div
+        aria-hidden={true}
         aria-label="Clear selected item"
         className="bx--list-box__selection"
         onClick={[Function]}

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap
@@ -34,6 +34,7 @@ exports[`ListBoxSelection should render 1`] = `
   }
 >
   <div
+    aria-hidden={true}
     aria-label="translation"
     className="bx--list-box__selection"
     onClick={[Function]}
@@ -115,6 +116,7 @@ exports[`ListBoxSelection should render 2`] = `
       3
     </span>
     <div
+      aria-hidden={true}
       aria-label="translation"
       className="bx--tag__close-icon"
       onClick={[Function]}

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -20,6 +20,7 @@ import { useSelection } from '../../internal/Selection';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
+import { keys, match } from '../../internal/keyboard';
 
 const { prefix } = settings;
 const noop = () => {};
@@ -50,6 +51,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     initialSelectedItems,
     sortItems,
     compareItems,
+    clearSelectionText,
+    clearSelectionDescription,
     light,
     invalid,
     invalidText,
@@ -193,15 +196,26 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     }
   }
 
+  const onKeyDown = (e) => {
+    if (match(e, keys.Delete) && !disabled) {
+      clearSelection();
+      e.stopPropagation();
+    }
+  };
+
   const toggleButtonProps = getToggleButtonProps();
 
   return (
     <div className={wrapperClasses}>
-      {titleText && (
-        <label className={titleClasses} {...getLabelProps()}>
-          {titleText}
-        </label>
-      )}
+      <label className={titleClasses} {...getLabelProps()}>
+        {titleText && titleText}
+        {selectedItems.length > 0 && (
+          <span className={`${prefix}--visually-hidden`}>
+            {clearSelectionDescription} {selectedItems.length},
+            {clearSelectionText}
+          </span>
+        )}
+      </label>
       <ListBox
         type={type}
         size={size}
@@ -228,7 +242,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
           disabled={disabled}
           aria-disabled={disabled}
           {...toggleButtonProps}
-          ref={mergeRefs(toggleButtonProps.ref, ref)}>
+          ref={mergeRefs(toggleButtonProps.ref, ref)}
+          onKeyDown={onKeyDown}>
           {selectedItems.length > 0 && (
             <ListBox.Selection
               clearSelection={!disabled ? clearSelection : noop}
@@ -290,6 +305,16 @@ MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...sortingPropTypes,
 
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes.string,
+
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes.string,
+
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -431,6 +456,8 @@ MultiSelect.defaultProps = {
   open: false,
   selectionFeedback: 'top-after-reopen',
   direction: 'bottom',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: ',
 };
 
 export default MultiSelect;
diff --git a/packages/react/src/internal/keyboard/keys.js b/packages/react/src/internal/keyboard/keys.js
@@ -80,3 +80,9 @@ export const ArrowDown = {
   which: 40,
   keyCode: 40,
 };
+
+export const Delete = {
+  key: 'Delete',
+  which: 8 || 46,
+  keyCode: 8 || 46,
+};