@aurodesignsystem-dev/auro-formkit 0.0.0-pr1474.4 → 0.0.0-pr1475.0

package/components/datepicker/demo/keyboard-behavior.md

@@ -11,9 +11,208 @@
 <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
 <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
 <div class="note">
-<p><strong>Note:</strong> The current implementation <strong>DOES</strong> support full interaction of the bib content and calendar with touch, click and VoiceOver interactions.</p>
-<p>The current implementation of the component <strong>DOES</strong> support using the keyboard to navigate the trigger and type dates via the keyboard. It <strong>DOES NOT</strong> support navigating the bib content and calendar via the keyboard. This functionality is scheduled to be added in the next major redesign of the component.</p>
+<p><strong>Note:</strong> The datepicker supports full interaction via touch, click, VoiceOver, and keyboard. The trigger input accepts typed dates, and the calendar bib supports arrow-key navigation between date cells, Enter/Space to select, and Escape to close.</p>
 </div>
+<auro-header level="3" id="keyEventsCounterGroup">Key Events</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+<auro-header level="3" id="keyEvents-trigger">Trigger input</auro-header>
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Enter</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>Trigger input, <strong>NOT</strong> the input clear button</td>
+<td>Opens the calendar bib. Focus moves to the active date cell inside the calendar grid. The Enter key behavior overrides the inherited <code>auro-dropdown</code> key behavior outlined below.</td>
+</tr>
+<tr>
+<td>Space</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>Trigger input, <strong>NOT</strong> the input clear button</td>
+<td>Opens the calendar bib. Focus moves to the active date cell inside the calendar grid. The Space key behavior overrides the inherited <code>auro-dropdown</code> key behavior outlined below.</td>
+</tr>
+</tbody>
+</table>
+<auro-header level="3" id="keyEvents-calendar">Calendar</auro-header>
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="3">Enter</td>
+<td rowspan="3">-</td>
+<td rowspan="3">Expanded</td>
+<td>Previous Month Button</td>
+<td>Re-renders the calendar to show the previous month</td>
+</tr>
+<tr>
+<td>Next Month Button</td>
+<td>Re-renders the calendar to show the next month</td>
+</tr>
+<tr>
+<td>Done button</td>
+<td>Collapses the bib.</td>
+</tr>
+<tr>
+<td rowspan="3">Space</td>
+<td rowspan="3">-</td>
+<td rowspan="3">Expanded</td>
+<td>Previous Month Button</td>
+<td>Re-renders the calendar to show the previous month</td>
+</tr>
+<tr>
+<td>Next Month Button</td>
+<td>Re-renders the calendar to show the next month</td>
+</tr>
+<tr>
+<td>Done button</td>
+<td>Collapses the bib.</td>
+</tr>
+</tbody>
+</table>
+<auro-header level="3" id="keyEvents-calendar">Calendar grid</auro-header>
+<p>When the calendar bib is open, one date cell is the <em>active</em> cell (roving <code>tabindex="0"</code>). All other cells have <code>tabindex="-1"</code>. Arrow keys move the active cell without wrapping — when a boundary is reached the calendar navigates to the adjacent month.</p>
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>ArrowRight</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Moves focus to the next day. If at the end of the month, navigates to the first focusable day of the next month.</td>
+</tr>
+<tr>
+<td>ArrowLeft</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Moves focus to the previous day. If at the start of the month, navigates to the last focusable day of the previous month.</td>
+</tr>
+<tr>
+<td>ArrowDown</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Moves focus to the same day of the week in the next week (+7 days). Navigates to the next month if needed.</td>
+</tr>
+<tr>
+<td>ArrowUp</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Moves focus to the same day of the week in the previous week (−7 days). Navigates to the previous month if needed.</td>
+</tr>
+<tr>
+<td>Enter / Space</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Selects the focused date. Blackout dates receive focus but cannot be selected.</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Closes the calendar bib and returns focus to the trigger input.</td>
+</tr>
+<tr>
+<td>Tab</td>
+<td>-</td>
+<td>Expanded</td>
+<td>Any date cell</td>
+<td>Moves focus to the next focusable element outside the calendar grid (e.g., month navigation buttons or the close button in fullscreen mode).</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="4" id="keyEventsDropdown">Key Events inherited from Auro-Dropdown</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../dropdown/docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../../dropdown/docs/partials/keyEvents.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="2">Enter</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+              Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+              Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+              Component <code>:host</code> or any <strong>focusable</strong> element within the component.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td rowspan="2">Space</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+              Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+              Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 </div>
 </div>

package/components/datepicker/demo/voiceover.md

