Skip to content

Combo Box is a keyboard trap#845

Closed
nreese wants to merge 5 commits intoelastic:masterfrom
nreese:itsatrap2
Closed

Combo Box is a keyboard trap#845
nreese wants to merge 5 commits intoelastic:masterfrom
nreese:itsatrap2

Conversation

@nreese
Copy link
Copy Markdown
Contributor

@nreese nreese commented May 17, 2018

fixes #788 and #787

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented May 17, 2018

@snide Can you please add some focus styling to the euiFormControlLayout__icons. This PR removes the focus trap but it is still a little weird because of tabbing to the EuiFormControl icons has no visual effects.

Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented May 21, 2018

@chandlerprall Do want to take a second look? I changed the implementation a lot. The original implementation did not work when the combo box was tabbed into from the reverse order. Now tabbing into the combo box from either direction always has the same behavior.

const tabbableItems = tabbable(document);
const comboBoxIndex = tabbableItems.indexOf(this.searchInput);
tabbableItems[comboBoxIndex].focus();
this.tabOffset = 0;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this default to the index of the currently selected item?

if (this.tabOffset === UNSET) {
const tabbableItems = tabbable(document);
const comboBoxIndex = tabbableItems.indexOf(this.searchInput);
tabbableItems[comboBoxIndex].focus();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.searchInput.focus() instead of the lookup calculation?

document.addEventListener('focusin', this.onDocumentFocusChange);
this.openList();

if (this.tabOffset === UNSET) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.tabOffset is set back to UNSET only if tabbing away from the combo box, if I click away or in any other way focus shifts to another element, I don't think we could trust tabOffset?

@cjcenizal
Copy link
Copy Markdown
Contributor

cjcenizal commented May 22, 2018

@nreese @chandlerprall Maybe we can just remove these buttons from the tab order entirely? This would be another way to solve the keyboard trap problem. People using the keyboard don't need to access the "down caret" button to open the combo box since it opens automatically when you tab to it.

@aphelionz Can we still consider this component accessible if keyboard users have to hit backspace to delete all content in the combo box instead of using the "Clear all" button? This would simplify things greatly.

@cjcenizal
Copy link
Copy Markdown
Contributor

If we do want to allow tabbing to the "Clear all" button, then it seems like we could add a ref to it, and then update tabAway to update comboBoxIndex to be the index of the input or the "Clear all" button, depending on which one had focus.

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented May 23, 2018

closing in favor of #866

@cjcenizal cjcenizal closed this May 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Combo Box is a keyboard trap

4 participants