github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Graph] fix A11y issues (#188624)

Browse source 
## Summary

Fixes https://github.com/elastic/kibana/issues/154423
Changes the color of the graph label from darkShade to darkestShade 

Before:
<img width="332" alt="Screenshot 2024-07-18 at 11 13 06"
src="https://github.com/user-attachments/assets/fd539b27-e9bd-4d3d-bb42-2e0440bf73ac">

After:
<img width="335" alt="Screenshot 2024-07-18 at 11 10 18"
src="https://github.com/user-attachments/assets/ee1af463-fc49-42e3-92ab-fddf1ff209cd">


Fixes https://github.com/elastic/kibana/issues/154417

Now we can go through the labels in graph with keyboard 
![Jul-18-2024
11-29-20](https://github.com/user-attachments/assets/786077fc-cf64-40f2-9697-603c711bce84)
This commit is contained in:
Marta Bondyra 2024-07-18 16:04:57 +02:00 • committed by GitHub
parent 7a844faf1b
commit edad80ce5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/graph/public/components/_sidebar.scss
View file

@ -20,7 +20,7 @@
.gphSidebar__header {
margin-top: $euiSizeS;
color: $euiColorEmptyShade;
background-color: $euiColorDarkShade;
background-color: $euiColorDarkestShade;
padding: $euiSizeXS;
border-radius: $euiBorderRadius;
margin-bottom: $euiSizeXS;
@ -63,6 +63,9 @@
line-height: $euiLineHeight;
margin: $euiSizeXS 0;
cursor: pointer;
width: 100%;
display: block;
text-align: left;
> * {
vertical-align: middle;

4
x-pack/plugins/graph/public/components/control_panel/selected_node_item.tsx
View file

@ -39,7 +39,7 @@ export const SelectedNodeItem = ({
const offset = fixIconOffset(node);
return (
<div aria-hidden="true" className={fieldClasses} onClick={() => onSelectedFieldClick(node)}>
<button aria-hidden="true" className={fieldClasses} onClick={() => onSelectedFieldClick(node)}>
<svg width="24" height="24">
<circle
className="gphNode__circle"
@ -60,6 +60,6 @@ export const SelectedNodeItem = ({
</svg>
<span>{node.label}</span>
{node.numChildren > 0 && <span> (+{node.numChildren})</span>}
</div>
</button>
);
};