From c81bda84b1571eebf1416f0cf764f0c770efd17b Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 24 Feb 2021 12:12:45 -0600
Subject: [PATCH] fix(MultiSelect): fix itemToString and aria-selected attr

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

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 756bf3e6aacb..1a98052a954e 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -92,7 +92,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
       ...downshiftProps,
       highlightedIndex,
       isOpen,
-      itemToString,
+      itemToString: (items) => {
+        return items.map((item) => itemToString(item)).join(', ');
+      },
       onStateChange,
       selectedItem: controlledSelectedItems,
       items,
@@ -243,6 +245,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             sortItems(items, sortOptions).map((item, index) => {
               const itemProps = getItemProps({
                 item,
+                // we don't want Downshift to set aria-selected for us
+                // we also don't want to set 'false' for reader verbosity's sake
+                ['aria-selected']: isChecked ? true : null,
               });
               const itemText = itemToString(item);
               const isChecked =
@@ -252,6 +257,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
                 <ListBox.MenuItem
                   key={itemProps.id}
                   isActive={isChecked}
+                  aria-label={itemText}
                   isHighlighted={highlightedIndex === index}
                   title={itemText}
                   {...itemProps}>