From 50382e9eb8d4bbd1ffdd86cc85f9e064718b6f60 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Thu, 25 Feb 2021 16:58:05 -0700
Subject: [PATCH 01/10] fix(multiselect): 5880-multiselect-active-descendent

---
 .../react/src/components/MultiSelect/MultiSelect.js  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 77acd633ab69..93189e5ef4a9 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -191,6 +191,15 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     }
   }
 
+  const onKeyDown = (e) => {
+    console.log('pressed a key');
+    if (e.keyCode === 8 && !disabled) {
+      console.log('pressed DELETED');
+      clearSelection();
+      e.stopPropagation();
+    }
+  };
+
   const toggleButtonProps = getToggleButtonProps();
 
   return (
@@ -226,7 +235,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}

From 17c73becca381f414ad48e347c57b769ae45e73c Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Mon, 1 Mar 2021 15:23:59 -0700
Subject: [PATCH 02/10] fix(multiselect): adds visually hidden description

---
 .../react/src/components/ListBox/ListBoxSelection.js   |  2 ++
 .../react/src/components/MultiSelect/MultiSelect.js    | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index b73c26cdae9e..2a7b2ce5bc83 100644
--- 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/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 93189e5ef4a9..c77648d5f669 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -192,9 +192,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   }
 
   const onKeyDown = (e) => {
-    console.log('pressed a key');
     if (e.keyCode === 8 && !disabled) {
-      console.log('pressed DELETED');
       clearSelection();
       e.stopPropagation();
     }
@@ -229,7 +227,15 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
           />
         )}
+        {selectedItems.length > 0 && (
+          <span
+            className={`${prefix}--visually-hidden`}
+            id={`clear-button-label${id}`}>
+            To clear selection, press Delete
+          </span>
+        )}
         <button
+          aria-describedby={`clear-button-label${id}`}
           type="button"
           className={`${prefix}--list-box__field`}
           disabled={disabled}

From cf44869c31a5e8bcd036bf0661e0243905ba719e Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 1 Mar 2021 18:13:45 -0600
Subject: [PATCH 03/10] chore: update ListBox test

---
 .../ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap   | 1 +
 .../__tests__/__snapshots__/ListBoxSelection-test.js.snap       | 2 ++
 2 files changed, 3 insertions(+)

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
index a0408f6fe7b3..78f0165a05c6 100644
--- 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
index b45dd74ef280..f093eed8abb5 100644
--- 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]}

From 7cee63560f0a03c8f4a2d66eec95c8eca5279839 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 1 Mar 2021 19:09:42 -0600
Subject: [PATCH 04/10] feat: add delete key

---
 packages/react/src/internal/keyboard/keys.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react/src/internal/keyboard/keys.js b/packages/react/src/internal/keyboard/keys.js
index 0b8296ce88e8..d0a0ab9183b3 100644
--- 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,
+  keyCode: 8,
+};

From 3ed55a8a41765af227a5716d74b5c1fedacdb715 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 1 Mar 2021 19:10:07 -0600
Subject: [PATCH 05/10] fix: use keys/match for evt listener

---
 packages/react/src/components/MultiSelect/MultiSelect.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 9fa5f075d00c..fd1a0e3585ae 100644
