WEB-2079 a11y

Telefonica · Nov 8, 2024 · 72a13b1 · 72a13b1
1 parent ca07704
commit 72a13b1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git 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<MeterStoryArgs> = ({
     valuesCount,
     fullWidth,
     width,
+    ariaLabel,
     ...valuesArgs
 }) => {
     const values = Object.values(valuesArgs).slice(0, valuesCount);
@@ -92,7 +94,13 @@ export const MeterStory: StoryComponent<MeterStoryArgs> = ({
         >
             <ResponsiveLayout variant={themeVariant} fullWidth>
                 <Box padding={16}>
-                    <Meter type={type} reverse={reverse} values={values} width={fullWidth ? '100%' : width} />
+                    <Meter
+                        aria-label={ariaLabel || undefined}
+                        type={type}
+                        reverse={reverse}
+                        values={values}
+                        width={fullWidth ? '100%' : width}
+                    />
                 </Box>
             </ResponsiveLayout>
         </div>
@@ -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
@@ -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,15 +260,24 @@ const MeterComponent = ({
 
     const getColor = (index: number) => segmentColors[index % segmentColors.length];
 
+    const totalPercent = Math.round((segments.at(-1)?.end || 0) * 100);
+
     return (
         <div
             ref={containerRef}
             style={{width: widthProp}}
             {...getPrefixedDataAttributes(dataAttributes, 'Meter')}
             role="meter"
             aria-label={ariaLabel}
-            aria-valuenow={values.length > 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}
         >
             <svg

diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
@@ -556,3 +556,24 @@ export const ratingQuantitativeLabel: TextToken = {
     de: '1$s von 2$s',
     pt: '1$s de 2$s',
 };
+
+/**
+ * 1$s: segment number
+ * 2$s: segment percentage value
+ */
+export const meterSegmentLabel: TextToken = {
+    es: 'Segmento 1$s 2$s%',
+    en: 'Segment 1$s 2$s%',
+    de: 'Segment 1$s 2$s%',
+    pt: 'Segmento 1$s 2$s%',
+};
+
+/**
+ * 1$s: percentage value
+ */
+export const meterPercentageLabel: TextToken = {
+    es: '1$s% de 0% a 100%',
+    en: '1$s% from 0% to 100%',
+    de: '1$s% von 0% bis 100%',
+    pt: '1$s% de 0% a 100%',
+};
diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx
@@ -134,10 +134,10 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
 
     const translate = React.useCallback(
         (token: TextToken, ...params: Array<string | number>): 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;
         },