Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[EuiCollapsibleNav] Not scrollable at smaller screens (and should also potentially expand to full-width) #6702

Closed
morhof opened this issue Apr 5, 2023 · 4 comments · Fixed by elastic/kibana#155817
Closed

[EuiCollapsibleNav] Not scrollable at smaller screens (and should also potentially expand to full-width) #6702

morhof opened this issue Apr 5, 2023 · 4 comments · Fixed by elastic/kibana#155817
Assignees
@breehall
Labels
accessibility - mobile

Comments

@morhof
Copy link

morhof commented Apr 5, 2023

WCAG success criterion 1.4.10 - Responsive Design - AA

Steps to reproduce

  1. Set monitor resolution to full HD
  2. Open Home Page
  3. Zoom to 400%

image

Actual Result

  • When zoomed to 400% the menu links are not accessible, thus not operable by users with visual impairment.

Expected Result

  • The website should be implemented in such a way that it is automatically adapted to the given screen and window sizes. The content should thereby break into a single-column design grid. As a result, all application content should be fully readable and operable.

Meta Issue
n.a.

Kibana Version:
8.3
OS:
Microsoft Windows 10 Enterprise (64-bit)
Browser:
Google Chrome 109.0.5414.75 (64-Bit)

Screen reader:
n.a.

Relevant WCAG Criteria:
WCAG success criterion 1.4.10 - Responsive Design - AA
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Relevant ARIA spec:
n.a.
@elasticmachine
Copy link
Collaborator

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@cee-chen
Copy link
Contributor

Transferring to the EUI repo - this is something that needs to be fixed/addressed at the EuiCollapsibleNav level.

@cee-chen cee-chen transferred this issue from elastic/kibana Apr 10, 2023
@cee-chen cee-chen changed the title (Accessibility) At 400% zoom some content is not well perceivable [EuiCollapsibleNav] Not scrollable at smaller screens (and should also potentially expand to full-width) Apr 10, 2023
@cee-chen
Copy link
Contributor

This issue is fairly specific to EuiCollapsibleNav and is quickly solved with some overflow CSS, but also wanted to mention this piece of context from Trevor for future reference:

400% zoom at 1280px browser width is required for WCAG 2.1 Level AA, Reflow

@breehall breehall self-assigned this Apr 24, 2023
@breehall breehall mentioned this issue Apr 26, 2023
Merged
4 tasks
@breehall
Copy link
Contributor

breehall commented Apr 26, 2023 •
edited
Loading

After review, this is actually an issue that would be better resolved within Kibana itself. This behavior occurs because the pinned search bar meets the static button at the bottom of the nav. This makes it seem like there is no additional content because the remaining links can't be interacted with.

Kibana PR: elastic/kibana#155817
EUI PR: #6734

@breehall breehall mentioned this issue Apr 26, 2023
Merged
3 tasks
breehall added a commit to elastic/kibana that referenced this issue May 1, 2023
@breehall @kibanamachine @cee-chen
[CollapsibleNav] Make CollapsibleNav Items Accessible on Small Scre…
8cdef94 
…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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@breehall breehall

Labels
accessibility - mobile
Projects
None yet
Milestone
No milestone
4 participants
@cee-chen @elasticmachine @breehall @morhof