--- 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 = () => {};
@@ -194,7 +195,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   }
 
   const onKeyDown = (e) => {
-    if (e.keyCode === 8 && !disabled) {
+    if (match(e, keys.Delete) && !disabled) {
       clearSelection();
       e.stopPropagation();
     }

From 86c2f606579e52ba70bccffaf93f81b2fdcf969e Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 15 Mar 2021 16:05:38 -0500
Subject: [PATCH 06/10] fix: support backspace or delete

---
 packages/react/src/internal/keyboard/keys.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/internal/keyboard/keys.js b/packages/react/src/internal/keyboard/keys.js
index d0a0ab9183b3..ebc6a5e884c1 100644
--- a/packages/react/src/internal/keyboard/keys.js
+++ b/packages/react/src/internal/keyboard/keys.js
@@ -83,6 +83,6 @@ export const ArrowDown = {
 
 export const Delete = {
   key: 'Delete',
-  which: 8,
-  keyCode: 8,
+  which: 8 || 46,
+  keyCode: 8 || 46,
 };

From 5d932ba06505bb7971a8f3290d573d08d9e31415 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 15 Mar 2021 16:27:13 -0500
Subject: [PATCH 07/10] fix: add prop for clear selection  text

---
 packages/react/src/components/MultiSelect/MultiSelect.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index fd1a0e3585ae..a8f78042e3ee 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -51,6 +51,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     initialSelectedItems,
     sortItems,
     compareItems,
+    clearSelectionText,
     light,
     invalid,
     invalidText,
@@ -234,7 +235,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
           <span
             className={`${prefix}--visually-hidden`}
             id={`clear-button-label${id}`}>
-            To clear selection, press Delete
+            {clearSelectionText}
           </span>
         )}
         <button
@@ -307,6 +308,11 @@ MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...sortingPropTypes,
 
+  /**
+   * 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.
    */
@@ -448,6 +454,7 @@ MultiSelect.defaultProps = {
   open: false,
   selectionFeedback: 'top-after-reopen',
   direction: 'bottom',
+  clearSelectionText: 'To clear selection, press Delete',
 };
 
 export default MultiSelect;

From 9a333057403a6b720163c05a3c80b3bc1eed7098 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 15 Mar 2021 18:12:35 -0500
Subject: [PATCH 08/10] chore: update tests

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index d934ef6d5b31..ff895106a435 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3672,6 +3672,7 @@ Map {
       },
     },
     "defaultProps": Object {
+      "clearSelectionText": "To clear selection, press Delete",
       "compareItems": [Function],
       "direction": "bottom",
       "disabled": false,
@@ -3687,6 +3688,9 @@ Map {
     },
     "displayName": "MultiSelect",
     "propTypes": Object {
+      "clearSelectionText": Object {
+        "type": "string",
+      },
       "compareItems": Object {
         "isRequired": true,
         "type": "func",

From 24faa79f2667463e516bf46a9e40ef2d0b20d811 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Tue, 16 Mar 2021 14:35:06 -0500
Subject: [PATCH 09/10] fix: combine title with delete description

---
 .../src/components/MultiSelect/MultiSelect.js | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index a8f78042e3ee..dd10e295b7d0 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -52,6 +52,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     sortItems,
     compareItems,
     clearSelectionText,
+    clearSelectionDescription,
     light,
     invalid,
     invalidText,
@@ -206,11 +207,15 @@ const MultiSelect = React.forwardRef(function MultiSelect(
 
   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}
@@ -231,15 +236,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
           />
         )}
-        {selectedItems.length > 0 && (
-          <span
-            className={`${prefix}--visually-hidden`}
-            id={`clear-button-label${id}`}>
-            {clearSelectionText}
-          </span>
-        )}
         <button
-          aria-describedby={`clear-button-label${id}`}
           type="button"
           className={`${prefix}--list-box__field`}
           disabled={disabled}
@@ -308,6 +305,11 @@ 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.
    */
@@ -454,7 +456,8 @@ MultiSelect.defaultProps = {
   open: false,
   selectionFeedback: 'top-after-reopen',
   direction: 'bottom',
-  clearSelectionText: 'To clear selection, press Delete',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: ',
 };
 
 export default MultiSelect;

From c0a0e63dcfb68289e13c716eaea5eaabebc991f3 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Tue, 16 Mar 2021 14:44:49 -0500
Subject: [PATCH 10/10] chore: update tests

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ff895106a435..fff76ed15b97 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3672,7 +3672,8 @@ Map {
       },
     },
     "defaultProps": Object {
-      "clearSelectionText": "To clear selection, press Delete",
+      "clearSelectionDescription": "Total items selected: ",
+      "clearSelectionText": "To clear selection, press Delete or Backspace,",
       "compareItems": [Function],
       "direction": "bottom",
       "disabled": false,
@@ -3688,6 +3689,9 @@ Map {
     },
     "displayName": "MultiSelect",
     "propTypes": Object {
+      "clearSelectionDescription": Object {
+        "type": "string",
+      },
       "clearSelectionText": Object {
         "type": "string",
       },