Skip to content

Commit

Permalink
fix: [AXE-CORE][Serverless - Observability] Observability -> SLOs -> …
Browse files Browse the repository at this point in the history
…Metric sparkline charts fail <svg> elements with an img role must have an alternative text a11y check (#183040)

Closes: #179491

## Summary

Observability ->SLOs page -> Metric sparkline charts fail <svg> elements
with an img role must have an alternative text a11y check.

## What was done:? 
1. The `trendA11yTitle` attribute has been added within the
`SloCardChart` component to address accessibility concerns

## Screen: 

### AXE report: 

![image](https://github.com/elastic/kibana/assets/20072247/e366fcf8-fe4b-40a8-baf3-366003b3d16c)

### A11Y tree:

![image](https://github.com/elastic/kibana/assets/20072247/d2633990-a089-477c-8fe1-2d8fefadc8fd)
  • Loading branch information
alexwizp authored May 10, 2024
1 parent 72d3172 commit 00ceb7c
Showing 1 changed file with 6 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,12 @@ export function SloCardChart({
title: slo.name,
subtitle: subTitle,
value: sliValue,
trendA11yTitle: i18n.translate('xpack.slo.slo.sLOGridItem.trendA11yLabel', {
defaultMessage: `The "{title}" trend`,
values: {
title: slo.name,
},
}),
trendShape: MetricTrendShape.Area,
trend: historicalSliData?.map((d) => ({
x: d.key as number,
Expand Down

0 comments on commit 00ceb7c

Please sign in to comment.