ESC key in DropDown no longer sets focus back to the toggle button in 5.1x
Created by: mtavares628
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
This is a regression from v5.02 which correctly sets the focus back
To reproduce:
- go to https://getbootstrap.com/docs/5.1/components/dropdowns/
- open a dropdown
- use cursor/arrow keys or TAB to get focus into the menu
- press ESC
Expected:
- the dropdown is closed and focus is reset to the dropdown trigger button
Actual:
- the dropdown is closed, but focus is lost. This creates an accessibility issue for keyboard users.
This is a regression from v5.02, where this worked correctly (see https://getbootstrap.com/docs/5.0/components/dropdowns/)
In looking at the code for dropdown.js in both, it looks like the dataApiKeydownHandler was revamped. v5.02 has the following:
` const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
if (event.key === ESCAPE_KEY$2) {
getToggleButton().focus();
Dropdown.clearMenus();
return;
}`
v5.1.3 has this instead where the focus is not specifically set:
` const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0]; const instance = Dropdown.getOrCreateInstance(getToggleButton);
if (event.key === ESCAPE_KEY$2) {
instance.hide();
return;
}`
Reduced test cases
Here is a CodePen highlighting the issue:
https://codepen.io/mtavares628/pen/LYzZxQM
Following steps of opening dropdown, navigating with the arrow keys and hitting escape doesn't set the focus back to the button.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox, Microsoft Edge
What version of Bootstrap are you using?
v5.1.3