SOLR-17936: add focus indicator to navigation sidebar entries

[sandbergja]

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 use Button, which has all colors except for the Selected state. Material 3's new "Expressive" version also provides an experiment ToggleButton 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 and Shift+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:

• I have reviewed the guidelines for How to Contribute and my code conforms to the standards described there to the best of my ability.
• I have created a Jira issue and added the issue ID to my pull request title.
• I have given Solr maintainers access to contribute to my PR branch. (optional but recommended, not available for branches on forks living under an organisation)
• I have developed this patch against the main branch.
• I have run ./gradlew check.
• I have added tests for my changes.
• I have added documentation for the Reference Guide

[malliaridis]

Changes look great and work perfectly on both light and dark theme. I tested them on windows and mac, and run the browser version too.

The only thing I would probably look into at some point in the future is to extract the implementation to a reusable Composable (like a SolrToggleButton) once we need a similar "toggle" effect in other places. Maybe then we can also look into additional semantics for screen readers for the selected state. But these are topics that are out of scope in my opinion and would explicit testing.

About testing this, I looked into retrieving the background in a test, but this seems quite difficult without rewriting the library's composables right now (so I think). Only the selected state could be applied via the semantics and retrieved in a test if we do something like modifier = modifier.semantics { this.selected = selected }.

So it is fine for now not to have an explicit test for the background change when focused.

@sandbergja if you give me the final go I will merge this change for you. :)

[sandbergja]

Thanks for the review and guidance, @malliaridis ! I think this is ready from my perspective.

[malliaridis]

Thanks again for the contribution @sandbergja!

I am planning to update the Changelog in a separate PR and add all contributors to the new UI for the next release. Are you fine if I add you as well?

[sandbergja]

Thanks, @malliaridis ! That is fine, hopefully I can contribute a bit more soon!