Skip to content

Commit

Permalink
[CollapsibleNav] Make CollapsibleNav Items Accessible on Small Scre…
Browse files Browse the repository at this point in the history
…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 <[email protected]>
Co-authored-by: Cee Chen <[email protected]>
  • Loading branch information
3 people authored May 1, 2023
1 parent e6366c0 commit 8cdef94
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 2 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ export function CollapsibleNav({
button={button}
ownFocus={false}
size={248}
className="kbnCollapsibleNav"
>
{customNavLink && (
<>
Expand Down Expand Up @@ -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]!;
Expand Down

0 comments on commit 8cdef94

Please sign in to comment.