From 3d7eeb9bdc94795ea697cd9a0f0337621b509ca0 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 26 Jan 2021 15:09:10 -0600
Subject: [PATCH 1/6] fix(combobox): remove ARIA from containing uninteractive
 elements

---
 .../react/src/components/ComboBox/ComboBox.js | 221 ++++++++++--------
 1 file changed, 125 insertions(+), 96 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 4f1baf5bc654..55eb03486daf 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -350,6 +350,30 @@ export default class ComboBox extends React.Component {
       [`${prefix}--text-input--empty`]: !this.state.inputValue,
     });
 
+    // return (
+    // <Downshift>
+    // {({ getRootProps, getInputProps }) => {
+    // const rootProps = getRootProps({}, { suppressRefError: true });
+    // const inputProps = getInputProps({});
+    // console.log('');
+    // console.log(rootProps);
+    // console.log(inputProps);
+
+    // return (
+    // <div id="ex1">
+    // <label htmlFor="cb1-input">Test label</label>
+    // <div className="combobox">
+    // <div className="group">
+    // <input {...rootProps} {...inputProps} type="text" />
+    // <button>Test button</button>
+    // </div>
+    // </div>
+    // </div>
+    // );
+    // }}
+    // </Downshift>
+    // );
+
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     return (
@@ -368,6 +392,7 @@ export default class ComboBox extends React.Component {
           getInputProps,
           getItemProps,
           getLabelProps,
+          getRootProps,
           isOpen,
           inputValue,
           selectedItem,
@@ -375,108 +400,112 @@ export default class ComboBox extends React.Component {
           clearSelection,
           toggleMenu,
           getMenuProps,
-        }) => (
-          <div className={wrapperClasses}>
-            {titleText && (
-              <label className={titleClasses} {...getLabelProps()}>
-                {titleText}
-              </label>
-            )}
-            <ListBox
-              className={className}
-              disabled={disabled}
-              invalid={invalid}
-              aria-label={ariaLabel}
-              invalidText={invalidText}
-              isOpen={isOpen}
-              light={light}
-              size={size}>
-              <ListBox.Field
-                {...getToggleButtonProps({
-                  disabled,
-                  onClick: this.onToggleClick(isOpen),
-                })}>
-                <input
-                  disabled={disabled}
-                  className={inputClasses}
-                  type="text"
-                  tabIndex="0"
-                  aria-autocomplete="list"
-                  ref={this.textInput}
-                  {...rest}
-                  {...getInputProps({
+        }) => {
+          return (
+            <div className={wrapperClasses}>
+              {titleText && (
+                <label className={titleClasses} {...getLabelProps()}>
+                  {titleText}
+                </label>
+              )}
+              <ListBox
+                className={className}
+                disabled={disabled}
+                invalid={invalid}
+                invalidText={invalidText}
+                isOpen={isOpen}
+                light={light}
+                size={size}>
+                <ListBox.Field
+                  {...getToggleButtonProps({
                     disabled,
-                    placeholder,
-                    onKeyDown: (event) => {
-                      if (match(event, keys.Space)) {
-                        event.stopPropagation();
-                      }
-
-                      if (match(event, keys.Enter)) {
-                        toggleMenu();
-                      }
-                    },
-                  })}
-                />
-                {invalid && (
-                  <WarningFilled16
-                    className={`${prefix}--list-box__invalid-icon`}
+                    onClick: this.onToggleClick(isOpen),
+                  })}>
+                  <input
+                    disabled={disabled}
+                    className={inputClasses}
+                    type="text"
+                    tabIndex="0"
+                    aria-autocomplete="list"
+                    ref={this.textInput}
+                    {...rest}
+                    {...getRootProps({}, { suppressRefError: true })}
+                    {...getInputProps({
+                      disabled,
+                      placeholder,
+                      onKeyDown: (event) => {
+                        if (match(event, keys.Space)) {
+                          event.stopPropagation();
+                        }
+
+                        if (match(event, keys.Enter)) {
+                          toggleMenu();
+                        }
+                      },
+                    })}
                   />
-                )}
-                {inputValue && (
-                  <ListBox.Selection
-                    clearSelection={clearSelection}
+                  {invalid && (
+                    <WarningFilled16
+                      className={`${prefix}--list-box__invalid-icon`}
+                    />
+                  )}
+                  {inputValue && (
+                    <ListBox.Selection
+                      clearSelection={clearSelection}
+                      translateWithId={translateWithId}
+                      disabled={disabled}
+                      onClearSelection={this.handleSelectionClear}
+                    />
+                  )}
+                  <ListBox.MenuIcon
+                    isOpen={isOpen}
                     translateWithId={translateWithId}
-                    disabled={disabled}
-                    onClearSelection={this.handleSelectionClear}
                   />
+                </ListBox.Field>
+                {isOpen && (
+                  <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
+                    {this.filterItems(items, itemToString, inputValue).map(
+                      (item, index) => {
+                        const itemProps = getItemProps({ item, index });
+                        return (
+                          <ListBox.MenuItem
+                            key={itemProps.id}
+                            isActive={selectedItem === item}
+                            tabIndex="-1"
+                            isHighlighted={
+                              highlightedIndex === index ||
+                              (selectedItem && selectedItem.id === item.id) ||
+                              false
+                            }
+                            title={
+                              itemToElement ? item.text : itemToString(item)
+                            }
+                            {...itemProps}>
+                            {itemToElement ? (
+                              <ItemToElement key={itemProps.id} {...item} />
+                            ) : (
+                              itemToString(item)
+                            )}
+                            {selectedItem === item && (
+                              <Checkmark16
+                                className={`${prefix}--list-box__menu-item__selected-icon`}
+                              />
+                            )}
+                          </ListBox.MenuItem>
+                        );
+                      }
+                    )}
+                  </ListBox.Menu>
                 )}
-                <ListBox.MenuIcon
-                  isOpen={isOpen}
-                  translateWithId={translateWithId}
-                />
-              </ListBox.Field>
-              {isOpen && (
-                <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
-                  {this.filterItems(items, itemToString, inputValue).map(
-                    (item, index) => {
-                      const itemProps = getItemProps({ item, index });
-                      return (
-                        <ListBox.MenuItem
-                          key={itemProps.id}
-                          isActive={selectedItem === item}
-                          tabIndex="-1"
-                          isHighlighted={
-                            highlightedIndex === index ||
-                            (selectedItem && selectedItem.id === item.id) ||
-                            false
-                          }
-                          title={itemToElement ? item.text : itemToString(item)}
-                          {...itemProps}>
-                          {itemToElement ? (
-                            <ItemToElement key={itemProps.id} {...item} />
-                          ) : (
-                            itemToString(item)
-                          )}
-                          {selectedItem === item && (
-                            <Checkmark16
-                              className={`${prefix}--list-box__menu-item__selected-icon`}
-                            />
-                          )}
-                        </ListBox.MenuItem>
-                      );
-                    }
-                  )}
-                </ListBox.Menu>
+              </ListBox>
+              {helperText && !invalid && (
+                <div id={comboBoxHelperId} className={helperClasses}>
+                  {helperText}
+                </div>
               )}
-            </ListBox>
-            {helperText && !invalid && (
-              <div id={comboBoxHelperId} className={helperClasses}>
-                {helperText}
-              </div>
-            )}
-          </div>
-        )}
+            </div>
+          );
+        }}
       </Downshift>
     );
   }

