[Metric] Evaluate focus state for light and dark backgrounds, maybe High Contrast Mode

[1Copenut]

Is your feature request related to a problem? Please describe. During my code review of PR #1718 I made a comment about the visual presentation of focus haloes when individual metrics have keyboard focus. I don't feel I gave complete feedback, so I brought the question to the EUI team. It led to good discussion about focus styles for light and dark themes, cross-browser, and Windows High Contrast Mode (this last was a definite nice to have).

I'd like to ask the team's feeling about coordinating these styles to align with EUI button focus styles. This could be a fair bit of work, but would ensure the Metrics handle the widest set of browsers and use cases for a11y and keyboard navigation.

Describe the solution you'd like I'd like the Metrics to have focus styles that follow EUI button styles. I defer to @miukimiu && @cchaos for visual and CSS execution, and will be available to help test solutions.

Checklist

Delete any items that are not applicable to this feature request.

• [x] this request is checked against already exist requests
• [ ] ~~every related Kibana issue is listed under Kibana Cross Issues list~~
• [ ] ~~kibana cross issue tag is associated to the issue if any kibana cross issue is present~~

[markov00]

Thanks @1Copenut for opening this I really like to have EUI support on this. In particular, I think we have a few aspects to consider and to align with (please correct me if I've missed or misunderstand something) when on focus:

1. EUI focus renders a rounder outline around the button, with the browser default outline color configuration. This is not always the most contrating color, but it is probably due to the need of having a consistent color for the focus

chrome safari firefox

We use a similar technique, but probably we need to improve the CSS to align more the styles across the browsers (rounder corners, outline size etc): chrome

safari

firefox

2. EUI adds an underline to the text. We don't have currently that style, we can add it easily, my question is where to an add such underline: just to the title? to the subtitle too? to every text? We should also consider that a metric can be configured to don't show a title, but just a subtitle or the metric. What do we want to do in this case?

3. when used in a grid, there is no space between metrics boundaries. Should the outline follow the current rounder border nature or should we follow a different squared style?

4. should the outline be always rendered outside the metric or can we just render it as an internal border?

5. EUI has a small pull-up animation when hovering over it and push-down animations when clicked. How can this be applied to the metric? How should it behave when the metric is in a grid? How can we apply that when the metric is renderer as a full-size panel in a dashboard (please consider that we want to completely remove the padding of such dashboard panel to fill the panel with the metric. In this case, if we just have a single panel with a single metric, should be the panel animated or the internal element?

[1Copenut]

I'll answer questions from an accessibility perspective, and defer to @miukimiu for style and color recommendations.

1. Given that the Metrics are square boxes, I think I'd recommend the focus haloes be square as well, and contained inside the Metric's bounding box. Ideally the focus halo is completely visible, and offers enough contrast and visual difference on all four sides, to be conspicuous and easily spotted as keyboard users navigate through the individual charts.
2. I would recommend underlining the title on :focus and :hover states to match what's happening in the EuiButton component. If it's possible, I'd encourage always having a title for each Metric. This title is what the <figure> is referencing for its unique name and is an important hook for screen reader users navigating by headings or interactive controls.
3. Please see my answer in item 1.
4. I think I'd look at the internal border, so it's contained in each Metric's bounding box on all four sides.
5. I'll defer to Elizabet for guidance on animation for the Metrics charts