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>
carbon-design-system · Sep 25, 2020 · eb3dcf0 · eb3dcf0
1 parent 583b137
commit eb3dcf0
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/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(

diff --git a/...act/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/...act/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]}