From 2546013cb2232eede971ddbaefbf11c9785bfad3 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 26 Jan 2021 15:58:38 -0600
Subject: [PATCH 2/6] fix(combobox): update additional ARIA roles and
 attributes

---
 .../src/components/list-box/_list-box.scss    | 10 ++++-
 .../react/src/components/ComboBox/ComboBox.js | 37 ++++---------------
 .../src/components/ListBox/ListBoxField.js    |  5 +--
 .../src/components/ListBox/ListBoxMenuIcon.js | 18 +++++----
 .../components/ListBox/ListBoxSelection.js    |  8 ++--
 5 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 56ae3cd629fe..c0f1837b2dac 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -388,9 +388,15 @@ $list-box-menu-width: rem(300px);
 
   // Menu status inside of a `list-box__field`
   .#{$prefix}--list-box__menu-icon {
+    @include button-reset($width: false);
+
     position: absolute;
     top: 0;
-    right: $carbon--spacing-05;
+
+    // TODO: convert to spacing tokens
+    right: 8px;
+    padding: 0 8px;
+
     display: flex;
     align-items: center;
     height: 100%;
@@ -416,6 +422,8 @@ $list-box-menu-width: rem(300px);
 
   // Selection indicator for a `list-box__field`
   .#{$prefix}--list-box__selection {
+    @include button-reset($width: false);
+
     position: absolute;
     top: 50%;
     /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 55eb03486daf..1003a8a0632a 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -350,30 +350,6 @@ export default class ComboBox extends React.Component {
       [`${prefix}--text-input--empty`]: !this.state.inputValue,
     });
 
