Add keyboard navigation to breadcrumb dropdowns. #4910
Conversation
| // For alphanumeric keys and editing keys, focus the search input | ||
| if ( | ||
| event.key.length === 1 || | ||
| event.key === 'Backspace' || | ||
| event.key === 'Delete' | ||
| ) { | ||
| // If the search input isn't already focused, focus it | ||
| if (document.activeElement !== textInputEl) { | ||
| textInputEl?.focus(); | ||
| } | ||
| } |
There was a problem hiding this comment.
This logic is not triggered since this keydown event handler is only placed on the top level dom element (.entity-switcher-content). When an item is focused (in this case, .breadcrumb-selector-row a), the keydown event is dispatched from that element.
| event.preventDefault(); | ||
| const selectedEntry = allFilteredEntries[selectedIndex]; | ||
| if (selectedEntry) { | ||
| window.location.href = selectedEntry.href; | ||
| } | ||
| return; |
There was a problem hiding this comment.
When an anchor item (or any focusable item) is focused, pressing the enter key should perform its default action.
event.preventDefault() should not be used in this case. Setting window.location.href reloads the entire page without allowing the frontend router to take over the navigation.
| if (event.key === 'ArrowDown') { | ||
| event.preventDefault(); | ||
| selectedIndex = Math.min( | ||
| selectedIndex + 1, | ||
| allFilteredEntries.length - 1, | ||
| ); | ||
| scrollToSelected(); | ||
| return; | ||
| } |
There was a problem hiding this comment.
When the user reaches the final item on the list, and ArrowDown is triggered, the selection should loop back to the search box, and then the first item.
| if (event.key === 'ArrowUp') { | ||
| event.preventDefault(); | ||
| if (selectedIndex <= 0) { | ||
| // Focus search input when at the top | ||
| selectedIndex = -1; | ||
| textInputEl?.focus(); | ||
| } else { | ||
| selectedIndex = Math.max(selectedIndex - 1, 0); | ||
| scrollToSelected(); | ||
| } | ||
| return; | ||
| } |
There was a problem hiding this comment.
Similar to the previous comment, when ArrowUp is triggered when the user is at the first item in the list, the search box should be focused. ArrowUp on the search box should focus the last item on the list.
| ); | ||
| const selectedLink = links[selectedIndex] as HTMLElement; | ||
| if (selectedLink) { | ||
| selectedLink.focus(); |
There was a problem hiding this comment.
The anchor elements are focused as expected, however, its not visible to the user. The parent list (li) element should have a css style when the anchor it contains gets focused. This style should be similar to the hover style it currently has. The :has css selector can be used to handle this.
pavish
added
pr-status: revision
2 participants
Fixes #4904
This PR adds full keyboard navigation support to breadcrumb dropdown menus. Previously, while breadcrumb entries could be navigated using Tab, the dropdown lists themselves were not keyboard accessible once opened.
Implemented features:
focusTrapactionTechnical details
mathesar_ui/src/components/breadcrumb/BreadcrumbSelector.sveltefocusTrapaction to dropdown content container as suggested in the issuehandleKeyDown()function to handle keyboard events (Escape, ArrowUp, ArrowDown, Enter, alphanumeric keys)scrollToSelected()helper function to maintain visibility of selected itemsallFilteredEntriescomputed value for accurate navigationselectedIndexstate for current selectionScreenshots
Will be added after testing in live environment
Checklist
Update index.md).developbranch of the repositoryvisible errors.
Developer Certificate of Origin
Developer Certificate of Origin