From 7c155dc64cb0e0070b34fe99655e02fc57f711ee Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 11 Apr 2024 10:07:36 -0500
Subject: [PATCH] Updated Tick marks docs to highlight accessibleLabel
 property.

---
 src-docs/src/views/range/range_example.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
index 7a845151721..0a91e58d95d 100644
--- a/src-docs/src/views/range/range_example.js
+++ b/src-docs/src/views/range/range_example.js
@@ -238,6 +238,16 @@ export const RangeControlExample = {
             <EuiCode>label</EuiCode>. The value must be included in the range of
             values (min-max), though the label may be anything you choose.
           </p>
+          <p>
+            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.
+          </p>
           <EuiCallOut
             color="warning"
             title="Minimum of 5px width per tick allowed"