-    // return (
-    // <Downshift>
-    // {({ getRootProps, getInputProps }) => {
-    // const rootProps = getRootProps({}, { suppressRefError: true });
-    // const inputProps = getInputProps({});
-    // console.log('');
-    // console.log(rootProps);
-    // console.log(inputProps);
-
-    // return (
-    // <div id="ex1">
-    // <label htmlFor="cb1-input">Test label</label>
-    // <div className="combobox">
-    // <div className="group">
-    // <input {...rootProps} {...inputProps} type="text" />
-    // <button>Test button</button>
-    // </div>
-    // </div>
-    // </div>
-    // );
-    // }}
-    // </Downshift>
-    // );
-
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     return (
@@ -401,6 +377,11 @@ export default class ComboBox extends React.Component {
           toggleMenu,
           getMenuProps,
         }) => {
+          const buttonProps = getToggleButtonProps({
+            disabled,
+            onClick: this.onToggleClick(isOpen),
+          });
+
           return (
             <div className={wrapperClasses}>
               {titleText && (
@@ -416,11 +397,7 @@ export default class ComboBox extends React.Component {
                 isOpen={isOpen}
                 light={light}
                 size={size}>
-                <ListBox.Field
-                  {...getToggleButtonProps({
-                    disabled,
-                    onClick: this.onToggleClick(isOpen),
-                  })}>
+                <ListBox.Field>
                   <input
                     disabled={disabled}
                     className={inputClasses}
@@ -460,6 +437,8 @@ export default class ComboBox extends React.Component {
                   <ListBox.MenuIcon
                     isOpen={isOpen}
                     translateWithId={translateWithId}
+                    tabIndex="-1"
+                    {...buttonProps}
                   />
                 </ListBox.Field>
                 {isOpen && (
diff --git a/packages/react/src/components/ListBox/ListBoxField.js b/packages/react/src/components/ListBox/ListBoxField.js
index 1f3cadd1132d..b72aaaa88b50 100644
--- a/packages/react/src/components/ListBox/ListBoxField.js
+++ b/packages/react/src/components/ListBox/ListBoxField.js
@@ -21,10 +21,7 @@ export const translationIds = {};
  */
 function ListBoxField({ children, disabled, tabIndex, ...rest }) {
   return (
-    <div
-      className={`${prefix}--list-box__field`}
-      tabIndex={(!disabled && tabIndex) || -1}
-      {...rest}>
+    <div className={`${prefix}--list-box__field`} {...rest}>
       {children}
     </div>
   );
diff --git a/packages/react/src/components/ListBox/ListBoxMenuIcon.js b/packages/react/src/components/ListBox/ListBoxMenuIcon.js
index aa25c8b5f3fc..40b3e36f8830 100644
--- a/packages/react/src/components/ListBox/ListBoxMenuIcon.js
+++ b/packages/react/src/components/ListBox/ListBoxMenuIcon.js
@@ -19,25 +19,27 @@ export const translationIds = {
 };
 
 const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu',
+  [translationIds['close.menu']]: 'Close',
+  [translationIds['open.menu']]: 'Open',
 };
 
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-const ListBoxMenuIcon = ({ isOpen, translateWithId: t }) => {
+const ListBoxMenuIcon = ({ isOpen, translateWithId: t, ...rest }) => {
   const className = cx(`${prefix}--list-box__menu-icon`, {
     [`${prefix}--list-box__menu-icon--open`]: isOpen,
   });
   const description = isOpen ? t('close.menu') : t('open.menu');
   return (
-    <div className={className}>
-      <ChevronDown16 name="chevron--down" aria-label={description}>
-        <title>{description}</title>
-      </ChevronDown16>
-    </div>
+    <button
+      {...rest}
+      aria-label={description}
+      className={className}
+      type="button">
+      <ChevronDown16 />
+    </button>
   );
 };
 
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index e61643b46972..87c0c54da97f 100644
--- a/packages/react/src/components/ListBox/ListBoxSelection.js
+++ b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -56,17 +56,15 @@ const ListBoxSelection = ({
   };
   const description = selectionCount ? t('clear.all') : t('clear.selection');
   return (
-    <div
-      role="button"
+    <button
       className={className}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={disabled ? -1 : null}
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
-      aria-label="Clear Selection"
       title={description}>
       {selectionCount}
       <Close16 />
-    </div>
+    </button>
   );
 };
 

From 6c086983ed9268884585879ed1eeee0a64bd3f23 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 3 Feb 2021 14:11:01 -0600
Subject: [PATCH 3/6] fix(combobox): correctly move focus to input and handle
 menu changes

---
 .../react/src/components/ComboBox/ComboBox.js | 69 +++++++++++++------
 .../src/components/ListBox/ListBoxField.js    |  8 ++-
 .../components/ListBox/ListBoxSelection.js    |  5 +-
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 1003a8a0632a..6257a07f5274 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -15,6 +15,7 @@ import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
+import mergeRefs from '../../tools/mergeRefs';
 
 const { prefix } = settings;
 
@@ -303,6 +304,10 @@ export default class ComboBox extends React.Component {
       event.preventDownshiftDefault = true;
       event.persist();
     }
+
+    if (this.textInput.current) {
+      this.textInput.current.focus();
+    }
   };
 
   render() {
@@ -369,23 +374,58 @@ export default class ComboBox extends React.Component {
           getItemProps,
           getLabelProps,
           getRootProps,
+          getMenuProps,
           isOpen,
           inputValue,
           selectedItem,
           highlightedIndex,
           clearSelection,
           toggleMenu,
-          getMenuProps,
         }) => {
+          const rootProps = getRootProps(
+            {},
+            {
+              suppressRefError: true,
+            }
+          );
+          const labelProps = getLabelProps();
           const buttonProps = getToggleButtonProps({
             disabled,
             onClick: this.onToggleClick(isOpen),
+            // When we moved the "root node" of Downshift to the <input> for
+            // WCAG 2.1 compliance, we unfortunately hit this branch for the
+            // "mouseup" event that downshift listens to:
+            // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+            //
+            // As a result, it will reset the state of the component and so we
+            // stop the event from propagating to prevent this. This allows the
+            // toggleMenu behavior for the toggleButton to correctly open and
+            // close the menu.
+            onMouseUp(event) {
+              event.stopPropagation();
+            },
+          });
+          const inputProps = getInputProps({
+            disabled,
+            placeholder,
+            onClick() {
+              toggleMenu();
+            },
+            onKeyDown: (event) => {
+              if (match(event, keys.Space)) {
+                event.stopPropagation();
+              }
+
+              if (match(event, keys.Enter)) {
+                toggleMenu();
+              }
+            },
           });
 
           return (
             <div className={wrapperClasses}>
               {titleText && (
-                <label className={titleClasses} {...getLabelProps()}>
+                <label className={titleClasses} {...labelProps}>
                   {titleText}
                 </label>
               )}
@@ -404,22 +444,10 @@ export default class ComboBox extends React.Component {
                     type="text"
                     tabIndex="0"
                     aria-autocomplete="list"
-                    ref={this.textInput}
                     {...rest}
-                    {...getRootProps({}, { suppressRefError: true })}
-                    {...getInputProps({
-                      disabled,
-                      placeholder,
-                      onKeyDown: (event) => {
-                        if (match(event, keys.Space)) {
-                          event.stopPropagation();
-                        }
-
-                        if (match(event, keys.Enter)) {
-                          toggleMenu();
-                        }
-                      },
-                    })}
+                    {...rootProps}
+                    {...inputProps}
+                    ref={mergeRefs(this.textInput, rootProps.ref)}
                   />
                   {invalid && (
                     <WarningFilled16
@@ -429,16 +457,17 @@ export default class ComboBox extends React.Component {
                   {inputValue && (
                     <ListBox.Selection
                       clearSelection={clearSelection}
-                      translateWithId={translateWithId}
                       disabled={disabled}
                       onClearSelection={this.handleSelectionClear}
+                      tabIndex="-1"
+                      translateWithId={translateWithId}
                     />
                   )}
                   <ListBox.MenuIcon
+                    {...buttonProps}
                     isOpen={isOpen}
-                    translateWithId={translateWithId}
                     tabIndex="-1"
-                    {...buttonProps}
+                    translateWithId={translateWithId}
                   />
                 </ListBox.Field>
                 {isOpen && (
diff --git a/packages/react/src/components/ListBox/ListBoxField.js b/packages/react/src/components/ListBox/ListBoxField.js
index b72aaaa88b50..e59e122d0279 100644
--- a/packages/react/src/components/ListBox/ListBoxField.js
+++ b/packages/react/src/components/ListBox/ListBoxField.js
@@ -19,7 +19,13 @@ export const translationIds = {};
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
-function ListBoxField({ children, disabled, tabIndex, ...rest }) {
+function ListBoxField({
+  children,
+  // disabled and tabIndex are no longer needed and can be removed
+  disabled: _disabled,
+  tabIndex: _tabIndex,
+  ...rest
+}) {
   return (
     <div className={`${prefix}--list-box__field`} {...rest}>
       {children}
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index 87c0c54da97f..ab1171f42ceb 100644
--- a/packages/react/src/components/ListBox/ListBoxSelection.js
+++ b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -58,10 +58,11 @@ const ListBoxSelection = ({
   return (
     <button
       className={className}
-      tabIndex={disabled ? -1 : null}
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
-      title={description}>
+      tabIndex="-1"
+      title={description}
+      type="button">
       {selectionCount}
       <Close16 />
     </button>

From f6b92af298a372364b29ff34afa7cfe9887fe0f8 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 3 Feb 2021 14:23:45 -0600
Subject: [PATCH 4/6] refactor(combobox): update listbox field and update
 snapshots

---
 .../react/src/components/ComboBox/ComboBox.js |  4 +-
 .../src/components/ListBox/ListBoxField.js    | 13 +++---
 .../__snapshots__/ListBoxField-test.js.snap   |  9 ++---
 .../ListBoxMenuIcon-test.js.snap              | 40 ++++++-------------
 .../ListBoxSelection-test.js.snap             | 18 ++++-----
 5 files changed, 31 insertions(+), 53 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 6257a07f5274..6cd3ce4512cd 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -437,7 +437,7 @@ export default class ComboBox extends React.Component {
                 isOpen={isOpen}
                 light={light}
                 size={size}>
-                <ListBox.Field>
+                <div className={`${prefix}--list-box__field`}>
                   <input
                     disabled={disabled}
                     className={inputClasses}
@@ -469,7 +469,7 @@ export default class ComboBox extends React.Component {
                     tabIndex="-1"
                     translateWithId={translateWithId}
                   />
-                </ListBox.Field>
+                </div>
                 {isOpen && (
                   <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
                     {this.filterItems(items, itemToString, inputValue).map(
diff --git a/packages/react/src/components/ListBox/ListBoxField.js b/packages/react/src/components/ListBox/ListBoxField.js
index e59e122d0279..1f3cadd1132d 100644
--- a/packages/react/src/components/ListBox/ListBoxField.js
+++ b/packages/react/src/components/ListBox/ListBoxField.js
@@ -19,15 +19,12 @@ export const translationIds = {};
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
-function ListBoxField({
-  children,
-  // disabled and tabIndex are no longer needed and can be removed
-  disabled: _disabled,
-  tabIndex: _tabIndex,
-  ...rest
-}) {
+function ListBoxField({ children, disabled, tabIndex, ...rest }) {
   return (
-    <div className={`${prefix}--list-box__field`} {...rest}>
+    <div
+      className={`${prefix}--list-box__field`}
+      tabIndex={(!disabled && tabIndex) || -1}
+      {...rest}>
       {children}
     </div>
   );
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 d72c42efd258..5f4f9d9319e1 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
@@ -13,14 +13,13 @@ exports[`ListBoxField should render 1`] = `
       clearSelection={[MockFunction]}
       translateWithId={[Function]}
     >
-      <div
-        aria-label="Clear Selection"
+      <button
         className="bx--list-box__selection"
         onClick={[Function]}
         onKeyDown={[Function]}
-        role="button"
-        tabIndex={0}
+        tabIndex="-1"
         title="Clear selected item"
+        type="button"
       >
         <ForwardRef(Close16)>
           <Icon
@@ -47,7 +46,7 @@ exports[`ListBoxField should render 1`] = `
             </svg>
           </Icon>
         </ForwardRef(Close16)>
-      </div>
+      </button>
     </ListBoxSelection>
   </div>
 </ListBoxField>
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap
index c8d2dc0935b1..bd323752a12f 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap
@@ -5,31 +5,26 @@ exports[`ListBoxMenuIcon should render 1`] = `
   isOpen={true}
   translateWithId={[Function]}
 >
-  <div
+  <button
+    aria-label="Close"
     className="bx--list-box__menu-icon bx--list-box__menu-icon--open"
+    type="button"
   >
-    <ForwardRef(ChevronDown16)
-      aria-label="Close menu"
-      name="chevron--down"
-    >
+    <ForwardRef(ChevronDown16)>
       <Icon
-        aria-label="Close menu"
         fill="currentColor"
         height={16}
-        name="chevron--down"
         preserveAspectRatio="xMidYMid meet"
         viewBox="0 0 16 16"
         width={16}
         xmlns="http://www.w3.org/2000/svg"
       >
         <svg
-          aria-label="Close menu"
+          aria-hidden={true}
           fill="currentColor"
           focusable="false"
           height={16}
-          name="chevron--down"
           preserveAspectRatio="xMidYMid meet"
-          role="img"
           viewBox="0 0 16 16"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
@@ -37,13 +32,10 @@ exports[`ListBoxMenuIcon should render 1`] = `
           <path
             d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
           />
-          <title>
-            Close menu
-          </title>
         </svg>
       </Icon>
     </ForwardRef(ChevronDown16)>
-  </div>
+  </button>
 </ListBoxMenuIcon>
 `;
 
@@ -52,31 +44,26 @@ exports[`ListBoxMenuIcon should render 2`] = `
   isOpen={false}
   translateWithId={[Function]}
 >
-  <div
+  <button
+    aria-label="Open"
     className="bx--list-box__menu-icon"
+    type="button"
   >
-    <ForwardRef(ChevronDown16)
-      aria-label="Open menu"
-      name="chevron--down"
-    >
+    <ForwardRef(ChevronDown16)>
       <Icon
-        aria-label="Open menu"
         fill="currentColor"
         height={16}
-        name="chevron--down"
         preserveAspectRatio="xMidYMid meet"
         viewBox="0 0 16 16"
         width={16}
         xmlns="http://www.w3.org/2000/svg"
       >
         <svg
-          aria-label="Open menu"
+          aria-hidden={true}
           fill="currentColor"
           focusable="false"
           height={16}
-          name="chevron--down"
           preserveAspectRatio="xMidYMid meet"
-          role="img"
           viewBox="0 0 16 16"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
@@ -84,12 +71,9 @@ exports[`ListBoxMenuIcon should render 2`] = `
           <path
             d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
           />
-          <title>
-            Open menu
-          </title>
         </svg>
       </Icon>
     </ForwardRef(ChevronDown16)>
-  </div>
+  </button>
 </ListBoxMenuIcon>
 `;
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 8754e742ab4c..0315f430b64e 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
@@ -26,14 +26,13 @@ exports[`ListBoxSelection should render 1`] = `
     }
   }
 >
-  <div
-    aria-label="Clear Selection"
+  <button
     className="bx--list-box__selection"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
-    tabIndex={0}
+    tabIndex="-1"
     title="translation"
+    type="button"
   >
     <ForwardRef(Close16)>
       <Icon
@@ -60,7 +59,7 @@ exports[`ListBoxSelection should render 1`] = `
         </svg>
       </Icon>
     </ForwardRef(Close16)>
-  </div>
+  </button>
 </ListBoxSelection>
 `;
 
@@ -91,14 +90,13 @@ exports[`ListBoxSelection should render 2`] = `
     }
   }
 >
-  <div
-    aria-label="Clear Selection"
+  <button
     className="bx--list-box__selection bx--tag--filter bx--list-box__selection--multi"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
-    tabIndex={0}
+    tabIndex="-1"
     title="translation"
+    type="button"
   >
     3
     <ForwardRef(Close16)>
@@ -126,6 +124,6 @@ exports[`ListBoxSelection should render 2`] = `
         </svg>
       </Icon>
     </ForwardRef(Close16)>
-  </div>
+  </button>
 </ListBoxSelection>
 `;

From 7adadbc328ec75b91174fd8773987b21259b905e Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Wed, 3 Feb 2021 23:33:35 -0700
Subject: [PATCH 5/6] refactor(combobox): update FilterableMultiSelect and
 update snapshots

---
 .../FilterableMultiSelect-test.js.snap        | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
index bd8a56b80b56..1e67a297acc9 100644
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -145,31 +145,26 @@ exports[`MultiSelect.Filterable should render 1`] = `
                   isOpen={false}
                   translateWithId={[Function]}
                 >
-                  <div
+                  <button
+                    aria-label="Open"
                     className="bx--list-box__menu-icon"
+                    type="button"
                   >
-                    <ForwardRef(ChevronDown16)
-                      aria-label="Open menu"
-                      name="chevron--down"
-                    >
+                    <ForwardRef(ChevronDown16)>
                       <Icon
-                        aria-label="Open menu"
                         fill="currentColor"
                         height={16}
-                        name="chevron--down"
                         preserveAspectRatio="xMidYMid meet"
                         viewBox="0 0 16 16"
                         width={16}
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <svg
-                          aria-label="Open menu"
+                          aria-hidden={true}
                           fill="currentColor"
                           focusable="false"
                           height={16}
-                          name="chevron--down"
                           preserveAspectRatio="xMidYMid meet"
-                          role="img"
                           viewBox="0 0 16 16"
                           width={16}
                           xmlns="http://www.w3.org/2000/svg"
@@ -177,13 +172,10 @@ exports[`MultiSelect.Filterable should render 1`] = `
                           <path
                             d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
                           />
-                          <title>
-                            Open menu
-                          </title>
                         </svg>
                       </Icon>
                     </ForwardRef(ChevronDown16)>
-                  </div>
+                  </button>
                 </ListBoxMenuIcon>
               </div>
             </ListBoxField>

From 51c0350698d0a3f3979d96d6c20e173bdb8a610d Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 9 Feb 2021 16:33:26 -0600
Subject: [PATCH 6/6] chore: check-in work

---
 .../multi-select/_multi-select.scss           |   5 -
 .../react/src/components/ComboBox/ComboBox.js |   9 +-
 .../components/ListBox/ListBoxSelection.js    |   1 +
 .../MultiSelect/FilterableMultiSelect.js      | 111 ++++++++++--------
 4 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss
index 42c60e553530..f7461d25a9cb 100644
--- a/packages/components/src/components/multi-select/_multi-select.scss
+++ b/packages/components/src/components/multi-select/_multi-select.scss
@@ -73,11 +73,6 @@
     .#{$prefix}--text-input {
     background-clip: padding-box;
     border: rem(2px) solid transparent;
-    outline: none;
-  }
-
-  .#{$prefix}--multi-select--filterable--input-focused {
-    @include focus-outline('outline');
   }
 
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 6cd3ce4512cd..0294e4385f40 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -229,13 +229,11 @@ export default class ComboBox extends React.Component {
   constructor(props) {
     super(props);
 
-    this.textInput = React.createRef();
-
     this.comboBoxInstanceId = getInstanceId();
-
     this.state = {
       inputValue: getInputValue(props, {}),
     };
+    this.textInput = React.createRef();
   }
 
   filterItems = (items, itemToString, inputValue) =>
@@ -439,11 +437,8 @@ export default class ComboBox extends React.Component {
                 size={size}>
                 <div className={`${prefix}--list-box__field`}>
                   <input
-                    disabled={disabled}
+                    aria-describedby={comboBoxHelperId}
                     className={inputClasses}
-                    type="text"
-                    tabIndex="0"
-                    aria-autocomplete="list"
                     {...rest}
                     {...rootProps}
                     {...inputProps}
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index ab1171f42ceb..97d9d0966f07 100644
--- a/packages/react/src/components/ListBox/ListBoxSelection.js
+++ b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -57,6 +57,7 @@ const ListBoxSelection = ({
   const description = selectionCount ? t('clear.all') : t('clear.selection');
   return (
     <button
+      aria-label={description}
       className={className}
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index 01e306d12684..c12c54dac0bd 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -21,6 +21,8 @@ import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { defaultFilterItems } from '../ComboBox/tools/filter';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
+import mergeRefs from '../../tools/mergeRefs';
+import { keys, match } from '../../internal/keyboard';
 
 const { prefix } = settings;
 
@@ -176,13 +178,14 @@ export default class FilterableMultiSelect extends React.Component {
 
   constructor(props) {
     super(props);
+
     this.filterableMultiSelectInstanceId = getInstanceId();
     this.state = {
       isOpen: props.open,
       inputValue: '',
       topItems: [],
-      inputFocused: false,
     };
+    this.textInput = React.createRef();
   }
 
   handleOnChange = (changes) => {
@@ -192,9 +195,17 @@ export default class FilterableMultiSelect extends React.Component {
   };
 
   handleOnMenuChange = (isOpen) => {
-    this.setState((state) => ({
-      isOpen: isOpen ?? !state.isOpen,
-    }));
+    this.setState(
+      (state) => ({
+        isOpen: isOpen ?? !state.isOpen,
+      }),
+      () => {
+        if (this.textInput.current) {
+          this.textInput.current.focus();
+        }
+      }
+    );
+
     if (this.props.onMenuChange) {
       this.props.onMenuChange(isOpen);
     }
@@ -236,7 +247,7 @@ export default class FilterableMultiSelect extends React.Component {
         if (changes.isOpen === false) {
           // If Downshift is trying to close the menu, but we know the input
           // is the active element in the document, then keep the menu open
-          if (this.inputNode === document.activeElement) {
+          if (this.textInput === document.activeElement) {
             nextIsOpen = true;
           }
         }
@@ -271,15 +282,7 @@ export default class FilterableMultiSelect extends React.Component {
   clearInputValue = (event) => {
     event.stopPropagation();
     this.setState({ inputValue: '' });
-    this.inputNode && this.inputNode.focus && this.inputNode.focus();
-  };
-
-  handleInputFocus = (_) => {
-    this.setState({ inputFocused: true });
-  };
-
-  handleInputBlur = (_) => {
-    this.setState({ inputFocused: false });
+    this.textInput && this.textInput.focus && this.textInput.focus();
   };
 
   render() {
@@ -358,9 +361,9 @@ export default class FilterableMultiSelect extends React.Component {
             {...mapDownshiftProps(downshiftProps)}
             highlightedIndex={highlightedIndex}
             id={id}
-            isOpen={isOpen}
             inputValue={inputValue}
-            onInputValueChange={this.handleOnInputValueChange}
+            isOpen={isOpen}
+            itemToString={itemToString}
             onChange={(selectedItem) => {
               // `selectedItem`: The item that was just selected. null if the selection was cleared.
               // https://github.com/downshift-js/downshift#onchange
@@ -370,9 +373,9 @@ export default class FilterableMultiSelect extends React.Component {
               }
               onItemChange(selectedItem);
             }}
-            itemToString={itemToString}
-            onStateChange={this.handleOnStateChange}
+            onInputValueChange={this.handleOnInputValueChange}
             onOuterClick={this.handleOnOuterClick}
+            onStateChange={this.handleOnStateChange}
             selectedItem={selectedItems}>
             {({
               getToggleButtonProps,
@@ -394,14 +397,41 @@ export default class FilterableMultiSelect extends React.Component {
                   [`${prefix}--multi-select--inline`]: inline,
                   [`${prefix}--multi-select--selected`]:
                     selectedItem.length > 0,
-                  [`${prefix}--multi-select--filterable--input-focused`]: this
-                    .state.inputFocused,
                 }
               );
-              const buttonProps = {
-                ...getToggleButtonProps({ disabled }),
-                'aria-label': undefined,
-              };
+
+              const rootProps = getRootProps(
+                {},
+                {
+                  suppressRefError: true,
+                }
+              );
+              const buttonProps = getToggleButtonProps({
+                disabled,
+                // When we moved the "root node" of Downshift to the <input> for
+                // WCAG 2.1 compliance, we unfortunately hit this branch for the
+                // "mouseup" event that downshift listens to:
+                // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+                //
+                // As a result, it will reset the state of the component and so we
+                // stop the event from propagating to prevent this. This allows the
+                // toggleMenu behavior for the toggleButton to correctly open and
+                // close the menu.
+                onMouseUp(event) {
+                  event.stopPropagation();
+                },
+              });
+              const inputProps = getInputProps({
+                'aria-describedby': helperId,
+                className: inputClasses,
+                disabled,
+                placeholder,
+                onClick: () => {
+                  this.setState({ isOpen: true });
+                },
+                onKeyDown: this.handleOnInputKeyDown,
+              });
+
               return (
                 <ListBox
                   className={className}
@@ -412,14 +442,13 @@ export default class FilterableMultiSelect extends React.Component {
                   warn={warn}
                   warnText={warnText}
                   isOpen={isOpen}
-                  size={size}
-                  {...getRootProps()}>
-                  <ListBox.Field
-                    id={id}
-                    disabled={disabled}
-                    aria-labelledby={labelId}
-                    aria-describedby={helperId}
-                    {...buttonProps}>
+                  size={size}>
+                  <div className={`${prefix}--list-box__field`}>
+                    <input
+                      {...rootProps}
+                      {...inputProps}
+                      ref={mergeRefs(this.textInput, rootProps.ref)}
+                    />
                     {selectedItem.length > 0 && (
                       <ListBox.Selection
                         clearSelection={clearSelection}
@@ -428,20 +457,6 @@ export default class FilterableMultiSelect extends React.Component {
                         disabled={disabled}
                       />
                     )}
-                    <input
-                      className={inputClasses}
-                      aria-controls={`${id}__menu`}
-                      aria-autocomplete="list"
-                      ref={(el) => (this.inputNode = el)}
-                      id={`${id}-input`}
-                      {...getInputProps({
-                        disabled,
-                        placeholder,
-                        onFocus: this.handleInputFocus,
-                        onBlur: this.handleInputBlur,
-                        onKeyDown: this.handleOnInputKeyDown,
-                      })}
-                    />
                     {invalid && (
                       <WarningFilled16
                         className={`${prefix}--list-box__invalid-icon`}
@@ -459,10 +474,12 @@ export default class FilterableMultiSelect extends React.Component {
                       />
                     )}
                     <ListBox.MenuIcon
+                      {...buttonProps}
                       isOpen={isOpen}
+                      tabIndex="-1"
                       translateWithId={translateWithId}
                     />
-                  </ListBox.Field>
+                  </div>
                   {isOpen && (
                     <ListBox.Menu
                       role="listbox"