[CollapsibleNav] Make CollapsibleNav Items Accessible on Small Scre…

…ens and In Browsers with High Zoom (#155817)

Fixes elastic/eui#6702

Pinging @elastic/eui-team for visibility

## Summary

### ✨ What's the problem?
A user submitted an issue where they were unable to use the main
collapsible nav when their browser was zoomed in at 400% for
accessibility. The nav items weren't visible and could not be interacted
with at this level.

<img width="400" alt="image"
src="https://user-images.githubusercontent.com/40739624/234444373-b9539160-a069-4e4f-9bdc-c01a9405f11c.png">

### ✨ What changed?
When the container for the collapsible nav has a `max-height` of `15em`,
overflow and additional flex properties are used to allow the nav groups
to be traversed.


https://user-images.githubusercontent.com/40739624/234444539-72e2d499-94b3-4b0b-ba08-d17b12afa15c.mov


### ✨ QA
View the Kibana homepage and set the Zoom on your browser to 400%. This
will need to be done in a relatively small window (like the one on your
computer itself, not an external monitor). Open the main navigation menu
on the left. You should be able to navigate all links in menu with both
keyboard and by scrolling the sections.

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss

@@ -1,9 +1,29 @@
+$screenHeightBreakpoint: $euiSize * 15;
+
+.kbnCollapsibleNav {
+ @media (max-height: $screenHeightBreakpoint) {
+ overflow-y: auto;
+ }
+}
+
 .kbnCollapsibleNav__recentsListGroup {
  @include euiYScroll;
  max-height: $euiSize * 10;
  margin-right: -$euiSizeS;
 }
 
+.kbnCollapsibleNav__solutions {
+ @include euiYScroll;
+
+ /**
+ * Allows the solutions nav group to be viewed on
+ * very small screen sizes and when the browser Zoom is high
+ */
+ @media (max-height: $screenHeightBreakpoint) {
+ flex: 1 0 auto;
+ }
+}
+
 /**
  * 1. Increase the hit area of the link (anchor)
  * 2. Only show the text underline when hovering on the text/anchor portion

packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx

@@ -161,6 +161,7 @@ export function CollapsibleNav({
  button={button}
  ownFocus={false}
  size={248}
+ className="kbnCollapsibleNav"
  >
  {customNavLink && (
  <>
@@ -280,7 +281,7 @@ export function CollapsibleNav({
 
  <EuiHorizontalRule margin="none" />
 
- <EuiFlexItem className="eui-yScroll">
+ <EuiFlexItem className="kbnCollapsibleNav__solutions">
  {/* Kibana, Observability, Security, and Management sections */}
  {orderedCategories.map((categoryName) => {
  const category = categoryDictionary[categoryName]!;