New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useCombobox focus-ring during keyboard navigation #1595
Comments
you can use something like this: <li
{...getItemProps({
item,
index,
...rest,
})}
className={cn(
highlightedIndexItem === index &&
item?.disabled !== true &&
getBlocksWith("__option-list-item--highlighted"),
)}
> scss: &--highlighted {
// Goal is to provide a pseudo-focus style when user navigates through menu items via keyboard
// and a hover style when navigating with a pointer device like a mouse
&:last-child {
color: $highlight-color;
border-block: rem(1) solid $highlight-color;
&:hover {
@include standard-hover-visual-styles;
border-block: none;
}
}
} |
Good suggestion, but unfortunately wont work in my case. In my dropdown menu i have divs that are not items, these sit between items and show text to explain what each "section" of items contains. For example:
Downshift doesent remove highlight when you move your mouse outside the item, only when the cursor leaves the menu entirely or a new item is being hovered. If i went with this solution, hovering an item, and then moving the cursor to the non-item's in the menu would mistakenly add focus ring to the previously hovered item without ever having used the keyboard. |
You can add a onMouseMove event on the Fruits and Vegetables elements and use |
downshift
version: 8.4.0node
version: @nrwl/node: 15.6.3npm
(oryarn
) version: npm: 10.2.0Using the useCombobox hook.
What you did:
I tried navigating the combobox using only keyboard navigation.
What happened:
I expected focus-rings as are usual for keyboard navigation. I've searched issues, and google in general to find how focus-rings are implemented in downshift, but cant find any sources or documentation about this.
Hover and highlight are already covered well, but wonder if theres any support for just keyboard navigation, where it's common to highlight the focused element more boldly and distinctly for those who have bad vision.
Suggested solution:
Setting some property on the currently keyboard-focused element that can selected in css and styled.
The text was updated successfully, but these errors were encountered: