@aurodesignsystem-dev/auro-formkit 0.0.0-pr1480.9 → 0.0.0-pr1482.0

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

@@ -11,208 +11,9 @@
 <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 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>
+<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>
 </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 calendar grid, with <code>aria-activedescendant</code> pointing to the active date cell. 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 calendar grid, with <code>aria-activedescendant</code> pointing to the active date cell. 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-calendarGrid">Calendar grid</auro-header>
-<p>When the calendar bib is open, DOM focus remains on a wrapper element (<code>#calendarGrid</code>) while <code>aria-activedescendant</code> points to a proxy element that mirrors the active cell's ARIA attributes. Arrow keys move the active cell indicator without wrapping — when a boundary is reached the calendar navigates to the adjacent month. A debounced live region announces the full date context after navigation pauses.</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>Calendar grid (any date active)</td>
-<td>Moves the active indicator 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>Calendar grid (any date active)</td>
-<td>Moves the active indicator 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>Calendar grid (any date active)</td>
-<td>Moves the active indicator 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>Calendar grid (any date active)</td>
-<td>Moves the active indicator 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>Calendar grid (any date active)</td>
-<td>Selects the active date. Blackout dates can be active but cannot be selected.</td>
-</tr>
-<tr>
-<td>Escape</td>
-<td>-</td>
-<td>Expanded</td>
-<td>Calendar grid (any date active)</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>Calendar grid (any date active)</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/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-datepicker.md","readme.md"]
+["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]

package/components/datepicker/demo/voiceover.md

@@ -37,21 +37,12 @@
 <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, DOM focus stays on the calendar grid wrapper while <code>aria-activedescendant</code> points to a proxy element that mirrors the active cell's ARIA attributes. This prevents duplicate screen reader announcements during rapid arrow-key navigation. A debounced live region (150 ms) announces the full context after the user pauses.</p>
-<p>Users can navigate calendar cells using VoiceOver gestures (swipe left/right) or arrow keys. Each cell announces:</p>
+<p>When the calendar bib is open, users can navigate calendar cells using VoiceOver gestures (swipe left/right). Each cell announces:</p>
 <ul>
-<li>The full localized date (e.g. <em>"Thursday, May 14, 2026"</em>)</li>
-<li>Date slot content when present (e.g. prices)</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>"Thursday, 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>
+<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>
 <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
 <p>The calendar bib may be <strong>closed</strong> using a gesture.</p>
 <ul>
@@ -69,22 +60,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 press Enter/Space to open the calendar.</li>
-<li><strong>Calendar opens</strong> — Focus moves to the calendar grid wrapper, with <code>aria-activedescendant</code> pointing to the active date. VoiceOver announces the active date. 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 and populates the input. The calendar remains open; close it by pressing Escape or activating the Done button.</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>
 </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> The fullscreen modal dialog opens. VoiceOver announces the dialog name (e.g. <em>"Departure date, dialog"</em>). Focus is moved to the calendar grid wrapper, with <code>aria-activedescendant</code> pointing to the active date.
+<strong>Open:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button.
 </li>
-<li><strong>Navigate dates</strong> — Swipe through calendar cells or use arrow keys.</li>
+<li><strong>Navigate dates</strong> — Swipe through calendar cells.</li>
 <li>
-<strong>Select a date:</strong> The selected date is announced via a live region and populates the input. The fullscreen modal remains open so additional dates can be reviewed.
+<strong>Select a date:</strong> Closes the fullscreen modal dialog, the selected date populates the input.
 <p>~OR~</p>
-<strong>Close:</strong> Activate the close button, press Escape, or use the VoiceOver scrub gesture to close the fullscreen modal dialog.
+<strong>Close without selecting:</strong> Closes the fullscreen modal dialog.
 </li>
 </ol>
 <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>