elastic/kibana

[Dev Tools] Small design issues in high contrast mode

Open

#217547 opened on Apr 8, 2025

View on GitHub
 (8 comments) (0 reactions) (1 assignee)TypeScript (19,065 stars) (8,021 forks)batch import
Feature:ConsoleFeature:Search ProfilerTeam:Kibana Managementgood first issue

Description

In high contrast mode, some of the Dev Tools components have double borders or rounded corners. This is because the EuiPanel always has a border in high contrast mode, even if it's set to have no shadow and no border. We could try to fix this by using div elements instead.

Contributor guide

Tech stack
typescripthtmlcssreact
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic CSS knowledgeFamiliarity with Elastic UI (EUI)
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue involves high contrast mode in Kibana Dev Tools, where EuiPanel components cause double borders or rounded corners. The suggested fix is to replace EuiPanel with div elements. Look at the Dev Tools components that use EuiPanel and ensure the visual appearance is correct in high contrast mode. The maintainers have discussed this in comments; review the discussion for any specific components mentioned. No linked PRs, but there is an assignee, so coordinate if needed.