@aurodesignsystem-dev/auro-formkit 0.0.0-pr1532.1 → 0.0.0-pr1533.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +118 -50
- package/components/combobox/demo/getting-started.min.js +118 -50
- package/components/combobox/demo/index.min.js +118 -50
- package/components/combobox/dist/auro-combobox.d.ts +10 -0
- package/components/combobox/dist/index.js +118 -50
- package/components/combobox/dist/registered.js +118 -50
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/accessibility.md +17 -8
- package/components/datepicker/demo/api.md +1 -1
- package/components/datepicker/demo/customize.min.js +229 -72
- package/components/datepicker/demo/index.min.js +229 -72
- package/components/datepicker/demo/keyboard-behavior.md +3 -3
- package/components/datepicker/demo/voiceover.md +4 -4
- package/components/datepicker/demo/why-datepicker.md +2 -2
- package/components/datepicker/dist/auro-calendar-cell.d.ts +11 -0
- package/components/datepicker/dist/auro-calendar.d.ts +26 -2
- package/components/datepicker/dist/auro-datepicker.d.ts +9 -1
- package/components/datepicker/dist/index.js +229 -72
- package/components/datepicker/dist/registered.js +229 -72
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.md +3 -3
- package/components/form/demo/customize.md +345 -97
- package/components/form/demo/customize.min.js +441 -176
- package/components/form/demo/getting-started.md +344 -96
- package/components/form/demo/getting-started.min.js +461 -176
- package/components/form/demo/index.min.js +412 -176
- package/components/form/demo/registerDemoDeps.min.js +408 -172
- package/components/form/dist/auro-form.d.ts +7 -7
- package/components/form/dist/index.js +4 -4
- package/components/form/dist/registered.js +4 -4
- package/components/input/demo/customize.min.js +56 -45
- package/components/input/demo/getting-started.min.js +56 -45
- package/components/input/demo/index.min.js +56 -45
- package/components/input/dist/base-input.d.ts +20 -4
- package/components/input/dist/index.js +56 -45
- package/components/input/dist/registered.js +56 -45
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +5924 -5826
- package/package.json +1 -1
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
<p>Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management.</p>
|
|
5
5
|
<p><code>auro-datepicker</code> provides:</p>
|
|
6
6
|
<ul>
|
|
7
|
-
<li><strong>Full keyboard navigation</strong> — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar.
|
|
7
|
+
<li><strong>Full keyboard navigation</strong> — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar. DOM focus stays on the calendar grid wrapper while an imperatively-tracked active cell is announced through a debounced <code>aria-live</code> region, so screen readers stay in sync without duplicate announcements during rapid navigation.</li>
|
|
8
8
|
<li><strong>Rich ARIA semantics</strong> — Every cell is labeled with its full date, day-of-week, and contextual state (e.g. "selected", "today", "unavailable", "range start", "in range"). Screen reader users hear meaningful announcements, not just numbers.</li>
|
|
9
9
|
<li><strong>Live region announcements</strong> — Month changes are announced via <code>aria-live</code> so assistive technology users know the visible month has changed.</li>
|
|
10
10
|
<li><strong>Reduced motion support</strong> — Scrolling and transitions respect <code>prefers-reduced-motion</code>.</li>
|
|
11
|
-
<li><strong>Focus management</strong> — Opening the calendar moves focus to the calendar grid wrapper
|
|
11
|
+
<li><strong>Focus management</strong> — Opening the calendar moves focus to the calendar grid wrapper; the initial active date cell is marked imperatively and announced via the <code>aria-live</code> region. Closing returns focus to the trigger input. The fullscreen dialog uses <code>showModal()</code> for native inert-background behavior, while the desktop modal traps focus within the bib.</li>
|
|
12
12
|
</ul>
|
|
13
13
|
<p>By contrast, native <code><input type="date"></code> delegates all of this to the browser, and the result differs significantly between Chrome, Safari, and Firefox — often with no keyboard navigation of the calendar grid at all on some platforms.</p>
|
|
14
14
|
<auro-header level="2" id="dateRangeSelection">Date range selection</auro-header>
|
|
@@ -219,6 +219,17 @@ export class AuroCalendarCell extends LitElement {
|
|
|
219
219
|
*/
|
|
220
220
|
private handleSlotContent;
|
|
221
221
|
firstUpdated(): void;
|
|
222
|
+
/**
|
|
223
|
+
* Wires the cell to its ancestor calendar-month and calendar (and, via
|
|
224
|
+
* the calendar, to the datepicker). Extracted from firstUpdated() so the
|
|
225
|
+
* retry loop can re-attempt without recursively invoking a Lit lifecycle
|
|
226
|
+
* method (which is outside the framework's contract).
|
|
227
|
+
* @private
|
|
228
|
+
* @returns {void}
|
|
229
|
+
*/
|
|
230
|
+
private _initFromAncestors;
|
|
231
|
+
_firstUpdatedRetries: any;
|
|
232
|
+
_firstUpdatedRetryTimer: any;
|
|
222
233
|
calendar: any;
|
|
223
234
|
datepicker: any;
|
|
224
235
|
_slotContentHandler: (() => void) | undefined;
|
|
@@ -173,6 +173,15 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
173
173
|
* @private
|
|
174
174
|
*/
|
|
175
175
|
private calendarRangeMonths;
|
|
176
|
+
/**
|
|
177
|
+
* @deprecated Use `auro-datepicker.blackoutDates` (an array of
|
|
178
|
+
* `YYYY-MM-DD` ISO strings) instead. This legacy array of Unix
|
|
179
|
+
* timestamps is still honored for backward compatibility but emits a
|
|
180
|
+
* one-time `console.debug` the first time a non-empty value is observed.
|
|
181
|
+
* Support will be removed in a future major release.
|
|
182
|
+
* @private
|
|
183
|
+
*/
|
|
184
|
+
private _disabledDays;
|
|
176
185
|
/**
|
|
177
186
|
* @private
|
|
178
187
|
*/
|
|
@@ -337,8 +346,19 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
337
346
|
/**
|
|
338
347
|
* Returns a memoized Set of blackout timestamps (seconds) drawn from both
|
|
339
348
|
* the legacy `disabledDays` array and the datepicker's ISO `blackoutDates`.
|
|
340
|
-
*
|
|
341
|
-
*
|
|
349
|
+
*
|
|
350
|
+
* The cache invalidates on **reference identity** — only when the
|
|
351
|
+
* consumer reassigns the array (`el.blackoutDates = [...]`), matching
|
|
352
|
+
* Lit's own reactivity semantics for array properties. In-place mutations
|
|
353
|
+
* on the existing array (`push`, `splice`, index assignment) will NOT
|
|
354
|
+
* invalidate the cache and the new entries will be silently ignored.
|
|
355
|
+
* Consumers must reassign to update — see the JSDoc on
|
|
356
|
+
* `auro-datepicker.blackoutDates` for the recommended pattern.
|
|
357
|
+
*
|
|
358
|
+
* A shallow-equality tier was considered but rejected: it would run
|
|
359
|
+
* O(N) work on every cell render (this method is called per-cell via
|
|
360
|
+
* `isBlackout()`) and still wouldn't catch same-length value swaps,
|
|
361
|
+
* offering a false sense of safety.
|
|
342
362
|
* @private
|
|
343
363
|
* @returns {Set<Number>}
|
|
344
364
|
*/
|
|
@@ -588,6 +608,10 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
588
608
|
* originally tried aria-live="polite" here, but VoiceOver treats
|
|
589
609
|
* polite as "wait until idle" — which never happens during active
|
|
590
610
|
* keyboard navigation — so the announcements were silently dropped.
|
|
611
|
+
*
|
|
612
|
+
* This is a documented deviation from WCAG 2.1 SC 4.1.3, which
|
|
613
|
+
* prefers `polite` for status messages. See the "Documented
|
|
614
|
+
* Deviation" section in components/datepicker/docs/pages/accessibility.md.
|
|
591
615
|
* @private
|
|
592
616
|
* @param {String} dateStr - The localized date string to announce.
|
|
593
617
|
* @returns {void}
|
|
@@ -54,6 +54,14 @@ export class AuroDatePicker extends AuroElement {
|
|
|
54
54
|
};
|
|
55
55
|
/**
|
|
56
56
|
* Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
|
|
57
|
+
*
|
|
58
|
+
* **Immutable update required.** The datepicker treats this array as
|
|
59
|
+
* immutable and memoizes a lookup Set keyed on the array's reference
|
|
60
|
+
* identity — matching Lit's own reactivity semantics for array
|
|
61
|
+
* properties. In-place mutations (`blackoutDates.push(...)`,
|
|
62
|
+
* `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
|
|
63
|
+
* invalidate the cache and the new entries will be silently ignored.
|
|
64
|
+
* To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
|
|
57
65
|
*/
|
|
58
66
|
blackoutDates: {
|
|
59
67
|
type: ArrayConstructor;
|
|
@@ -745,7 +753,7 @@ export class AuroDatePicker extends AuroElement {
|
|
|
745
753
|
*/
|
|
746
754
|
private configureDropdown;
|
|
747
755
|
dropdown: any;
|
|
748
|
-
|
|
756
|
+
_restoreFocusOnClose: boolean | undefined;
|
|
749
757
|
/**
|
|
750
758
|
* Binds all behavior needed to the input after rendering.
|
|
751
759
|
* @private
|