fix(a11y): dap errors with MultiSelect.Filterable (#6906)

* fix(a11y): dap errors with MultiSelect.Filterable

* chore(snapshot): update snapshots

Co-authored-by: Ricardo Henriquez <Ricardo@Ricardos-MBP.lan>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/react/src/components/MultiSelect/FilterableMultiSelect.js

@@ -398,9 +398,9 @@ export default class FilterableMultiSelect extends React.Component {
                       aria-controls={`${id}__menu`}
                       aria-autocomplete="list"
                       ref={(el) => (this.inputNode = el)}
+                      id={`${id}-input`}
                       {...getInputProps({
                         disabled,
-                        id,
                         placeholder,
                         onKeyDown: this.handleOnInputKeyDown,
                       })}
@@ -423,7 +423,7 @@ export default class FilterableMultiSelect extends React.Component {
                   </ListBox.Field>
                   {isOpen && (
                     <ListBox.Menu
-                      role="group"
+                      role="listbox"
                       aria-label={ariaLabel}
                       id={`${id}-menu`}>
                       {sortItems(

packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap

@@ -133,7 +133,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
                   autoComplete="off"
                   className="bx--text-input bx--text-input--empty"
                   disabled={false}
-                  id="test-filterable-multiselect"
+                  id="test-filterable-multiselect-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onKeyDown={[Function]}