@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.4 → 0.0.0-pr1477.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/bibtemplate/dist/auro-bibtemplate.d.ts +0 -7
- package/components/bibtemplate/dist/index.js +1 -9
- package/components/bibtemplate/dist/registered.js +1 -9
- 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 +18 -234
- package/components/combobox/demo/getting-started.min.js +18 -234
- package/components/combobox/demo/index.min.js +18 -234
- package/components/combobox/demo/keyboard-behavior.md +68 -8
- package/components/combobox/dist/index.js +18 -234
- package/components/combobox/dist/registered.js +18 -234
- package/components/counter/demo/customize.min.js +15 -231
- package/components/counter/demo/index.min.js +15 -231
- package/components/counter/demo/keyboard-behavior.md +0 -1
- package/components/counter/dist/index.js +433 -45
- package/components/counter/dist/registered.js +2 -10
- package/components/datepicker/demo/accessibility.md +3 -51
- package/components/datepicker/demo/api.md +0 -9
- package/components/datepicker/demo/customize.html +0 -2
- package/components/datepicker/demo/customize.md +8 -72
- package/components/datepicker/demo/design.md +1 -3
- package/components/datepicker/demo/index.js +1 -5
- package/components/datepicker/demo/index.md +1 -81
- package/components/datepicker/demo/index.min.js +101 -1350
- package/components/datepicker/demo/keyboard-behavior.md +2 -201
- package/components/datepicker/demo/voiceover.md +12 -19
- package/components/datepicker/dist/index.js +111 -1284
- package/components/datepicker/dist/registered.js +111 -1284
- package/components/datepicker/dist/src/auro-calendar-cell.d.ts +1 -64
- package/components/datepicker/dist/src/auro-calendar-month.d.ts +0 -28
- package/components/datepicker/dist/src/auro-calendar.d.ts +0 -84
- package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -80
- package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +3 -5
- package/components/dropdown/demo/accessibility.md +0 -11
- package/components/dropdown/demo/api.md +0 -1
- package/components/dropdown/demo/customize.md +0 -3
- package/components/dropdown/demo/customize.min.js +13 -221
- package/components/dropdown/demo/getting-started.min.js +13 -221
- package/components/dropdown/demo/index.min.js +13 -221
- package/components/dropdown/demo/keyboard-behavior.md +0 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -31
- package/components/dropdown/dist/index.js +13 -221
- package/components/dropdown/dist/registered.js +13 -221
- package/components/form/demo/customize.min.js +987 -2806
- package/components/form/demo/getting-started.min.js +987 -2806
- package/components/form/demo/index.min.js +987 -2806
- package/components/form/demo/registerDemoDeps.min.js +982 -2801
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/getting-started.js +1 -1
- package/components/radio/demo/getting-started.md +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 +33 -247
- package/components/select/demo/getting-started.min.js +33 -247
- package/components/select/demo/index.min.js +33 -247
- package/components/select/demo/keyboard-behavior.md +54 -9
- package/components/select/dist/index.js +33 -247
- package/components/select/dist/registered.js +33 -247
- package/custom-elements.json +1491 -2163
- package/package.json +2 -2
- package/components/datepicker/demo/customize.js +0 -19
- package/components/datepicker/demo/customize.min.js +0 -25810
- package/components/radio/demo/customize.min.js +0 -2186
- package/components/radio/demo/demo-support.min.js +0 -55807
- package/components/radio/demo/getting-started.min.js +0 -2205
|
@@ -46,13 +46,6 @@ export class AuroCalendarCell extends LitElement {
|
|
|
46
46
|
renderForDateSlot: {
|
|
47
47
|
type: BooleanConstructor;
|
|
48
48
|
};
|
|
49
|
-
active: {
|
|
50
|
-
type: BooleanConstructor;
|
|
51
|
-
reflect: boolean;
|
|
52
|
-
};
|
|
53
|
-
hasPopoverContent: {
|
|
54
|
-
type: BooleanConstructor;
|
|
55
|
-
};
|
|
56
49
|
};
|
|
57
50
|
static get styles(): import("lit").CSSResult[];
|
|
58
51
|
day: any;
|
|
@@ -70,8 +63,6 @@ export class AuroCalendarCell extends LitElement {
|
|
|
70
63
|
_locale: any;
|
|
71
64
|
dateStr: string | null;
|
|
72
65
|
renderForDateSlot: boolean;
|
|
73
|
-
active: boolean;
|
|
74
|
-
hasPopoverContent: boolean;
|
|
75
66
|
runtimeUtils: any;
|
|
76
67
|
popoverTag: any;
|
|
77
68
|
set locale(value: any);
|
|
@@ -99,27 +90,7 @@ export class AuroCalendarCell extends LitElement {
|
|
|
99
90
|
*/
|
|
100
91
|
private handleHover;
|
|
101
92
|
/**
|
|
102
|
-
* Checks if the current date is
|
|
103
|
-
* Out-of-range cells are not focusable and are hidden from screen readers.
|
|
104
|
-
* @private
|
|
105
|
-
* @param {Object} day - An object containing the dateFrom and day of month values.
|
|
106
|
-
* @param {Number} min - The minimum date value.
|
|
107
|
-
* @param {Number} max - The maximum date value.
|
|
108
|
-
* @returns {Boolean} - True if the date is out of range.
|
|
109
|
-
*/
|
|
110
|
-
private isOutOfRange;
|
|
111
|
-
/**
|
|
112
|
-
* Checks if the current date is a blackout date (in disabledDays but within range).
|
|
113
|
-
* Blackout cells are focusable but not selectable.
|
|
114
|
-
* @private
|
|
115
|
-
* @returns {Boolean} - True if the date is a blackout date.
|
|
116
|
-
*/
|
|
117
|
-
private isBlackout;
|
|
118
|
-
/**
|
|
119
|
-
* Checks if the current date is disabled based on min/max range or the
|
|
120
|
-
* legacy disabledDays timestamp list. Sets the `disabled` attribute on the
|
|
121
|
-
* host when the date falls outside the allowed range or appears in
|
|
122
|
-
* disabledDays. Note: blackout dates are handled separately by `isBlackout()`.
|
|
93
|
+
* Checks if the current date is a valid date depending on the min and max values.
|
|
123
94
|
* @private
|
|
124
95
|
* @param {Object} day - An object containing the dateFrom and day of month values.
|
|
125
96
|
* @param {Number} min - The minimum date value.
|
|
@@ -128,25 +99,6 @@ export class AuroCalendarCell extends LitElement {
|
|
|
128
99
|
* @returns {Boolean} - True if the date is disabled.
|
|
129
100
|
*/
|
|
130
101
|
private isEnabled;
|
|
131
|
-
/**
|
|
132
|
-
* Generates a unique cell ID in the format cell-YYYY-MM-DD.
|
|
133
|
-
* @private
|
|
134
|
-
* @returns {String} The unique cell ID.
|
|
135
|
-
*/
|
|
136
|
-
private getCellId;
|
|
137
|
-
/**
|
|
138
|
-
* Generates a localized aria-label for the cell button using Intl.DateTimeFormat.
|
|
139
|
-
* Includes range position and blackout status.
|
|
140
|
-
* @private
|
|
141
|
-
* @returns {String} The aria-label string.
|
|
142
|
-
*/
|
|
143
|
-
private getAriaLabel;
|
|
144
|
-
/**
|
|
145
|
-
* Determines the range position of this cell relative to the current selection.
|
|
146
|
-
* @private
|
|
147
|
-
* @returns {String|null} Range position label or null if not in range mode.
|
|
148
|
-
*/
|
|
149
|
-
private getRangePosition;
|
|
150
102
|
/**
|
|
151
103
|
* Checks if the current date is the depart date.
|
|
152
104
|
* @private
|
|
@@ -210,23 +162,8 @@ export class AuroCalendarCell extends LitElement {
|
|
|
210
162
|
private handleSlotContent;
|
|
211
163
|
firstUpdated(): void;
|
|
212
164
|
datepicker: any;
|
|
213
|
-
calendarMonth: any;
|
|
214
|
-
/**
|
|
215
|
-
* Configures the popover instance with the calendar month boundary.
|
|
216
|
-
* Called from firstUpdated and updated because the popover element is only
|
|
217
|
-
* rendered after hasPopoverContent becomes true (set by handleSlotContent).
|
|
218
|
-
* @private
|
|
219
|
-
* @returns {void}
|
|
220
|
-
*/
|
|
221
|
-
private configurePopover;
|
|
222
165
|
auroPopover: any;
|
|
223
166
|
updated(properties: any): void;
|
|
224
|
-
/**
|
|
225
|
-
* Programmatically focuses the cell's interactive button element.
|
|
226
|
-
* @returns {void}
|
|
227
|
-
*/
|
|
228
|
-
focusButton(): void;
|
|
229
|
-
renderCellButton(): import("lit-html").TemplateResult;
|
|
230
167
|
render(): import("lit-html").TemplateResult;
|
|
231
168
|
}
|
|
232
169
|
import { LitElement } from "lit";
|
|
@@ -16,33 +16,5 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
|
|
|
16
16
|
* @returns {String} The name of the month.
|
|
17
17
|
*/
|
|
18
18
|
private computeCurrentMonthName;
|
|
19
|
-
/**
|
|
20
|
-
* Returns the unique heading ID for this month, used by aria-labelledby.
|
|
21
|
-
* @private
|
|
22
|
-
* @returns {String} The heading ID.
|
|
23
|
-
*/
|
|
24
|
-
private getHeadingId;
|
|
25
|
-
dayFullNames: any[] | undefined;
|
|
26
|
-
/**
|
|
27
|
-
* Renders a day-of-week header with abbr attribute for the full day name.
|
|
28
|
-
* @private
|
|
29
|
-
* @param {String} dayOfWeek - The short day name.
|
|
30
|
-
* @param {Number} index - The index in the dayNamesOfTheWeek array.
|
|
31
|
-
* @returns {Object} The header HTML.
|
|
32
|
-
*/
|
|
33
|
-
private renderDayOfWeek;
|
|
34
|
-
/**
|
|
35
|
-
* Returns all focusable cell elements (enabled + blackout, not out-of-range) in this month.
|
|
36
|
-
* @returns {Array} Array of auro-formkit-calendar-cell elements.
|
|
37
|
-
*/
|
|
38
|
-
getFocusableCells(): any[];
|
|
39
|
-
/**
|
|
40
|
-
* Handles arrow key navigation within the month grid.
|
|
41
|
-
* Dispatches a cross-month navigation event when the boundary is reached.
|
|
42
|
-
* @private
|
|
43
|
-
* @param {KeyboardEvent} event - The keyboard event.
|
|
44
|
-
* @returns {void}
|
|
45
|
-
*/
|
|
46
|
-
private handleGridKeyDown;
|
|
47
19
|
}
|
|
48
20
|
import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';
|
|
@@ -123,12 +123,6 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
123
123
|
visible: boolean;
|
|
124
124
|
largeFullscreenHeadline: boolean;
|
|
125
125
|
isFullscreen: boolean;
|
|
126
|
-
/**
|
|
127
|
-
* The date of the currently active cell (Unix timestamp).
|
|
128
|
-
* Only one cell across the entire calendar has tabindex="0" at a time.
|
|
129
|
-
* @private
|
|
130
|
-
*/
|
|
131
|
-
private activeCellDate;
|
|
132
126
|
/**
|
|
133
127
|
* @private
|
|
134
128
|
*/
|
|
@@ -154,12 +148,6 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
154
148
|
*/
|
|
155
149
|
private buttonTag;
|
|
156
150
|
dropdown: any;
|
|
157
|
-
/**
|
|
158
|
-
* Announces the current month and year via the live region after navigation.
|
|
159
|
-
* @private
|
|
160
|
-
* @returns {void}
|
|
161
|
-
*/
|
|
162
|
-
private announceMonthChange;
|
|
163
151
|
/**
|
|
164
152
|
* Renders all of the auro-calendar-months HTML.
|
|
165
153
|
* @private
|
|
@@ -179,78 +167,6 @@ export class AuroCalendar extends RangeDatepicker {
|
|
|
179
167
|
* @returns {void}
|
|
180
168
|
*/
|
|
181
169
|
scrollMonthIntoView(date: string): void;
|
|
182
|
-
/**
|
|
183
|
-
* Gets all rendered month components.
|
|
184
|
-
* @private
|
|
185
|
-
* @returns {Array} Array of auro-formkit-calendar-month elements.
|
|
186
|
-
*/
|
|
187
|
-
private getMonthComponents;
|
|
188
|
-
/**
|
|
189
|
-
* Gets all focusable cells across all rendered months.
|
|
190
|
-
* @private
|
|
191
|
-
* @returns {Array} Array of auro-formkit-calendar-cell elements.
|
|
192
|
-
*/
|
|
193
|
-
private getAllFocusableCells;
|
|
194
|
-
/**
|
|
195
|
-
* Sets the active cell across all months. Only one cell has tabindex="0" at a time.
|
|
196
|
-
* @param {Number} date - Unix timestamp of the cell to activate.
|
|
197
|
-
* @returns {void}
|
|
198
|
-
*/
|
|
199
|
-
setActiveCell(date: number): void;
|
|
200
|
-
/**
|
|
201
|
-
* Focuses the currently active cell. If activeCellDate is set but no cell
|
|
202
|
-
* has the active attribute yet, sets it first. Waits for the cell's render
|
|
203
|
-
* to complete so the focused button is the final DOM element.
|
|
204
|
-
* @returns {void}
|
|
205
|
-
*/
|
|
206
|
-
focusActiveCell(): void;
|
|
207
|
-
/**
|
|
208
|
-
* Computes the initial active date from data properties alone — no DOM required.
|
|
209
|
-
* Priority:
|
|
210
|
-
* 1. Selected date (dateFrom) if within range
|
|
211
|
-
* 2. Today's date if not disabled (in-range and not blackout)
|
|
212
|
-
* 3. First future non-disabled date (scans day-by-day from today up to 1 year)
|
|
213
|
-
* 4. First previous non-disabled date (scans day-by-day from today up to 1 year)
|
|
214
|
-
* 5. undefined — no valid target
|
|
215
|
-
*
|
|
216
|
-
* @private
|
|
217
|
-
* @returns {Number|undefined} Unix timestamp (seconds) of the date to activate, or undefined.
|
|
218
|
-
*/
|
|
219
|
-
private computeActiveDate;
|
|
220
|
-
/**
|
|
221
|
-
* Handles cross-month boundary navigation events from month components.
|
|
222
|
-
* @private
|
|
223
|
-
* @param {CustomEvent} event - The boundary event with direction and source date info.
|
|
224
|
-
* @returns {void}
|
|
225
|
-
*/
|
|
226
|
-
private handleMonthBoundary;
|
|
227
|
-
/**
|
|
228
|
-
* Handles cell activation events from month components.
|
|
229
|
-
* @private
|
|
230
|
-
* @param {CustomEvent} event - The activation event with target date.
|
|
231
|
-
* @returns {void}
|
|
232
|
-
*/
|
|
233
|
-
private handleCellActivate;
|
|
234
|
-
/**
|
|
235
|
-
* Scrolls the calendar to ensure the month containing the active cell is visible.
|
|
236
|
-
* @private
|
|
237
|
-
* @returns {void}
|
|
238
|
-
*/
|
|
239
|
-
private scrollToActiveCell;
|
|
240
|
-
/**
|
|
241
|
-
* Announces a date selection via the live region.
|
|
242
|
-
* @private
|
|
243
|
-
* @param {String} dateStr - The localized date string to announce.
|
|
244
|
-
* @returns {void}
|
|
245
|
-
*/
|
|
246
|
-
private announceSelection;
|
|
247
|
-
/**
|
|
248
|
-
* Formats a Unix timestamp (seconds) as a localized date string for SR announcements.
|
|
249
|
-
* @private
|
|
250
|
-
* @param {String|Number} timestamp - Unix timestamp in seconds.
|
|
251
|
-
* @returns {String} Localized date string.
|
|
252
|
-
*/
|
|
253
|
-
private formatAnnouncementDate;
|
|
254
170
|
injectSlot(slotName: any, nodes: any): void;
|
|
255
171
|
render(): import("lit-html").TemplateResult;
|
|
256
172
|
}
|
|
@@ -248,69 +248,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
248
248
|
type: BooleanConstructor;
|
|
249
249
|
reflect: boolean;
|
|
250
250
|
};
|
|
251
|
-
/**
|
|
252
|
-
* Label announced for the range start date cell.
|
|
253
|
-
*/
|
|
254
|
-
rangeLabelStart: {
|
|
255
|
-
type: StringConstructor;
|
|
256
|
-
reflect: boolean;
|
|
257
|
-
};
|
|
258
|
-
/**
|
|
259
|
-
* Label announced for the range end date cell.
|
|
260
|
-
*/
|
|
261
|
-
rangeLabelEnd: {
|
|
262
|
-
type: StringConstructor;
|
|
263
|
-
reflect: boolean;
|
|
264
|
-
};
|
|
265
|
-
/**
|
|
266
|
-
* Label announced for cells before the range start.
|
|
267
|
-
*/
|
|
268
|
-
rangeLabelBeforeRange: {
|
|
269
|
-
type: StringConstructor;
|
|
270
|
-
reflect: boolean;
|
|
271
|
-
};
|
|
272
|
-
/**
|
|
273
|
-
* Label announced for cells within the selected range.
|
|
274
|
-
*/
|
|
275
|
-
rangeLabelInRange: {
|
|
276
|
-
type: StringConstructor;
|
|
277
|
-
reflect: boolean;
|
|
278
|
-
};
|
|
279
|
-
/**
|
|
280
|
-
* Label announced for cells after the range (or after start when no end is selected).
|
|
281
|
-
*/
|
|
282
|
-
rangeLabelAfterRange: {
|
|
283
|
-
type: StringConstructor;
|
|
284
|
-
reflect: boolean;
|
|
285
|
-
};
|
|
286
|
-
/**
|
|
287
|
-
* Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
|
|
288
|
-
*/
|
|
289
|
-
blackoutDates: {
|
|
290
|
-
type: ArrayConstructor;
|
|
291
|
-
reflect: boolean;
|
|
292
|
-
};
|
|
293
|
-
/**
|
|
294
|
-
* Label announced for blackout (disabled but in-range) date cells.
|
|
295
|
-
*/
|
|
296
|
-
blackoutLabel: {
|
|
297
|
-
type: StringConstructor;
|
|
298
|
-
reflect: boolean;
|
|
299
|
-
};
|
|
300
|
-
/**
|
|
301
|
-
* Accessible label for the previous month navigation button.
|
|
302
|
-
*/
|
|
303
|
-
navLabelPrevMonth: {
|
|
304
|
-
type: StringConstructor;
|
|
305
|
-
reflect: boolean;
|
|
306
|
-
};
|
|
307
|
-
/**
|
|
308
|
-
* Accessible label for the next month navigation button.
|
|
309
|
-
*/
|
|
310
|
-
navLabelNextMonth: {
|
|
311
|
-
type: StringConstructor;
|
|
312
|
-
reflect: boolean;
|
|
313
|
-
};
|
|
314
251
|
/**
|
|
315
252
|
* Dates that the user should have for reference as part of their decision making when selecting a date.
|
|
316
253
|
* This should be a JSON string array of dates in the format of `MM/DD/YYYY`.
|
|
@@ -418,15 +355,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
418
355
|
required: boolean;
|
|
419
356
|
onDark: boolean;
|
|
420
357
|
range: boolean;
|
|
421
|
-
rangeLabelStart: string;
|
|
422
|
-
rangeLabelEnd: string;
|
|
423
|
-
rangeLabelBeforeRange: string;
|
|
424
|
-
rangeLabelInRange: string;
|
|
425
|
-
rangeLabelAfterRange: string;
|
|
426
|
-
blackoutDates: any[];
|
|
427
|
-
blackoutLabel: string;
|
|
428
|
-
navLabelPrevMonth: string;
|
|
429
|
-
navLabelNextMonth: string;
|
|
430
358
|
stacked: boolean;
|
|
431
359
|
noValidate: boolean;
|
|
432
360
|
validity: any;
|
|
@@ -604,13 +532,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
604
532
|
* @returns {void}
|
|
605
533
|
*/
|
|
606
534
|
private notifyMonthChanged;
|
|
607
|
-
/**
|
|
608
|
-
* Attempts to focus the active calendar cell using a rAF retry loop.
|
|
609
|
-
* Shared by both fullscreen and desktop open paths.
|
|
610
|
-
* @private
|
|
611
|
-
* @returns {void}
|
|
612
|
-
*/
|
|
613
|
-
private focusActiveCellWhenReady;
|
|
614
535
|
/**
|
|
615
536
|
* Binds all behavior needed to the dropdown after rendering.
|
|
616
537
|
* @private
|
|
@@ -703,7 +624,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
703
624
|
formattedFocusDate: boolean | undefined;
|
|
704
625
|
formattedEndDate: boolean | undefined;
|
|
705
626
|
formattedValue: boolean | undefined;
|
|
706
|
-
wasCellClick: boolean | undefined;
|
|
707
627
|
formattedValueEnd: boolean | undefined;
|
|
708
628
|
formattedMinDate: boolean | undefined;
|
|
709
629
|
formattedMaxDate: boolean | undefined;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
Escape(component: any, evt: any
|
|
3
|
-
|
|
4
|
-
' '(component: any, evt: any, ctx: any): void;
|
|
5
|
-
};
|
|
1
|
+
export namespace datepickerKeyboardStrategy {
|
|
2
|
+
function Escape(component: any, evt: any): void;
|
|
3
|
+
}
|
|
@@ -28,23 +28,12 @@
|
|
|
28
28
|
</ol>
|
|
29
29
|
</section>
|
|
30
30
|
<section>
|
|
31
|
-
<auro-header level="2" id="desktopModal">Desktop Modal</auro-header>
|
|
32
|
-
<p>When the <code>desktopModal</code> attribute is set, the dropdown behaves as a modal dialog on desktop viewports:</p>
|
|
33
|
-
<ul>
|
|
34
|
-
<li>All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown.</li>
|
|
35
|
-
<li>Focus is trapped within the bib content using a Tab-key handler.</li>
|
|
36
|
-
<li>The <code>inert</code> state and focus trap are automatically cleaned up when the bib is closed or the component is disconnected.</li>
|
|
37
|
-
</ul>
|
|
38
|
-
<p>In fullscreen mode, the native <code><dialog></code> <code>showModal()</code> API provides equivalent behavior, so <code>desktopModal</code> only applies to desktop-sized viewports.</p>
|
|
39
|
-
</section>
|
|
40
|
-
<section>
|
|
41
31
|
<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
|
|
42
32
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/tabindex.md) -->
|
|
43
33
|
<!-- The below content is automatically added from ./../docs/partials/tabindex.md -->
|
|
44
34
|
<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior</auro-hyperlink>, i.e., these keys step through the browser tabindex sequence.</p>
|
|
45
35
|
<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>
|
|
46
36
|
<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
|
|
47
|
-
<p>When the <code>desktopModal</code> attribute is set, focus is also trapped within the bib on desktop viewports. All sibling elements on the page are marked <code>inert</code>, preventing interaction with content outside the dropdown until it is closed.</p>
|
|
48
37
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
49
38
|
</section>
|
|
50
39
|
<section>
|
|
@@ -13,7 +13,6 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
|
|
|
13
13
|
| `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
14
14
|
| `autoPlacement` | `autoPlacement` | `boolean` | | If declared, bib's position will be automatically calculated where to appear. |
|
|
15
15
|
| `chevron` | `chevron` | `boolean` | | If declared, the dropdown displays a chevron on the right. |
|
|
16
|
-
| `desktopModal` | `desktopModal` | `boolean` | | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
|
|
17
16
|
| `disableEventShow` | `disableEventShow` | `boolean` | | If declared, the dropdown will only show by calling the API .show() public method. |
|
|
18
17
|
| `disableKeyboardHandling` | `disableKeyboardHandling` | `boolean` | | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
|
|
19
18
|
| `disabled` | `disabled` | `boolean` | | If declared, the dropdown is not interactive. |
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
<auro-anchorlink fluid href="#matchWidth" class="level2 body-xs">Match Width</auro-anchorlink>
|
|
14
14
|
<auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
|
|
15
15
|
<auro-anchorlink fluid href="#chevron" class="level2 body-xs">Chevron</auro-anchorlink>
|
|
16
|
-
<auro-anchorlink fluid href="#desktopModal" class="level2 body-xs">Desktop Modal</auro-anchorlink>
|
|
17
16
|
<auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
|
|
18
17
|
<auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
|
|
19
18
|
<auro-anchorlink fluid href="#noToggle" class="level2 body-xs">No Toggle</auro-anchorlink>
|
|
@@ -570,8 +569,6 @@
|
|
|
570
569
|
</auro-dropdown></code></pre>
|
|
571
570
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
572
571
|
</auro-accordion>
|
|
573
|
-
<auro-header level="3" id="desktopModal">Desktop Modal</auro-header>
|
|
574
|
-
<p>Use the <code>desktopModal</code> attribute to make the dropdown behave as a modal dialog on desktop viewports. When set, all sibling elements on the page are marked <code>inert</code> and focus is trapped within the bib content. In fullscreen mode, the native <code><dialog></code> <code>showModal()</code> API provides equivalent behavior automatically.</p>
|
|
575
572
|
<auro-header level="3" id="disabled">Disabled</auro-header>
|
|
576
573
|
<p>Use the <code>disabled</code> attribute to disable interaction with the dropdown.</p>
|
|
577
574
|
<div class="exampleWrapper">
|