@@ -37,12 +37,19 @@
 <auro-header level="3" id="voiceOverClearButton">Clear Button</auro-header>
 <p>When the clear button is focused, VoiceOver announces the <code>aria-label</code> from the <code>ariaLabel.input.clear</code> slot (or the default i18n text), followed by <em>"button"</em>.</p>
 <auro-header level="3" id="voiceOverCalendarNavigation">Calendar Navigation</auro-header>
-<p>When the calendar bib is open, users can navigate calendar cells using VoiceOver gestures (swipe left/right). Each cell announces:</p>
+<p>When the calendar bib is open, users can navigate calendar cells using VoiceOver gestures (swipe left/right) or arrow keys. Each cell announces:</p>
 <ul>
-<li>The date (e.g. <em>"January 15, 2026"</em>)</li>
-<li>Whether the date is selected or within the selected range</li>
-<li>Whether the date is disabled (outside min/max bounds)</li>
-</ul>
+<li>The full localized date (e.g. <em>"Wednesday, May 14, 2026"</em>)</li>
+<li>Range position when in range mode (e.g. <em>", range start"</em>, <em>", in range"</em>, <em>", before range"</em>)</li>
+<li><em>", unavailable"</em> for blackout dates (dates within the min/max range that are explicitly disabled)</li>
+<li><em>"current date"</em> for today's date (via <code>aria-current="date"</code>)</li>
+<li>Selection state: <em>"selected"</em> or not (via <code>aria-selected</code>)</li>
+</ul>
+<p>Out-of-range cells (outside min/max bounds) are completely hidden from VoiceOver with <code>aria-hidden="true"</code>.</p>
+<auro-header level="3" id="voiceOverDateSelection">Date Selection</auro-header>
+<p>When a date is selected, an <code>aria-live="assertive"</code> region announces the selected date (e.g. <em>"Wednesday, May 14, 2026"</em>). For range datepickers, both the start and end selections are announced.</p>
+<auro-header level="3" id="voiceOverDialogName">Dialog Name</auro-header>
+<p>The calendar dialog receives its accessible name from the <code>fromLabel</code> slot content. VoiceOver announces the dialog as e.g. <em>"Departure date, dialog"</em> when it opens.</p>
 <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
 <p>The calendar bib may be <strong>closed</strong> using a gesture.</p>
 <ul>
@@ -60,22 +67,22 @@
 <p>Examples: large tablet, typical size or larger desktop browser window</p>
 <ol>
 <li><strong>Focus</strong> — Tab to the datepicker input.</li>
-<li><strong>Type a date</strong> — Enter a date value directly or click/tap to open the calendar.</li>
-<li><strong>Calendar opens</strong> — The dropdown bib opens with the calendar. Navigate dates with VoiceOver gestures.</li>
-<li><strong>Select a date</strong> — Activate a calendar cell to select the date. The calendar closes and the selected date populates the input.</li>
+<li><strong>Type a date</strong> — Enter a date value directly, or press Enter/Space to open the calendar.</li>
+<li><strong>Calendar opens</strong> — Focus moves to the active date cell inside the calendar grid. Navigate dates with VoiceOver gestures (swipe) or arrow keys.</li>
+<li><strong>Select a date</strong> — Activate a calendar cell (double-tap with VoiceOver, or Enter/Space with keyboard) to select the date. The selected date is announced via a live region. For single datepickers, the calendar closes and the selected date populates the input.</li>
 </ol>
 <auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
 <p>Examples: mobile phone, very small desktop browser window</p>
 <ol>
 <li><strong>Focus</strong> — Tab or swipe to the datepicker input.</li>
 <li>
-<strong>Open:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button.
+<strong>Open:</strong> The fullscreen modal dialog opens. VoiceOver announces the dialog name (e.g. <em>"Departure date, dialog"</em>). Focus is moved to the active date cell inside the calendar grid.
 </li>
-<li><strong>Navigate dates</strong> — Swipe through calendar cells.</li>
+<li><strong>Navigate dates</strong> — Swipe through calendar cells or use arrow keys.</li>
 <li>
-<strong>Select a date:</strong> Closes the fullscreen modal dialog, the selected date populates the input.
+<strong>Select a date:</strong> The selected date is announced via a live region. For single datepickers, the fullscreen modal closes and the selected date populates the input.
 <p>~OR~</p>
-<strong>Close without selecting:</strong> Closes the fullscreen modal dialog.
+<strong>Close without selecting:</strong> Activate the close button, press Escape, or use the VoiceOver scrub gesture to close the fullscreen modal dialog.
 </li>
 </ol>
 <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>