Updated docs to illustrate aria-valuetext with label typeof string.

elastic · Apr 15, 2024 · b8439df · b8439df
1 parent 5ef3d4e
commit b8439df
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src-docs/src/views/range/levels.tsx b/src-docs/src/views/range/levels.tsx
@@ -31,11 +31,11 @@ export default () => {
   ];
 
   const customTicks = [
-    { label: 'low', value: 0, accessibleLabel: 'low' },
-    { label: 'intermediate', value: 15, accessibleLabel: 'intermediate' },
-    { label: 'moderate', value: 35, accessibleLabel: 'moderate' },
-    { label: 'high', value: 65, accessibleLabel: 'high' },
-    { label: 'severe', value: 85, accessibleLabel: 'severe' },
+    { label: 'low', value: 0 },
+    { label: 'intermediate', value: 15 },
+    { label: 'moderate', value: 35 },
+    { label: 'high', value: 65 },
+    { label: 'severe', value: 85 },
   ];
 
   const customColorsLevels = [

diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
@@ -242,11 +242,9 @@ export const RangeControlExample = {
             The <EuiCode>EuiRangeTick</EuiCode> interface now includes an
             optional <EuiCode>accessibleLabel</EuiCode>. This property is
             combined with the current <EuiCode>value</EuiCode> to render an{' '}
-            <EuiCode>aria-valuetext</EuiCode> attribute. If the accessible label
-            is not included, <EuiCode>aria-valuetext</EuiCode> will be the
-            computed current value. This attribute is announced to screen reader
-            users and is useful when values are defined differently than tick
-            labels.
+            <EuiCode>aria-valuetext</EuiCode> attribute. A{' '}
+            <EuiCode>label</EuiCode> of type string will be combined with the
+            current value when no accessible label is passed.
           </p>
           <EuiCallOut
             color="warning"