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.

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

[Search: Home page] Low contrast on expanded Code editor #195449

Closed
L1nBra opened this issue Oct 8, 2024 · 3 comments · Fixed by #195922
Closed

[Search: Home page] Low contrast on expanded Code editor #195449

L1nBra opened this issue Oct 8, 2024 · 3 comments · Fixed by #195922
Assignees
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG AA

Comments

@L1nBra
Copy link

L1nBra commented Oct 8, 2024

Description
Content on the webpage has to be clearly visible with enough contrast and elements should not overlap on one another - thus confusing user.

Preconditions
Stateful Home page (Overview) is opened.
Switch is enabled for Security Privileges.

Steps to reproduce

1.Navigate to New button.
2.Click New button.
3.Navigate to Code editor in Security Privileges section.
4.Click Expand button.
5.Observe expanded Code editor.

Expanded Code editor
Image

Actual Result

  • Expanded editor overlay is hardly visible - not enough contrast. Hard to read the text, the buttons cannot be seen for copy and collapse. Main page is visible behind Code editor and that's why text, buttons of editor are overlapping with main page elements.
    Color of copy and collapse buttons: rgb(52, 55, 65).
    Colors of the code inside editor: symbols of grey color rgb(105, 112, 125), red text rgb(189, 39, 30), blue text rgb(0, 113, 194).
    Same behavior with Metadata editor.

Expected Result

  • When editor is expanded it should be also clearly visible what and where to do, what actions can be performed, without text, buttons being on top of other elements. Text, symbols, buttons on the editor should have a contrast of minimum 4.5:1 to background.

Notes:
Contrast on collapsed editor meets the criteria. It is only an issue when editor is expanded.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.70 (Official Build) (64-bit)

WCAG or Vendor Guidance (optional)

Related to: https://github.com/elastic/search-team/issues/8256

@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 8, 2024
@L1nBra L1nBra added WCAG AA impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. defect-level-1 Critical UX disruption and removed needs-team Issues missing a team label labels Oct 8, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 8, 2024
@L1nBra
Copy link
Author

L1nBra commented Oct 8, 2024

Even though contrast issues are defined under level AA accessibility success criteria, this specific issue is serious, because it is hard for any person to see information on expanded code editor.

@L1nBra L1nBra added defect-level-3 Moderate UX disruption or potentially confusing and removed impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. defect-level-1 Critical UX disruption labels Oct 9, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@L1nBra L1nBra changed the title [Stateful: Home page] Low contrast on expanded Code editor [Search: Home page] Low contrast on expanded Code editor Nov 7, 2024
@alexwizp alexwizp self-assigned this Nov 11, 2024
@alexwizp
Copy link
Contributor

Was fixed within #195922

No low contrast issues
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG AA
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants