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

(Accessibility) Some content is not fully visible on 200% zoom - example 3 #154415

Closed
morhof opened this issue Apr 5, 2023 · 4 comments · Fixed by #161398
Closed

(Accessibility) Some content is not fully visible on 200% zoom - example 3 #154415

morhof opened this issue Apr 5, 2023 · 4 comments · Fixed by #161398
Assignees
@tsullivan
Labels
bug Fixes for quality problems that affect the customer experience Feature:Search Querying infrastructure in Kibana Project:Accessibility Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@morhof
Copy link

morhof commented Apr 5, 2023

WCAG success criterion 1.4.4 - resize text - AA

Steps to reproduce

  1. Change Browser Window Zoom to 200% (monitor resolution = full hd)
  2. Click on Search

image

Actual Result

  • The filter options in the search dialog are also cut off.

Expected Result

  • After font size adjustment, all elements of the GUI should be scaled correctly, overlays should be avoided, and all elements should be reachable.

Meta Issue

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.4 - resize text - AA
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

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

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Apr 5, 2023
@bhavyarm bhavyarm added the Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) label Apr 5, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Apr 5, 2023
@bhavyarm bhavyarm added Feature:Search Querying infrastructure in Kibana needs-team Issues missing a team label labels Apr 5, 2023
@botelastic botelastic bot removed the needs-team Issues missing a team label label Apr 5, 2023
@bhavyarm bhavyarm added bug Fixes for quality problems that affect the customer experience Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. labels Apr 5, 2023
@cee-chen
Copy link
Contributor

cee-chen commented Apr 5, 2023

Adding a scrolling overflow and max-height based on window height would be my personal suggestion for ensuring the popover scrolls/overflows:

<EuiSelectableTemplateSitewide
  listProps={{
    className: 'eui-yScroll',
    css: css`
      max-block-size: 75vh; // Tweak as needed
    `,
  }}
/>

@tsullivan tsullivan mentioned this issue Jun 15, 2023
Merged
5 tasks
tsullivan added a commit that referenced this issue Jun 21, 2023
@tsullivan @kibanamachine
[Serverless] New UX for Global Search bar (#158978)
ec3b60b 
**Global Search**

Project document:
https://docs.google.com/document/d/1Z-AkRoagS6JMVN5YHZpjgQr0sYGFXBTNS9SHsbLPfGQ/edit#

## Summary
Closes #159763

Currently there is a known issue with the search bar when there is not
enough screen real estate:
#154415

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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 was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <[email protected]>
@tsullivan tsullivan mentioned this issue Jul 6, 2023
Merged
8 tasks
@tsullivan
Copy link
Member

Thanks for the suggestion, @cee-chen!

#161398

tsullivan added a commit that referenced this issue Jul 7, 2023
@tsullivan
[Global Search Bar] Ensure the search controls are visible in low DPI…
bc09b1e 
… screens (#161398)

## Summary

Closes #154415 by applying the
fix suggested by Cee Chen.

<img width="859" alt="image"
src="https://github.com/elastic/kibana/assets/908371/6d57effd-f4c8-43ec-a6ab-beb89218a885">

<img width="1715" alt="image"
src="https://github.com/elastic/kibana/assets/908371/8b750af7-cb4a-49cb-b1ba-c9621f88ccbb">


### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tsullivan tsullivan

Labels
bug Fixes for quality problems that affect the customer experience Feature:Search Querying infrastructure in Kibana Project:Accessibility Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Global Search Bar] Ensure the search controls are visible in low DPI screens tsullivan/kibana
5 participants
@cee-chen @tsullivan @bhavyarm @elasticmachine @morhof