SOLR-17936: add focus indicator to navigation sidebar entries #3744
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://issues.apache.org/jira/browse/SOLR-17936
Description
In the new ui, add a focus indicator around the sidebar entry that has focus.
Here is a demonstration of me using Tab and Shift-Tab to navigate between the various items, and Enter to select the item I want:
Solution
Rather than using
Tab
, which does not have colors for our various states, we useButton
, which has all colors except for the Selected state. Material 3's new "Expressive" version also provides an experimentToggleButton
component, but our version of the Material 3 dependency is not new enough to be able to use it (and if I understand correctly, we can't use the very newest Material 3 release, since Compose Multiplatform does not yet support it).Many thanks to @malliaridis for the guidance getting started, and for suggesting that we try a component other than
Tab
.Tests
I tested this manually in both light mode and dark mode, on both desktop and web versions of the new admin UI. I used
Tab
andShift+Tab
to navigate between the items in the side navigation and confirmed that the item I navigated to was always clearly marked.Checklist
Please review the following and check all that apply:
main
branch../gradlew check
.