@aurodesignsystem-dev/auro-formkit 0.0.0-pr1488.2 → 0.0.0-pr1489.1

package/components/datepicker/demo/customize.md

@@ -695,13 +695,70 @@
 </auro-accordion>
 <auro-header level="3" id="localization">Localization</auro-header>
 <p>Use the <code>centralDate</code>, locale, and related attributes to configure the datepicker for different regions and languages.</p>
+<auro-header level="4" id="rangeLabels">Screen Reader Labels</auro-header>
+<p>The following attributes customize the labels announced by screen readers when navigating the calendar. Range labels apply when the <code>range</code> attribute is set; navigation labels apply to all configurations.</p>
+<auro-table>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Default</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>rangeLabelStart</code></td>
+<td>"range start"</td>
+<td>Announced on the departure/start date cell.</td>
+</tr>
+<tr>
+<td><code>rangeLabelEnd</code></td>
+<td>"range end"</td>
+<td>Announced on the return/end date cell.</td>
+</tr>
+<tr>
+<td><code>rangeLabelBeforeRange</code></td>
+<td>"before range"</td>
+<td>Announced on cells before the start date.</td>
+</tr>
+<tr>
+<td><code>rangeLabelInRange</code></td>
+<td>"in range"</td>
+<td>Announced on cells between the start and end dates.</td>
+</tr>
+<tr>
+<td><code>rangeLabelAfterRange</code></td>
+<td>"after range"</td>
+<td>Announced on cells after the end date (or after start when no end is selected).</td>
+</tr>
+<tr>
+<td><code>navLabelPrevMonth</code></td>
+<td>"Previous month"</td>
+<td>Accessible label for the previous month navigation button.</td>
+</tr>
+<tr>
+<td><code>navLabelNextMonth</code></td>
+<td>"Next month"</td>
+<td>Accessible label for the next month navigation button.</td>
+</tr>
+</tbody>
+</table>
+</auro-table>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
 <!-- The below content is automatically added from ./../apiExamples/localization.html -->
-<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
-<span slot="bib.fullscreen.headline">Localization Headline</span>
-<span slot="fromLabel">Choose a date</span>
-<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<auro-datepicker range
+  rangeLabelStart="fecha de salida"
+  rangeLabelEnd="fecha de regreso"
+  rangeLabelBeforeRange="antes de la salida"
+  rangeLabelInRange="entre vuelos"
+  rangeLabelAfterRange="después del regreso"
+  navLabelPrevMonth="Ir al mes anterior"
+  navLabelNextMonth="Ir al mes siguiente"
+  id="localizationExample">
+<span slot="fromLabel">Salida</span>
+<span slot="toLabel">Regreso</span>
 </auro-datepicker>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -710,10 +767,17 @@
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-datepicker format="yyyy/mm/dd" id="localizationExample"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Localization Headline&lt;/span&gt;
-  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
-  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker range
+  rangeLabelStart="fecha de salida"
+  rangeLabelEnd="fecha de regreso"
+  rangeLabelBeforeRange="antes de la salida"
+  rangeLabelInRange="entre vuelos"
+  rangeLabelAfterRange="después del regreso"
+  navLabelPrevMonth="Ir al mes anterior"
+  navLabelNextMonth="Ir al mes siguiente"
+  id="localizationExample"&gt;
+  &lt;span slot="fromLabel"&gt;Salida&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Regreso&lt;/span&gt;
 &lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>