[Combobox] Tab sequence gets stuck in popover interactive elements

🐛 Bug report

Current Behavior

When tabbing to interactive elements in the popover, the tab sequence gets stuck in the popover

Compare this to the popover itself, which does not track the tab sequence.

Interestingly, the tab sequence issue is not reproducible on the website examples, despite creating a clean slate with cd website/ && rm -rf node_modules && yarn && yarn dev.

Expected behavior

There is nothing mentioned on WAI ARIA about trapping focus in the listbox popover, so I would expect the tab sequence to predictably follow the browser default sequence, i.e. how the current Reach UI popover component behaves (as shown above).

Reproducible example

CodeSandbox Template

Running the Storybook examples locally will also reproduce this issue

Suggested solution(s)

Even after tinkering locally, its not clear to me why the tab sequence is trapped in the combobox popover (and also why it isn’t on the website examples).

Additional context

Your environment

Software	Name(s)	Version
Reach Package	combobox	0.10.0
React	-	16.13.0
Browser	Chrome	80.0.3987.163
Assistive tech	-	-
Node	-	v13.12.0
npm/yarn	yarn	1.22.4
Operating System	macOS	10.15.4

[michaeldfoley]

I too believe that the issue relates to Popover, specifically cases where the targetRef is the last tabbable element outside the popover. When this is the case, getElementAfterTrigger returns the first tabbable element inside the portal causing the focus to stay trapped inside the popover. What we want is for getElementAfterTrigger to return an element only if it is not inside the popover.

I submitted a PR (#609) that should address the issue. I recreated the original example referenced in this issue and the focus now moves outside the popover as expected.

[chaance]

Should be fixed in 0.10.4. Please let me know if you continue to have issues.