@aurodesignsystem-dev/auro-formkit 0.0.0-pr1524.0 → 0.0.0-pr1530.0
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 +25 -67
- package/components/combobox/demo/getting-started.min.js +25 -67
- package/components/combobox/demo/index.min.js +25 -67
- package/components/combobox/dist/auro-combobox.d.ts +0 -2
- package/components/combobox/dist/index.js +25 -67
- package/components/combobox/dist/registered.js +25 -67
- 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 +12 -3
- package/components/datepicker/demo/api.md +1 -1
- package/components/datepicker/demo/customize.min.js +121 -34
- package/components/datepicker/demo/index.min.js +121 -34
- package/components/datepicker/demo/voiceover.md +1 -1
- package/components/datepicker/dist/auro-calendar-cell.d.ts +2 -0
- package/components/datepicker/dist/auro-calendar.d.ts +17 -2
- package/components/datepicker/dist/auro-datepicker.d.ts +9 -1
- package/components/datepicker/dist/index.js +121 -34
- package/components/datepicker/dist/registered.js +121 -34
- 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/customize.min.js +170 -123
- package/components/form/demo/getting-started.min.js +170 -123
- package/components/form/demo/index.min.js +170 -123
- package/components/form/demo/registerDemoDeps.min.js +170 -123
- package/components/input/demo/customize.min.js +19 -17
- package/components/input/demo/getting-started.min.js +19 -17
- package/components/input/demo/index.min.js +19 -17
- package/components/input/dist/index.js +19 -17
- package/components/input/dist/registered.js +19 -17
- 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 +5 -19
- package/package.json +1 -1
|
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4812
4812
|
}
|
|
4813
4813
|
};
|
|
4814
4814
|
|
|
4815
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607021905';
|
|
4816
4816
|
|
|
4817
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4818
4818
|
static get properties() {
|
|
@@ -17694,17 +17694,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
17694
17694
|
* @returns {void}
|
|
17695
17695
|
*/
|
|
17696
17696
|
notifyValueChanged() {
|
|
17697
|
-
|
|
17698
|
-
|
|
17699
|
-
|
|
17700
|
-
// it from genuine user typing and skip clobbering their own
|
|
17701
|
-
// programmatic state during init-time renders.
|
|
17702
|
-
const inputEvent = new Event('input', {
|
|
17697
|
+
let inputEvent = null;
|
|
17698
|
+
|
|
17699
|
+
inputEvent = new Event('input', {
|
|
17703
17700
|
bubbles: true,
|
|
17704
17701
|
composed: true,
|
|
17705
17702
|
});
|
|
17706
|
-
inputEvent.isProgrammatic = true;
|
|
17707
17703
|
|
|
17704
|
+
// Dispatched event to alert outside shadow DOM context of event firing.
|
|
17708
17705
|
this.dispatchEvent(inputEvent);
|
|
17709
17706
|
}
|
|
17710
17707
|
|
|
@@ -18417,7 +18414,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18417
18414
|
}
|
|
18418
18415
|
};
|
|
18419
18416
|
|
|
18420
|
-
var formkitVersion$1 = '
|
|
18417
|
+
var formkitVersion$1 = '202607021905';
|
|
18421
18418
|
|
|
18422
18419
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18423
18420
|
// See LICENSE in the project root for license information.
|
|
@@ -18703,15 +18700,20 @@ class AuroInput extends BaseInput {
|
|
|
18703
18700
|
* @returns {void}
|
|
18704
18701
|
*/
|
|
18705
18702
|
checkDisplayValueSlotChange() {
|
|
18706
|
-
|
|
18707
|
-
|
|
18708
|
-
//
|
|
18709
|
-
|
|
18710
|
-
|
|
18711
|
-
|
|
18712
|
-
|
|
18703
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
18704
|
+
|
|
18705
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
18706
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
18707
|
+
nodes = nodes[0].assignedNodes();
|
|
18708
|
+
}
|
|
18709
|
+
|
|
18710
|
+
let hasContent = false;
|
|
18711
|
+
|
|
18712
|
+
if (nodes.length > 0) {
|
|
18713
|
+
hasContent = true;
|
|
18714
|
+
}
|
|
18713
18715
|
|
|
18714
|
-
this.hasDisplayValueContent =
|
|
18716
|
+
this.hasDisplayValueContent = hasContent;
|
|
18715
18717
|
}
|
|
18716
18718
|
|
|
18717
18719
|
firstUpdated() {
|
|
@@ -19538,7 +19540,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19538
19540
|
}
|
|
19539
19541
|
}
|
|
19540
19542
|
|
|
19541
|
-
var formkitVersion = '
|
|
19543
|
+
var formkitVersion = '202607021905';
|
|
19542
19544
|
|
|
19543
19545
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19544
19546
|
|
|
@@ -20637,11 +20639,9 @@ class AuroCombobox extends AuroElement {
|
|
|
20637
20639
|
/**
|
|
20638
20640
|
* Processes hidden state of all menu options and determines if there are any available options not hidden.
|
|
20639
20641
|
* @private
|
|
20640
|
-
* @param {object} [root0={}] - Optional flag bag.
|
|
20641
|
-
* @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
|
|
20642
20642
|
* @returns {void}
|
|
20643
20643
|
*/
|
|
20644
|
-
handleMenuOptions(
|
|
20644
|
+
handleMenuOptions() {
|
|
20645
20645
|
this.generateOptionsArray();
|
|
20646
20646
|
this.availableOptions = [];
|
|
20647
20647
|
// Single source of truth for the menu's filter/highlight token per call.
|
|
@@ -20662,20 +20662,8 @@ class AuroCombobox extends AuroElement {
|
|
|
20662
20662
|
option.setAttribute('aria-posinset', index + 1);
|
|
20663
20663
|
});
|
|
20664
20664
|
|
|
20665
|
-
|
|
20666
|
-
|
|
20667
|
-
// consumer swap patterns (e.g. Svelte `{#key}` re-mount) where
|
|
20668
|
-
// `this.value` is authoritative but `this.input.value` may be empty or
|
|
20669
|
-
// carry stale typed text from another field. Do NOT enable this in the
|
|
20670
|
-
// event-driven path — user clears would be undone by re-syncing to the
|
|
20671
|
-
// previous combobox.value.
|
|
20672
|
-
const valueMatches = preferComboboxValue &&
|
|
20673
|
-
this.value &&
|
|
20674
|
-
this.menu.options &&
|
|
20675
|
-
this.menu.options.some((opt) => opt.value === this.value);
|
|
20676
|
-
const matchValue = valueMatches ? this.value : this.input.value;
|
|
20677
|
-
if (matchValue && this.menu.options && this.menu.options.some((opt) => opt.value === matchValue)) {
|
|
20678
|
-
this.setMenuValue(matchValue);
|
|
20665
|
+
if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
|
|
20666
|
+
this.setMenuValue(this.input.value);
|
|
20679
20667
|
this.syncValuesAndStates();
|
|
20680
20668
|
}
|
|
20681
20669
|
|
|
@@ -21111,21 +21099,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21111
21099
|
this.optionActive = evt.detail;
|
|
21112
21100
|
|
|
21113
21101
|
if (this.input) {
|
|
21114
|
-
|
|
21115
|
-
// the template binds `.a11yActivedescendant` on the trigger input,
|
|
21116
|
-
// which propagates to auro-input.updated() → setAttribute(
|
|
21117
|
-
// 'aria-activedescendant', id) on the internal <input>. That
|
|
21118
|
-
// setAttribute call clears the reflected ariaActiveDescendantElement
|
|
21119
|
-
// property, so setting the ref first (synchronously here) gets
|
|
21120
|
-
// clobbered. Awaiting updateComplete lets the attribute write finish
|
|
21121
|
-
// first; the element reference then sticks and screen readers can
|
|
21122
|
-
// cross the shadow-DOM boundary to the auro-menuoption in light DOM.
|
|
21123
|
-
const targetOption = this.optionActive;
|
|
21124
|
-
this.updateComplete.then(() => {
|
|
21125
|
-
if (this.input && this.optionActive === targetOption) {
|
|
21126
|
-
this.input.setActiveDescendant(targetOption);
|
|
21127
|
-
}
|
|
21128
|
-
});
|
|
21102
|
+
this.input.setActiveDescendant(this.optionActive);
|
|
21129
21103
|
}
|
|
21130
21104
|
|
|
21131
21105
|
// In fullscreen mode the menu sits inside a nested <dialog> shadow root,
|
|
@@ -21262,18 +21236,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21262
21236
|
}
|
|
21263
21237
|
}
|
|
21264
21238
|
|
|
21265
|
-
// SPA preselect guard: on init render, auro-input's notifyValueChanged
|
|
21266
|
-
// echoes an empty value through as an isProgrammatic input event before
|
|
21267
|
-
// the framework-set combobox.value has propagated down to the input.
|
|
21268
|
-
// Without this bail, the `this.value = this.input.value` below clobbers
|
|
21269
|
-
// the framework value with '' and clear() wipes optionSelected. Scoped
|
|
21270
|
-
// to the exact shape of that echo (isProgrammatic + non-empty combobox
|
|
21271
|
-
// value + empty input.value) so it doesn't affect the swap/typed paths
|
|
21272
|
-
// where value/input already track each other through the sync helpers.
|
|
21273
|
-
if (event && event.isProgrammatic && this.value && !this.input.value) {
|
|
21274
|
-
return;
|
|
21275
|
-
}
|
|
21276
|
-
|
|
21277
21239
|
this.value = this.input.value;
|
|
21278
21240
|
|
|
21279
21241
|
// Ignore re-entrant input events caused by programmatic value sets.
|
|
@@ -21706,11 +21668,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21706
21668
|
}
|
|
21707
21669
|
});
|
|
21708
21670
|
|
|
21709
|
-
|
|
21710
|
-
// framework-set `this.value` wins over any stale `input.value` when
|
|
21711
|
-
// matching against the newly-available options. Fixes the display
|
|
21712
|
-
// for SPA preselect and Svelte `{#key}` re-mount swap patterns.
|
|
21713
|
-
this.handleMenuOptions({ preferComboboxValue: true });
|
|
21671
|
+
this.handleMenuOptions();
|
|
21714
21672
|
|
|
21715
21673
|
break;
|
|
21716
21674
|
|
|
@@ -4812,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4812
4812
|
}
|
|
4813
4813
|
};
|
|
4814
4814
|
|
|
4815
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607021905';
|
|
4816
4816
|
|
|
4817
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4818
4818
|
static get properties() {
|
|
@@ -17694,17 +17694,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
17694
17694
|
* @returns {void}
|
|
17695
17695
|
*/
|
|
17696
17696
|
notifyValueChanged() {
|
|
17697
|
-
|
|
17698
|
-
|
|
17699
|
-
|
|
17700
|
-
// it from genuine user typing and skip clobbering their own
|
|
17701
|
-
// programmatic state during init-time renders.
|
|
17702
|
-
const inputEvent = new Event('input', {
|
|
17697
|
+
let inputEvent = null;
|
|
17698
|
+
|
|
17699
|
+
inputEvent = new Event('input', {
|
|
17703
17700
|
bubbles: true,
|
|
17704
17701
|
composed: true,
|
|
17705
17702
|
});
|
|
17706
|
-
inputEvent.isProgrammatic = true;
|
|
17707
17703
|
|
|
17704
|
+
// Dispatched event to alert outside shadow DOM context of event firing.
|
|
17708
17705
|
this.dispatchEvent(inputEvent);
|
|
17709
17706
|
}
|
|
17710
17707
|
|
|
@@ -18417,7 +18414,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18417
18414
|
}
|
|
18418
18415
|
};
|
|
18419
18416
|
|
|
18420
|
-
var formkitVersion$1 = '
|
|
18417
|
+
var formkitVersion$1 = '202607021905';
|
|
18421
18418
|
|
|
18422
18419
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18423
18420
|
// See LICENSE in the project root for license information.
|
|
@@ -18703,15 +18700,20 @@ class AuroInput extends BaseInput {
|
|
|
18703
18700
|
* @returns {void}
|
|
18704
18701
|
*/
|
|
18705
18702
|
checkDisplayValueSlotChange() {
|
|
18706
|
-
|
|
18707
|
-
|
|
18708
|
-
//
|
|
18709
|
-
|
|
18710
|
-
|
|
18711
|
-
|
|
18712
|
-
|
|
18703
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
18704
|
+
|
|
18705
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
18706
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
18707
|
+
nodes = nodes[0].assignedNodes();
|
|
18708
|
+
}
|
|
18709
|
+
|
|
18710
|
+
let hasContent = false;
|
|
18711
|
+
|
|
18712
|
+
if (nodes.length > 0) {
|
|
18713
|
+
hasContent = true;
|
|
18714
|
+
}
|
|
18713
18715
|
|
|
18714
|
-
this.hasDisplayValueContent =
|
|
18716
|
+
this.hasDisplayValueContent = hasContent;
|
|
18715
18717
|
}
|
|
18716
18718
|
|
|
18717
18719
|
firstUpdated() {
|
|
@@ -19538,7 +19540,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19538
19540
|
}
|
|
19539
19541
|
}
|
|
19540
19542
|
|
|
19541
|
-
var formkitVersion = '
|
|
19543
|
+
var formkitVersion = '202607021905';
|
|
19542
19544
|
|
|
19543
19545
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19544
19546
|
|
|
@@ -20637,11 +20639,9 @@ class AuroCombobox extends AuroElement {
|
|
|
20637
20639
|
/**
|
|
20638
20640
|
* Processes hidden state of all menu options and determines if there are any available options not hidden.
|
|
20639
20641
|
* @private
|
|
20640
|
-
* @param {object} [root0={}] - Optional flag bag.
|
|
20641
|
-
* @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
|
|
20642
20642
|
* @returns {void}
|
|
20643
20643
|
*/
|
|
20644
|
-
handleMenuOptions(
|
|
20644
|
+
handleMenuOptions() {
|
|
20645
20645
|
this.generateOptionsArray();
|
|
20646
20646
|
this.availableOptions = [];
|
|
20647
20647
|
// Single source of truth for the menu's filter/highlight token per call.
|
|
@@ -20662,20 +20662,8 @@ class AuroCombobox extends AuroElement {
|
|
|
20662
20662
|
option.setAttribute('aria-posinset', index + 1);
|
|
20663
20663
|
});
|
|
20664
20664
|
|
|
20665
|
-
|
|
20666
|
-
|
|
20667
|
-
// consumer swap patterns (e.g. Svelte `{#key}` re-mount) where
|
|
20668
|
-
// `this.value` is authoritative but `this.input.value` may be empty or
|
|
20669
|
-
// carry stale typed text from another field. Do NOT enable this in the
|
|
20670
|
-
// event-driven path — user clears would be undone by re-syncing to the
|
|
20671
|
-
// previous combobox.value.
|
|
20672
|
-
const valueMatches = preferComboboxValue &&
|
|
20673
|
-
this.value &&
|
|
20674
|
-
this.menu.options &&
|
|
20675
|
-
this.menu.options.some((opt) => opt.value === this.value);
|
|
20676
|
-
const matchValue = valueMatches ? this.value : this.input.value;
|
|
20677
|
-
if (matchValue && this.menu.options && this.menu.options.some((opt) => opt.value === matchValue)) {
|
|
20678
|
-
this.setMenuValue(matchValue);
|
|
20665
|
+
if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
|
|
20666
|
+
this.setMenuValue(this.input.value);
|
|
20679
20667
|
this.syncValuesAndStates();
|
|
20680
20668
|
}
|
|
20681
20669
|
|
|
@@ -21111,21 +21099,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21111
21099
|
this.optionActive = evt.detail;
|
|
21112
21100
|
|
|
21113
21101
|
if (this.input) {
|
|
21114
|
-
|
|
21115
|
-
// the template binds `.a11yActivedescendant` on the trigger input,
|
|
21116
|
-
// which propagates to auro-input.updated() → setAttribute(
|
|
21117
|
-
// 'aria-activedescendant', id) on the internal <input>. That
|
|
21118
|
-
// setAttribute call clears the reflected ariaActiveDescendantElement
|
|
21119
|
-
// property, so setting the ref first (synchronously here) gets
|
|
21120
|
-
// clobbered. Awaiting updateComplete lets the attribute write finish
|
|
21121
|
-
// first; the element reference then sticks and screen readers can
|
|
21122
|
-
// cross the shadow-DOM boundary to the auro-menuoption in light DOM.
|
|
21123
|
-
const targetOption = this.optionActive;
|
|
21124
|
-
this.updateComplete.then(() => {
|
|
21125
|
-
if (this.input && this.optionActive === targetOption) {
|
|
21126
|
-
this.input.setActiveDescendant(targetOption);
|
|
21127
|
-
}
|
|
21128
|
-
});
|
|
21102
|
+
this.input.setActiveDescendant(this.optionActive);
|
|
21129
21103
|
}
|
|
21130
21104
|
|
|
21131
21105
|
// In fullscreen mode the menu sits inside a nested <dialog> shadow root,
|
|
@@ -21262,18 +21236,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21262
21236
|
}
|
|
21263
21237
|
}
|
|
21264
21238
|
|
|
21265
|
-
// SPA preselect guard: on init render, auro-input's notifyValueChanged
|
|
21266
|
-
// echoes an empty value through as an isProgrammatic input event before
|
|
21267
|
-
// the framework-set combobox.value has propagated down to the input.
|
|
21268
|
-
// Without this bail, the `this.value = this.input.value` below clobbers
|
|
21269
|
-
// the framework value with '' and clear() wipes optionSelected. Scoped
|
|
21270
|
-
// to the exact shape of that echo (isProgrammatic + non-empty combobox
|
|
21271
|
-
// value + empty input.value) so it doesn't affect the swap/typed paths
|
|
21272
|
-
// where value/input already track each other through the sync helpers.
|
|
21273
|
-
if (event && event.isProgrammatic && this.value && !this.input.value) {
|
|
21274
|
-
return;
|
|
21275
|
-
}
|
|
21276
|
-
|
|
21277
21239
|
this.value = this.input.value;
|
|
21278
21240
|
|
|
21279
21241
|
// Ignore re-entrant input events caused by programmatic value sets.
|
|
@@ -21706,11 +21668,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21706
21668
|
}
|
|
21707
21669
|
});
|
|
21708
21670
|
|
|
21709
|
-
|
|
21710
|
-
// framework-set `this.value` wins over any stale `input.value` when
|
|
21711
|
-
// matching against the newly-available options. Fixes the display
|
|
21712
|
-
// for SPA preselect and Svelte `{#key}` re-mount swap patterns.
|
|
21713
|
-
this.handleMenuOptions({ preferComboboxValue: true });
|
|
21671
|
+
this.handleMenuOptions();
|
|
21714
21672
|
|
|
21715
21673
|
break;
|
|
21716
21674
|
|
|
@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
};
|
|
1116
1116
|
|
|
1117
|
-
var formkitVersion$1 = '
|
|
1117
|
+
var formkitVersion$1 = '202607021905';
|
|
1118
1118
|
|
|
1119
1119
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1120
1120
|
// See LICENSE in the project root for license information.
|
|
@@ -5460,7 +5460,7 @@ class AuroHelpText extends i$2 {
|
|
|
5460
5460
|
}
|
|
5461
5461
|
}
|
|
5462
5462
|
|
|
5463
|
-
var formkitVersion = '
|
|
5463
|
+
var formkitVersion = '202607021905';
|
|
5464
5464
|
|
|
5465
5465
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5466
5466
|
static get properties() {
|
|
@@ -1114,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
};
|
|
1116
1116
|
|
|
1117
|
-
var formkitVersion$1 = '
|
|
1117
|
+
var formkitVersion$1 = '202607021905';
|
|
1118
1118
|
|
|
1119
1119
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1120
1120
|
// See LICENSE in the project root for license information.
|
|
@@ -5460,7 +5460,7 @@ class AuroHelpText extends i$2 {
|
|
|
5460
5460
|
}
|
|
5461
5461
|
}
|
|
5462
5462
|
|
|
5463
|
-
var formkitVersion = '
|
|
5463
|
+
var formkitVersion = '202607021905';
|
|
5464
5464
|
|
|
5465
5465
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5466
5466
|
static get properties() {
|
|
@@ -1064,7 +1064,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
};
|
|
1066
1066
|
|
|
1067
|
-
var formkitVersion$1 = '
|
|
1067
|
+
var formkitVersion$1 = '202607021905';
|
|
1068
1068
|
|
|
1069
1069
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1070
1070
|
// See LICENSE in the project root for license information.
|
|
@@ -5392,7 +5392,7 @@ class AuroHelpText extends LitElement {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
}
|
|
5394
5394
|
|
|
5395
|
-
var formkitVersion = '
|
|
5395
|
+
var formkitVersion = '202607021905';
|
|
5396
5396
|
|
|
5397
5397
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5398
5398
|
static get properties() {
|
|
@@ -1064,7 +1064,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
};
|
|
1066
1066
|
|
|
1067
|
-
var formkitVersion$1 = '
|
|
1067
|
+
var formkitVersion$1 = '202607021905';
|
|
1068
1068
|
|
|
1069
1069
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1070
1070
|
// See LICENSE in the project root for license information.
|
|
@@ -5392,7 +5392,7 @@ class AuroHelpText extends LitElement {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
}
|
|
5394
5394
|
|
|
5395
|
-
var formkitVersion = '
|
|
5395
|
+
var formkitVersion = '202607021905';
|
|
5396
5396
|
|
|
5397
5397
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5398
5398
|
static get properties() {
|
|
@@ -32,11 +32,11 @@ The calendar uses the WAI-ARIA grid pattern for screen reader navigation:
|
|
|
32
32
|
| Attribute | Applied to | Description |
|
|
33
33
|
|---|---|---|
|
|
34
34
|
| `role="grid"` | Calendar table | Identifies the calendar as a grid. The month heading is rendered as visible text adjacent to the grid but is excluded from the accessibility tree (announcements are handled via the live region described below). |
|
|
35
|
-
| `role="rowgroup"` | Body group | Groups the week rows.
|
|
35
|
+
| `role="rowgroup"` | Body group | Groups the week rows. |
|
|
36
36
|
| `role="row"` | Week row | Groups each week of date cells. |
|
|
37
|
-
| Day-of-week header |
|
|
37
|
+
| `role="columnheader"` | Day-of-week header | Each weekday cell in the header row exposes the abbreviated day name as visible text and the full localized day name via `aria-label` (e.g. `aria-label="Sunday"`). |
|
|
38
38
|
| `role="gridcell"` | In-range date cell, active-descendant proxy | Each selectable date cell. Includes `aria-selected`, `aria-current="date"` (for today), and a visually-hidden text label. A proxy `<span>` inside the calendar grid wrapper mirrors the active cell's ARIA attributes for `aria-activedescendant`. |
|
|
39
|
-
|
|
|
39
|
+
| Out-of-range date cell | Cells outside the valid min/max range | The button uses the native `disabled` attribute (spec-compliant way to express "not actionable" on a `<button>`) and is filtered out of keyboard navigation. The host cell drops its `role` and `aria-label` so assistive tech does not browse into it — no `aria-hidden` or `role="presentation"` is applied. |
|
|
40
40
|
| `aria-disabled="true"` | Blackout date cell | Cells matching the `blackout` dates list. Unlike out-of-range cells, blackout cells **remain focusable** via arrow-key navigation so screen reader users can discover them. The cell's label includes ", unavailable" to communicate that the date cannot be selected. |
|
|
41
41
|
| `aria-selected` | Date cell button | `"true"` for the selected date(s), `"false"` for all other in-range cells. |
|
|
42
42
|
| Accessible name | Date cell button | Provided via visually-hidden text content (not an `aria-label` attribute). Localized label built from `Intl.DateTimeFormat` (weekday, month, day, year), plus any date slot content (e.g. prices), the range position label (e.g., "range start"), and availability status (", unavailable" for blackout dates). |
|
|
@@ -66,6 +66,15 @@ When the calendar bib opens, focus moves to the calendar grid wrapper (`#calenda
|
|
|
66
66
|
- **Validation errors** — When a validation error occurs, the error message is rendered with `role="alert"` and `aria-live="assertive"`, causing it to be announced immediately without requiring focus.
|
|
67
67
|
- **Help text** — The help text content is associated with the input so that screen readers announce it as part of the element description when focused.
|
|
68
68
|
|
|
69
|
+
<auro-header level="3" id="ariaLiveDeviation">Documented Deviation: `aria-live="assertive"` for Arrow-Key Navigation</auro-header>
|
|
70
|
+
WCAG 2.1 SC 4.1.3 (Status Messages) generally recommends `aria-live="polite"` for non-critical status updates so screen readers don't interrupt the user. The calendar's navigation live region intentionally uses `aria-live="assertive"` instead. This is a knowing deviation, made for the following reason:
|
|
71
|
+
|
|
72
|
+
- **VoiceOver behavior** — VoiceOver treats `polite` announcements as "wait until idle," and during active arrow-key traversal the screen reader is never idle. Polite announcements are silently dropped, leaving keyboard users with no feedback about which cell is now active. `assertive` is the only reliable way to communicate the newly focused date on macOS/iOS VoiceOver during navigation.
|
|
73
|
+
- **Interruption mitigation** — A 150 ms debounce is applied in [`announceFocusDebounced`](../src/auro-calendar.js) so only the final cell after a burst of arrow keys is announced. Rapid navigation produces one announcement per pause, not one per keystroke, which minimizes the interruption cost of `assertive`.
|
|
74
|
+
- **Scope** — The same live region is reused for date selection and month-change announcements, all of which are user-initiated and expected. It is never used for background/system-generated updates.
|
|
75
|
+
|
|
76
|
+
Consumers auditing against APG or WCAG 4.1.3 should treat this as an intentional, documented trade-off between spec-preferred politeness and reliable VoiceOver support.
|
|
77
|
+
|
|
69
78
|
<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
|
|
70
79
|
- The `fromLabel` slot content is used as the accessible name for the first date input. It is also forwarded to the dropdown bib as the dialog's accessible name (`aria-labelledby`).
|
|
71
80
|
- When `range` is set, the `toLabel` slot content provides the accessible name for the second date input.
|
|
@@ -11,7 +11,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
11
11
|
|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
|
|
12
12
|
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
13
13
|
| `autoPlacement` | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
14
|
-
| `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
|
|
14
|
+
| `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).<br /><br />**Immutable update required.** The datepicker treats this array as<br />immutable and memoizes a lookup Set keyed on the array's reference<br />identity — matching Lit's own reactivity semantics for array<br />properties. In-place mutations (`blackoutDates.push(...)`,<br />`blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not<br />invalidate the cache and the new entries will be silently ignored.<br />To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`. |
|
|
15
15
|
| `blackoutLabel` | `blackoutLabel` | | `string` | "'unavailable'" | Label announced for blackout (disabled but in-range) date cells. |
|
|
16
16
|
| `calendarEndDate` | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
17
17
|
| `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
|