Filterable Multiselect focus outline on wrong node

[wkeese]

When a filterable multiselect has some options selected, clicking on it's <input> puts focus outline on wrong node:

Environment

Operating system

MacOS

Browser

Chrome

Detailed description

What version of the Carbon Design System are you using?

10.26

What did you expect to happen?

Focus outline around whole control.

What happened instead?

Focus outline around <input>

Test case

See https://react.carbondesignsystem.com/?path=/story/multiselect--filterable or https://react.carbondesignsystem.com/?path=/story/multiselect--filterable

Note that clicking more to the left will put the focus outline around the whole control:

Presumably a regression from #4721.

[dakahn]

@wkeese I can't recreate this on Windows in either Chrome or Firefox using our Storybook. Do you still see this error?

[wkeese]

Yes, I do. Just retested on Chrome on Windows 10. Probably, you forgot to select some options in the dropdown first? Try using TAB and SHIFT-TAB to go back and forth between the (2x) button and the <input>.

Also, note that this is about the filterable multiselect.

[dakahn]

@wkeese thanks I see it now, thanks for your patience.

@carbon-design-system/design while it might look a little questionable I don't actually have a problem with this behavior from an accessibility stand point. The text input is receiving focus correctly. In fact an argument could be made that this behavior helps magnification users better determine the actual input on the form as distinct from the button to clear the selections since visually we combine a listbox and a button here.

[wkeese]

I agree you can debate which focus outline is better from an accessibility standpoint, but I think you need to pick one way or the other. Right now tabbing into or clicking on the <input> puts the focus outline on the <input>:

But clicking on the upper left (when options are selected) puts the focus outline on the whole control:

The other (very related) issue is that there's actually an extra tab stop on the whole control: clicking on the upper left and then pressing the tab key goes to the (2 x) button, and then another tab goes to the <input>... i.e. there are 3 tab stops where there should be 2.

(Both these screenshots are from React on Chrome/mac but I assume it's a universal behavior.)

PPS: I would also question the slightly different background colors for the left side vs. the input.

[wkeese]

Looks like you fixed this. Judging from https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable the focus outline is always around the whole control (except when the (2x) button is focused, in which case the focus outline is just on that button).