diff --git a/src/__stories__/meter-story.tsx b/src/__stories__/meter-story.tsx index 5db15c55c..eae4709c0 100644 --- a/src/__stories__/meter-story.tsx +++ b/src/__stories__/meter-story.tsx @@ -58,6 +58,7 @@ export default { type MeterStoryArgs = { type: MeterType; reverse: boolean; + ariaLabel: string; themeVariant: 'default' | 'inverse' | 'media'; fullWidth: boolean; width: number; @@ -79,6 +80,7 @@ export const MeterStory: StoryComponent = ({ valuesCount, fullWidth, width, + ariaLabel, ...valuesArgs }) => { const values = Object.values(valuesArgs).slice(0, valuesCount); @@ -92,7 +94,13 @@ export const MeterStory: StoryComponent = ({ > - + @@ -103,6 +111,7 @@ MeterStory.storyName = 'Meter'; MeterStory.args = { type: 'angular', reverse: false, + ariaLabel: '', themeVariant: 'default', fullWidth: false, width: 400, diff --git a/src/meter.tsx b/src/meter.tsx index 599dcf3e4..559f943bc 100644 --- a/src/meter.tsx +++ b/src/meter.tsx @@ -9,6 +9,7 @@ import {useThemeVariant} from './theme-variant-context'; import {useElementDimensions, useTheme} from './hooks'; import type {DataAttributes} from './utils/types'; +import {meterPercentageLabel, meterSegmentLabel} from './text-tokens'; const VIEW_BOX_WIDTH = 100; const CENTER_X = VIEW_BOX_WIDTH / 2; @@ -259,6 +260,8 @@ const MeterComponent = ({ const getColor = (index: number) => segmentColors[index % segmentColors.length]; + const totalPercent = Math.round((segments.at(-1)?.end || 0) * 100); + return (
0 ? values[0] : undefined} - aria-valuetext={values.length > 0 ? values.map((v, i) => `${i + 1} ${v}`).join(' ') : ''} + aria-valuenow={totalPercent} + aria-valuemin={0} + aria-valuemax={100} + aria-live="polite" + aria-valuetext={ + ariaLabel || + values.map((v, i) => `${t(meterSegmentLabel, i + 1, Math.round(v * 100))}`).join(', ') + + `, ${t(meterPercentageLabel, totalPercent)}` + } aria-hidden={ariaHidden} > ): string => { - const text = token[language] || token.en; + let text = token[language] || token.en; // reverse loop because we want to substitute 11$s before 1$s for (let i = params.length - 1; i >= 0; i--) { - text.replaceAll(`${i + 1}$s`, String(params[i])); + text = text.replaceAll(`${i + 1}$s`, String(params[i])); } return text; },