From 48cff1e455a44e9a2aeec186f715570554e1a79d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sun, 20 Jul 2025 23:18:19 -0700 Subject: [PATCH 01/14] feat: add focus options support --- .../accordion-item/accordion-item.tsx | 10 +++-- .../src/components/action-bar/action-bar.tsx | 10 +++-- .../components/action-group/action-group.tsx | 10 +++-- .../components/action-menu/action-menu.tsx | 10 +++-- .../src/components/action-pad/action-pad.tsx | 10 +++-- .../src/components/action/action.tsx | 10 +++-- .../src/components/alert/alert.tsx | 8 ++-- .../components/autocomplete/autocomplete.tsx | 5 ++- .../components/block-group/block-group.tsx | 5 ++- .../block-section/block-section.tsx | 10 +++-- .../src/components/block/block.tsx | 10 +++-- .../src/components/button/button.tsx | 10 +++-- .../src/components/card-group/card-group.tsx | 10 +++-- .../src/components/card/card.tsx | 10 +++-- .../src/components/carousel/carousel.tsx | 10 +++-- .../src/components/checkbox/checkbox.tsx | 10 +++-- .../src/components/chip-group/chip-group.tsx | 10 +++-- .../src/components/chip/chip.tsx | 10 +++-- .../color-picker-hex-input.tsx | 10 +++-- .../components/color-picker/color-picker.tsx | 10 +++-- .../src/components/combobox/combobox.tsx | 10 +++-- .../date-picker-day/date-picker-day.tsx | 10 +++-- .../components/date-picker/date-picker.tsx | 10 +++-- .../src/components/dialog/dialog.tsx | 5 ++- .../dropdown-item/dropdown-item.tsx | 10 +++-- .../src/components/dropdown/dropdown.tsx | 10 +++-- .../src/components/fab/fab.tsx | 10 +++-- .../src/components/filter/filter.tsx | 10 +++-- .../src/components/flow-item/flow-item.tsx | 5 ++- .../src/components/flow/flow.e2e.ts | 4 +- .../src/components/flow/flow.tsx | 5 ++- .../src/components/handle/handle.tsx | 10 +++-- .../inline-editable/inline-editable.tsx | 10 +++-- .../input-date-picker/input-date-picker.tsx | 10 +++-- .../components/input-number/input-number.tsx | 10 +++-- .../src/components/input-text/input-text.tsx | 10 +++-- .../input-time-picker/input-time-picker.tsx | 10 +++-- .../input-time-zone/input-time-zone.tsx | 10 +++-- .../src/components/input/input.tsx | 10 +++-- .../src/components/link/link.tsx | 10 +++-- .../src/components/list-item/list-item.tsx | 10 +++-- .../src/components/list/list.tsx | 5 ++- .../src/components/menu-item/menu-item.tsx | 10 +++-- .../src/components/menu/menu.tsx | 10 +++-- .../src/components/modal/modal.tsx | 10 +++-- .../navigation-logo/navigation-logo.tsx | 10 +++-- .../navigation-user/navigation-user.tsx | 10 +++-- .../src/components/navigation/navigation.tsx | 10 +++-- .../src/components/notice/notice.tsx | 10 +++-- .../src/components/pagination/pagination.tsx | 10 +++-- .../src/components/panel/panel.tsx | 10 +++-- .../src/components/popover/popover.tsx | 10 +++-- .../radio-button-group/radio-button-group.tsx | 10 +++-- .../components/radio-button/radio-button.tsx | 10 +++-- .../src/components/rating/rating.tsx | 10 +++-- .../segmented-control/segmented-control.tsx | 10 +++-- .../src/components/select/select.tsx | 10 +++-- .../src/components/sheet/sheet.tsx | 10 +++-- .../src/components/slider/slider.tsx | 10 +++-- .../components/sort-handle/sort-handle.tsx | 10 +++-- .../components/split-button/split-button.tsx | 10 +++-- .../components/stepper-item/stepper-item.tsx | 10 +++-- .../src/components/switch/switch.tsx | 10 +++-- .../src/components/table-cell/table-cell.tsx | 10 +++-- .../components/table-header/table-header.tsx | 10 +++-- .../src/components/text-area/text-area.tsx | 10 +++-- .../components/tile-select/tile-select.tsx | 10 +++-- .../src/components/tile/tile.tsx | 10 +++-- .../components/time-picker/time-picker.tsx | 10 +++-- .../controllers/useSetFocus.browser.spec.tsx | 40 +++++++++---------- .../src/controllers/useSetFocus.ts | 12 +++--- .../calcite-components/src/utils/component.ts | 2 +- .../src/utils/dom.browser.spec.ts | 8 ++-- packages/calcite-components/src/utils/dom.ts | 17 ++++---- 74 files changed, 492 insertions(+), 239 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 319e681b250..9ecb327c10a 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -112,12 +112,16 @@ export class AccordionItem extends LitElement { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.headerEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 671880310c3..8fad1073eaa 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -172,12 +172,16 @@ export class ActionBar extends LitElement { this.resize({ width: this.el.clientWidth, height: this.el.clientHeight }); } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 29c5c798abb..43303e3681b 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -98,12 +98,16 @@ export class ActionGroup extends LitElement { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 874bf53d4b9..d4430cc8007 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -180,12 +180,16 @@ export class ActionMenu extends LitElement { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.menuButtonEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 2b566942787..b64109b5a7f 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -100,12 +100,16 @@ export class ActionPad extends LitElement { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 6e57f13df20..f9cfdaadda1 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -134,12 +134,16 @@ export class Action extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.buttonEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 0209855f2ad..84f958e0c9b 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -168,13 +168,15 @@ export class Alert extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button, the first focusable item. * - * `@returns` {Promise} + * `@returns` {Promise} + * + * @param options */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx index 7b714c481da..9031c21cc34 100644 --- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx +++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx @@ -387,13 +387,14 @@ export class Autocomplete /** * Sets focus on the component's first focusable element. * + * @param options * @returns {Promise} */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.referenceEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx index 9eb86eb0be7..35d52bc31a6 100755 --- a/packages/calcite-components/src/components/block-group/block-group.tsx +++ b/packages/calcite-components/src/components/block-group/block-group.tsx @@ -113,13 +113,14 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort /** * Sets focus on the component's first focusable element. * + * @param options * @returns {Promise} */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index ddd123d10a5..b4266691a6a 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -96,12 +96,16 @@ export class BlockSection extends LitElement { //#region Public Methods - /** Sets focus on the component's first tabbable element. */ + /** + * Sets focus on the component's first tabbable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index b4312572210..1f30814d614 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -202,12 +202,16 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose //#region Public Methods - /** Sets focus on the component's first tabbable element. */ + /** + * Sets focus on the component's first tabbable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 5e1a2bba3d7..ef5e8f515fa 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -190,10 +190,14 @@ export class Button //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { - return this.focusSetter(() => this.childEl); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.childEl, options); } //#endregion diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx index c31ba705b27..5e279a56c05 100644 --- a/packages/calcite-components/src/components/card-group/card-group.tsx +++ b/packages/calcite-components/src/components/card-group/card-group.tsx @@ -67,12 +67,16 @@ export class CardGroup extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.items[0]; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index 1a221936347..ee146dfbc72 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -126,12 +126,16 @@ export class Card extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.containerEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index e30ace6d21d..fe4ab207eea 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -174,12 +174,16 @@ export class Carousel extends LitElement implements InteractiveComponent { this.handlePlay(true); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.container; - }); + }, options); } /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */ diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index 103f0258979..caf816f378e 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -143,12 +143,16 @@ export class Checkbox // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.toggleEl.value; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx index f3060a380b3..598545cdf35 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -82,12 +82,16 @@ export class ChipGroup extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.selectedItems[0] || this.items[0]; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 28746b6d246..b5d2cf1bbc9 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -135,16 +135,20 @@ export class Chip extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { if (this.interactive) { return this.containerEl.value; } else if (this.closable) { return this.closeButtonEl.value; } - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx index 463e95a8310..69586c6f940 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx @@ -101,12 +101,16 @@ export class ColorPickerHexInput extends LitElement { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.hexInputNode; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 72e9d9181d9..6de3da9c026 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -372,12 +372,16 @@ export class ColorPicker extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index ae60c990c26..be9ec787e29 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -507,14 +507,18 @@ export class Combobox ); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { this.activeChipIndex = -1; this.activeItemIndex = -1; return this.textInput.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx index f1945070311..e3655c36c24 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx @@ -104,12 +104,16 @@ export class DatePickerDay extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index 58f32bf76d2..71b3e37f8d2 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -155,12 +155,16 @@ export class DatePicker extends LitElement { this.rangeValueChangedByUser = false; } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 3fe9b0831de..ce49253c41e 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -265,13 +265,14 @@ export class Dialog extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button (the first focusable item). * + * @param options * @returns {Promise} - A promise that is resolved when the operation has completed. */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.panelEl.value ?? this.el; - }); + }, options); } /** diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx index bb14a733a0b..b206e2a9412 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx @@ -111,12 +111,16 @@ export class DropdownItem extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index 0ff53e03b2d..0ba2f9d1ee9 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -201,12 +201,16 @@ export class Dropdown ); } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.referenceEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index cbe93ddf889..a86c3a11e14 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -75,12 +75,16 @@ export class Fab extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.buttonEl.value; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index f5246b68422..f3a8dccab90 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -131,12 +131,16 @@ export class Filter extends LitElement implements InteractiveComponent { }); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.textInput.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 7f61f88e511..8326e28595d 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -166,13 +166,14 @@ export class FlowItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * + * @param options * @returns promise. */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.backButtonEl || this.containerEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts index 6e4fd4dbdd7..3471855e7e8 100755 --- a/packages/calcite-components/src/components/flow/flow.e2e.ts +++ b/packages/calcite-components/src/components/flow/flow.e2e.ts @@ -512,8 +512,8 @@ describe("calcite-flow", () => { // no op } - async setFocus(): Promise { - await this.flowItemEl.setFocus(); + async setFocus(options?: FocusOptions): Promise { + await this.flowItemEl.setFocus(options); } } diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx index 0b121523f32..dee4fcc8277 100755 --- a/packages/calcite-components/src/components/flow/flow.tsx +++ b/packages/calcite-components/src/components/flow/flow.tsx @@ -93,13 +93,14 @@ export class Flow extends LitElement { /** * Sets focus on the component. * + * @param options * @returns Promise */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.items[this.selectedIndex]; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index cb4e4daabd6..16ca5a6ab54 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -89,12 +89,16 @@ export class Handle extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.handleButton.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx index 575e2424be9..a8b630e14cf 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx @@ -101,12 +101,16 @@ export class InlineEditable extends LitElement implements InteractiveComponent, //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.inputElement; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index afa61ded883..72f35b0a0d7 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -370,12 +370,16 @@ export class InputDatePicker ); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 12bc303ea79..a84ed2a369e 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -360,12 +360,16 @@ export class InputNumber this.childNumberEl?.select(); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.childNumberEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 417a07aab86..8498743d2fa 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -293,12 +293,16 @@ export class InputText this.childEl?.select(); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.childEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index a515fbea659..52018d0f757 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -237,12 +237,16 @@ export class InputTimePicker this.popoverEl?.reposition(delayed); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index 8171128e671..a06fc511262 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -231,12 +231,16 @@ export class InputTimeZone //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.comboboxEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index e852c825ab4..653a0997417 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -417,12 +417,16 @@ export class Input } } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.type === "number" ? this.childNumberEl : this.childEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index e5824cb896b..f61e2ab11f0 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -80,12 +80,16 @@ export class Link extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.childEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 7d2db6b8c42..e6f96193fc0 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -257,9 +257,13 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { const { containerEl: { value: containerEl }, @@ -278,7 +282,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab } return { target: containerEl, includeContainer: true, strategy: "focusable" }; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 9499134c262..f4d51365acf 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -286,15 +286,16 @@ export class List extends LitElement implements InteractiveComponent, SortableCo /** * Sets focus on the component's first focusable element. * + * @param options * @returns {Promise} */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.filterEnabled ? this.filterEl : this.focusableItems.find((listItem) => listItem.active); - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx index 23624ac52d9..abfbc66891e 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -126,12 +126,16 @@ export class MenuItem extends LitElement { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.anchorEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx index fc75bf69c6c..522f4290497 100644 --- a/packages/calcite-components/src/components/menu/menu.tsx +++ b/packages/calcite-components/src/components/menu/menu.tsx @@ -62,12 +62,16 @@ export class Menu extends LitElement { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.menuItems[0]; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index d97a5539749..8f8db46ca2f 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -251,12 +251,16 @@ export class Modal extends LitElement implements OpenCloseComponent { } } - /** Sets focus on the component's "close" button (the first focusable item). */ + /** + * Sets focus on the component's "close" button (the first focusable item). + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } /** diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx index 2200c2489e1..e2263cf84fa 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -74,14 +74,18 @@ export class NavigationLogo extends LitElement { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { if (this.href) { return this.el; } - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx index 8fa9c559773..013ef8fb529 100644 --- a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx +++ b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx @@ -52,12 +52,16 @@ export class NavigationUser extends LitElement { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx index 252436ba9be..204f3f31378 100644 --- a/packages/calcite-components/src/components/navigation/navigation.tsx +++ b/packages/calcite-components/src/components/navigation/navigation.tsx @@ -82,12 +82,16 @@ export class Navigation extends LitElement { // #region Public Methods - /** When `navigationAction` is `true`, sets focus on the component's action element. */ + /** + * When `navigationAction` is `true`, sets focus on the component's action element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.navigationActionEl.value; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index b21da30af47..5a724ac6d6a 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -109,13 +109,17 @@ export class Notice extends LitElement implements OpenCloseComponent { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { const noticeLinkEl = this.el.querySelector("calcite-link"); return noticeLinkEl || this.closeButton.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index 9d04c6b47b5..41b1c259d74 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -141,12 +141,16 @@ export class Pagination extends LitElement { this.startItem = Math.max(1, this.startItem - this.pageSize); } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 04e96334adb..6cac48841b1 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -205,12 +205,16 @@ export class Panel extends LitElement implements InteractiveComponent { this.panelScrollEl?.scrollTo(options); } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.containerEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 0d501e05a27..59a037a0311 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -250,12 +250,16 @@ export class Popover extends LitElement implements FloatingUIComponent, OpenClos ); } - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } /** Updates the element(s) that are used within the focus-trap of the component. */ diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 451cace1f90..147d4e6e53b 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -95,16 +95,20 @@ export class RadioButtonGroup extends LitElement { // #region Public Methods - /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */ + /** + * Sets focus on the fist focusable `calcite-radio-button` element in the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { if (this.selectedItem && !this.selectedItem.disabled) { return this.selectedItem; } return this.getFocusableRadioButton(); - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index 825cf0f070a..d6b4de1c351 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -124,12 +124,16 @@ export class RadioButton this.calciteInternalRadioButtonCheckedChange.emit(); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.containerEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index fabe32f5524..25ef5464bb1 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -185,12 +185,16 @@ export class Rating //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index dafe4ba616e..a0947d99095 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -150,12 +150,16 @@ export class SegmentedControl // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.selectedItem || this.items[0]; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 7269429fc50..ee3e9e485f8 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -164,12 +164,16 @@ export class Select // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.selectEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 926c6b11d4b..f7c7d756558 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -227,12 +227,16 @@ export class Sheet extends LitElement implements OpenCloseComponent { //#region Public Methods - /** Sets focus on the component's "close" button - the first focusable item. */ + /** + * Sets focus on the component's "close" button - the first focusable item. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } /** diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index cf14a0f7add..1522a2961ea 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -324,12 +324,16 @@ export class Slider // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.minHandle || this.maxHandle; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx index 00392c4c3a8..64845eef8c6 100644 --- a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx +++ b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx @@ -117,12 +117,16 @@ export class SortHandle extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.dropdownEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx index ac4515e28d4..114957146db 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -153,12 +153,16 @@ export class SplitButton extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx index f2145ab61c0..d325a586117 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -146,12 +146,16 @@ export class StepperItem extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.layout === "vertical" ? this.el : this.headerEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index fe014cd2ca9..c587be4e660 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -86,12 +86,16 @@ export class Switch // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.switchEl; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index e14dad91133..a72b636c936 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -110,12 +110,16 @@ export class TableCell extends LitElement implements InteractiveComponent { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.containerEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 23d0e8f3656..cc6e6a4818c 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -110,12 +110,16 @@ export class TableHeader extends LitElement { //#region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.containerEl.value; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index bc348196c8d..5adfd6a8cd5 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -302,12 +302,16 @@ export class TextArea this.textAreaEl.select(); } - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.textAreaEl; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index 13cdbbd8615..48707eb4a14 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -99,12 +99,16 @@ export class TileSelect extends LitElement implements InteractiveComponent { // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.input; - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index 9479e458ff5..f358b16d1dc 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -150,14 +150,18 @@ export class Tile extends LitElement implements InteractiveComponent, Selectable // #region Public Methods - /** Sets focus on the component. */ + /** + * Sets focus on the component. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { if (this.interactive) { return this.containerEl; } - }); + }, options); } // #endregion diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx index 434ca2035c4..29fa3417b85 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -105,12 +105,16 @@ export class TimePicker extends LitElement implements TimeComponent { //#region Public Methods - /** Sets focus on the component's first focusable element. */ + /** + * Sets focus on the component's first focusable element. + * + * @param options + */ @method() - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return this.el; - }); + }, options); } //#endregion diff --git a/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx b/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx index f09ac84ca30..9139fd5d6c5 100644 --- a/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx +++ b/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx @@ -11,8 +11,8 @@ describe("useSetFocus", () => { private focusSetter = useSetFocus()(this); private inputRef = createRef(); - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -32,8 +32,8 @@ describe("useSetFocus", () => { private focusSetter = useSetFocus()(this); private inputRef = createRef>(); - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -52,8 +52,8 @@ describe("useSetFocus", () => { class Test extends LitElement { private focusSetter = useSetFocus()(this); - async setFocus(): Promise { - return this.focusSetter(() => this.el); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.el, options); } override render(): JsxNode { @@ -74,8 +74,8 @@ describe("useSetFocus", () => { disabled = true; - async setFocus(): Promise { - return this.focusSetter(() => this.el); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.el, options); } override render(): JsxNode { @@ -99,8 +99,8 @@ describe("useSetFocus", () => { focusSetter = useSetFocus()(this); private inputRef = createRef>(); - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -132,8 +132,8 @@ describe("useSetFocus", () => { private inputRef = createRef>(); private ready = false; - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -153,8 +153,8 @@ describe("useSetFocus", () => { focusSetter = useSetFocus()(this); private inputRef = createRef>(); - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -188,8 +188,8 @@ describe("useSetFocus", () => { private inputRef = createRef>(); - async setFocus(): Promise { - return this.focusSetter(() => this.inputRef.value); + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); } override render(): JsxNode { @@ -219,10 +219,10 @@ describe("useSetFocus", () => { private focusSetter = useSetFocus()(this); private ref = createRef(); - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return { target: this.ref.value!, includeContainer: true }; - }); + }, options); } override render(): JsxNode { @@ -248,10 +248,10 @@ describe("useSetFocus", () => { private focusSetter = useSetFocus()(this); private ref = createRef(); - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { return this.focusSetter(() => { return { target: this.ref.value!, strategy: "focusable" }; - }); + }, options); } override render(): JsxNode { diff --git a/packages/calcite-components/src/controllers/useSetFocus.ts b/packages/calcite-components/src/controllers/useSetFocus.ts index f8b0f7a924b..1192ae4007c 100644 --- a/packages/calcite-components/src/controllers/useSetFocus.ts +++ b/packages/calcite-components/src/controllers/useSetFocus.ts @@ -8,17 +8,15 @@ type FocusStrategy = "focusable" | "tabbable"; type FocusConfig = { target: FocusableElement; includeContainer?: boolean; strategy?: FocusStrategy }; export interface UseSetFocus { - (getFocusTarget: () => FocusableElement | FocusConfig | undefined): Promise; + (getFocusTarget: () => FocusableElement | FocusConfig | undefined, options?: FocusOptions): Promise; } -interface SetFocusComponent extends LitElement, Partial> { - setFocus: () => Promise; +export interface SetFocusComponent extends LitElement, Partial> { + setFocus: (options?: Parameters[0]) => Promise; } /** * A controller for centralized setFocus behavior. - * - * @param options */ export const useSetFocus = (): ReturnType< typeof makeGenericController @@ -41,7 +39,7 @@ export const useSetFocus = (): ReturnType< component.el.removeEventListener("focusout", handleFocusOut); }); - return async (getFocusTarget): Promise => { + return async (getFocusTarget, options?: FocusOptions): Promise => { if (component.disabled) { return; } @@ -66,7 +64,7 @@ export const useSetFocus = (): ReturnType< component.el.removeEventListener("focus", handleFocusOut); - return focusElement(target, includeContainer, strategy, component.el); + return focusElement(target, includeContainer, strategy, component.el, options); }; }); }; diff --git a/packages/calcite-components/src/utils/component.ts b/packages/calcite-components/src/utils/component.ts index 9c823dd7242..c5b75f2bda9 100644 --- a/packages/calcite-components/src/utils/component.ts +++ b/packages/calcite-components/src/utils/component.ts @@ -40,7 +40,7 @@ export function isHidden { + * async setFocus(options?: FocusOptions): Promise { * await componentFocusable(this); * this.internalElement?.focus(); * } diff --git a/packages/calcite-components/src/utils/dom.browser.spec.ts b/packages/calcite-components/src/utils/dom.browser.spec.ts index 3435731de51..7c6da2ef526 100644 --- a/packages/calcite-components/src/utils/dom.browser.spec.ts +++ b/packages/calcite-components/src/utils/dom.browser.spec.ts @@ -611,13 +611,13 @@ describe("dom", () => { this.shadowRoot.innerHTML = `
`; } - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { if (setFocusCalls++ > 10) { // simulates infinite loop without having to trigger a real one in test environment throw new RangeError("setFocus called too many times, likely an infinite loop"); } - return focusElement(this, false, "tabbable", useContext ? this : undefined); + return focusElement(this, false, "tabbable", useContext ? this : undefined, options); } } @@ -713,9 +713,9 @@ describe("dom", () => { this.shadowRoot.innerHTML = `
`; } - async setFocus(): Promise { + async setFocus(options?: FocusOptions): Promise { // simulate setFocus workflow - this.focus(); + this.focus(options); } } diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index d10c9cdee2e..4a5d334aab4 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -247,7 +247,7 @@ export function containsCrossShadowBoundary(element: Element, maybeDescendant: E /** An element which may contain a `setFocus` method. */ export interface FocusableElement extends HTMLElement { - setFocus?: () => Promise; + setFocus?: (options?: FocusOptions) => Promise; } /** @@ -267,23 +267,25 @@ export function isCalciteFocusable(el: FocusableElement): boolean { * @param includeContainer When true, the container element will be considered as well. Note, this is only applicable when `setFocus` is not applicable. * @param strategy The focus strategy to use when finding the first focusable element. Defaults to "tabbable". * @param context The element invoking the focus – use when the host is focusable to short-circuit the focus call. + * @param options */ export async function focusElement( el: FocusableElement, includeContainer = false, strategy: "focusable" | "tabbable" = "tabbable", context?: HTMLElement, + options?: FocusOptions, ): Promise { if (!el) { return; } if (isCalciteFocusable(el) && context !== el) { - return el.setFocus(); + return el.setFocus(options); } const firstFocusFunction = strategy === "tabbable" ? focusFirstTabbable : focusFirstFocusable; - return firstFocusFunction(el, includeContainer); + return firstFocusFunction(el, includeContainer, options); } /** @@ -307,9 +309,10 @@ export function getFirstTabbable(element: HTMLElement, includeContainer?: boolea * * @param {HTMLElement} element The html element containing tabbable elements. * @param {boolean} includeContainer When true, the container element will be considered as well. + * @param options */ -export function focusFirstTabbable(element: HTMLElement, includeContainer?: boolean): void { - getFirstTabbable(element, includeContainer)?.focus(); +export function focusFirstTabbable(element: HTMLElement, includeContainer?: boolean, options?: FocusOptions): void { + getFirstTabbable(element, includeContainer)?.focus(options); } /** @@ -338,8 +341,8 @@ function getFirstFocusable(element: HTMLElement, includeContainer?: boolean): HT * * @internal */ -function focusFirstFocusable(element: HTMLElement, includeContainer?: boolean): void { - getFirstFocusable(element, includeContainer)?.focus(); +function focusFirstFocusable(element: HTMLElement, includeContainer?: boolean, options?: FocusOptions): void { + getFirstFocusable(element, includeContainer)?.focus(options); } /** From c806c8a9e658b82e82cf3f3ee30a04c6bea3d813 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 09:57:51 -0700 Subject: [PATCH 02/14] update focusable test helper --- .../src/tests/commonTests/focusable.ts | 51 +++++++++++++++++-- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/tests/commonTests/focusable.ts b/packages/calcite-components/src/tests/commonTests/focusable.ts index 8b47b2d4ce5..aa29fd4cd15 100644 --- a/packages/calcite-components/src/tests/commonTests/focusable.ts +++ b/packages/calcite-components/src/tests/commonTests/focusable.ts @@ -1,5 +1,6 @@ // @ts-strict-ignore import { expect, it } from "vitest"; +import { GlobalTestProps } from "../utils/puppeteer"; import { getTagAndPage } from "./utils"; import { ComponentTestSetup } from "./interfaces"; @@ -20,7 +21,7 @@ export interface FocusableOptions { * describe("is focusable", () => { * focusable(`calcite-input-number`, { shadowFocusTargetSelector: "input" }) * }); - * @param {string} componentTagOrHTML - the component tag or HTML markup to test against + * * @param componentTestSetup * @param {FocusableOptions} [options] - additional options for asserting focus */ @@ -30,6 +31,7 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu const element = await page.find(tag); const focusTargetSelector = options?.focusTargetSelector || tag; await element.callMethod("setFocus"); // assumes element is FocusableElement + await page.waitForChanges(); if (options?.shadowFocusTargetSelector) { expect( @@ -41,11 +43,52 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu ).toBe(true); } - // wait for next frame before checking focus - await page.waitForChanges(); - expect(await page.evaluate((selector) => document.activeElement?.matches(selector), focusTargetSelector)).toBe( true, ); + + // we use a fake to assert that the focus options are passed correctly to the target element + const fakeFocusOptions = { __id__: "fake-focus-options" } as FocusOptions; + + type TestWindow = GlobalTestProps<{ + receivedFocusOptions: FocusOptions[]; + }>; + + await page.evaluate(() => { + const activeElement = document.activeElement; + + if (activeElement) { + let elementToBlur: Element | null = activeElement; + while (elementToBlur) { + if (elementToBlur.shadowRoot && elementToBlur.shadowRoot.activeElement) { + elementToBlur = elementToBlur.shadowRoot.activeElement; + } else { + (elementToBlur as HTMLElement).blur?.(); + break; + } + } + } + + const originalFocus = HTMLElement.prototype.focus; + HTMLElement.prototype.focus = function (this: HTMLElement, options?: FocusOptions) { + const testWindow = window as TestWindow; + testWindow.receivedFocusOptions = testWindow.receivedFocusOptions + ? [...testWindow.receivedFocusOptions, options] + : [options]; + originalFocus.call(this, options); + }; + }); + await page.waitForChanges(); + + await element.callMethod("setFocus", fakeFocusOptions); + await page.waitForChanges(); + + const receivedFocusOptions = await page.evaluate(() => { + const testWindow = window as TestWindow; + return testWindow.receivedFocusOptions; + }); + + expect(receivedFocusOptions).toContainEqual(fakeFocusOptions); + expect(receivedFocusOptions.length).toBe(1); }); } From 74fc1df173653d696e3bc7af4197d5211b8b4286 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 10:04:45 -0700 Subject: [PATCH 03/14] update useSetFocus test --- .../controllers/useSetFocus.browser.spec.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx b/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx index 9139fd5d6c5..f865fe4a564 100644 --- a/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx +++ b/packages/calcite-components/src/controllers/useSetFocus.browser.spec.tsx @@ -273,4 +273,31 @@ describe("useSetFocus", () => { ); }); }); + + it("supports passing focus options", async () => { + class Test extends LitElement { + private focusSetter = useSetFocus()(this); + + inputRef = createRef(); + + async setFocus(options?: FocusOptions): Promise { + return this.focusSetter(() => this.inputRef.value, options); + } + + override render(): JsxNode { + return ; + } + } + + const { el, component } = await mount(Test); + const focusSpy = vi.spyOn(component.inputRef.value!, "focus"); + + expect(document.activeElement).not.toBe(el); + + const focusOptions: FocusOptions = { preventScroll: true }; + await el.setFocus(focusOptions); + expect(document.activeElement).toBe(el); + expect(focusSpy).toHaveBeenCalledWith(focusOptions); + expect(focusSpy).toHaveBeenCalledTimes(1); + }); }); From e7b757334824a0e0be2c7a12e6881ad6cdc77e3e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 10:26:32 -0700 Subject: [PATCH 04/14] update dom util tests --- .../src/utils/dom.browser.spec.ts | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/packages/calcite-components/src/utils/dom.browser.spec.ts b/packages/calcite-components/src/utils/dom.browser.spec.ts index 7c6da2ef526..1467665c6ec 100644 --- a/packages/calcite-components/src/utils/dom.browser.spec.ts +++ b/packages/calcite-components/src/utils/dom.browser.spec.ts @@ -9,6 +9,7 @@ import { ensureId, focusElement, focusElementInGroup, + focusFirstTabbable, getModeName, getShadowRootNode, getSlotAssignedElements, @@ -641,6 +642,109 @@ describe("dom", () => { expect(error).toBeInstanceOf(RangeError); } }); + + describe("focus options", () => { + it("supports focus options", () => { + const el = create("div", { tabIndex: 0 }); + const focusOptions = { preventScroll: true }; + const focusSpy = vi.spyOn(el, "focus"); + + focusElement(el, true, "tabbable", undefined, focusOptions); + + expect(document.activeElement).toBe(el); + expect(focusSpy).toHaveBeenCalledWith(focusOptions); + expect(focusSpy).toHaveBeenCalledTimes(1); + }); + + it("supports focus options on setFocus elements", () => { + class Test extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = `
`; + } + async setFocus(options?: FocusOptions): Promise { + return focusElement(this, false, "tabbable", this, options); + } + } + const testElTag = registerTestElement(Test); + const el = document.createElement(testElTag) as Test; + document.body.append(el); + vi.spyOn(el, "setFocus"); + + const focusOptions = { preventScroll: true }; + focusElement(el, false, "tabbable", undefined, focusOptions); + + expect(document.activeElement).toBe(el); + expect(el.setFocus).toHaveBeenCalledWith(focusOptions); + expect(el.setFocus).toHaveBeenCalledTimes(1); + }); + }); + }); + + describe("focusFirstTabbable()", () => { + afterEach(() => { + document.body.innerHTML = ""; + }); + + it("focuses the first tabbable element", () => { + const el1 = document.createElement("div"); + const el2 = document.createElement("div"); + el2.tabIndex = 0; + const el3 = document.createElement("div"); + document.body.append(el1, el2, el3); + + focusFirstTabbable(document.body); + + expect(document.activeElement).toBe(el2); + }); + + it("does not focus if no tabbable elements are found", () => { + const el1 = document.createElement("div"); + const el2 = document.createElement("div"); + const el3 = document.createElement("div"); + document.body.append(el1, el2, el3); + + focusFirstTabbable(document.body); + + expect(document.activeElement).toBe(document.body); + }); + + it("supports including parent in focus search", () => { + const el1 = document.createElement("div"); + const el2 = document.createElement("div"); + const el3 = document.createElement("div"); + const container = document.createElement("div"); + el2.tabIndex = 0; + container.tabIndex = 0; + container.append(el1, el2, el3); + document.body.append(container); + + focusFirstTabbable(container); + + expect(document.activeElement).toBe(el2); + + focusFirstTabbable(container, true); + + expect(document.activeElement).toBe(container); + }); + + it("supports passing focus options", () => { + const el1 = document.createElement("div"); + const el2 = document.createElement("div"); + el2.tabIndex = 0; + const el3 = document.createElement("div"); + document.body.append(el1, el2, el3); + + const focusSpy = vi.spyOn(el2, "focus"); + const focusOptions = { preventScroll: true }; + + focusFirstTabbable(document.body, false, focusOptions); + + expect(document.activeElement).toBe(el2); + expect(focusSpy).toHaveBeenCalledWith(focusOptions); + expect(focusSpy).toHaveBeenCalledTimes(1); + }); }); describe("focusElementInGroup()", () => { From 7c04f98f9c5375e48dec5ac372e4740f14ab92c5 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 10:27:09 -0700 Subject: [PATCH 05/14] tidy up --- packages/calcite-components/src/utils/dom.browser.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/utils/dom.browser.spec.ts b/packages/calcite-components/src/utils/dom.browser.spec.ts index 1467665c6ec..63ecabe3184 100644 --- a/packages/calcite-components/src/utils/dom.browser.spec.ts +++ b/packages/calcite-components/src/utils/dom.browser.spec.ts @@ -625,7 +625,7 @@ describe("dom", () => { const testElTag = registerTestElement(Test); const el = document.createElement(testElTag) as Test; - document.body.appendChild(el); + document.body.append(el); vi.spyOn(el, "focus"); vi.spyOn(el, "setFocus"); @@ -829,7 +829,7 @@ describe("dom", () => { const el = document.createElement(testTag) as Test; el.id = `item-${index}`; el.tabIndex = 0; - document.body.appendChild(el); + document.body.append(el); return el; }); From 6cbb194c743331975863afce5841707ce17d9915 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 11:03:21 -0700 Subject: [PATCH 06/14] tidy up focus types --- .../src/controllers/useSetFocus.ts | 7 ++----- packages/calcite-components/src/utils/dom.ts | 14 ++++++++------ 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/controllers/useSetFocus.ts b/packages/calcite-components/src/controllers/useSetFocus.ts index 1192ae4007c..14e5e3e762b 100644 --- a/packages/calcite-components/src/controllers/useSetFocus.ts +++ b/packages/calcite-components/src/controllers/useSetFocus.ts @@ -1,7 +1,6 @@ import { makeGenericController } from "@arcgis/lumina/controllers"; -import { LitElement } from "@arcgis/lumina"; import { componentFocusable } from "../utils/component"; -import { FocusableElement, focusElement, getRootNode } from "../utils/dom"; +import { FocusableElement, focusElement, getRootNode, SetFocusable } from "../utils/dom"; import { type InteractiveComponent } from "../utils/interactive"; type FocusStrategy = "focusable" | "tabbable"; @@ -11,9 +10,7 @@ export interface UseSetFocus { (getFocusTarget: () => FocusableElement | FocusConfig | undefined, options?: FocusOptions): Promise; } -export interface SetFocusComponent extends LitElement, Partial> { - setFocus: (options?: Parameters[0]) => Promise; -} +type SetFocusComponent = SetFocusable & Partial>; /** * A controller for centralized setFocus behavior. diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index 4a5d334aab4..0b43988e0e4 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -1,5 +1,6 @@ // @ts-strict-ignore import { focusable, tabbable } from "tabbable"; +import { LitElement } from "@arcgis/lumina"; import { IconNameOrString } from "../components/icon/interfaces"; import { guid } from "./guid"; import { CSS_UTILITY } from "./resources"; @@ -245,19 +246,20 @@ export function containsCrossShadowBoundary(element: Element, maybeDescendant: E return !!walkUpAncestry(maybeDescendant, (node) => (node === element ? true : undefined)); } -/** An element which may contain a `setFocus` method. */ -export interface FocusableElement extends HTMLElement { - setFocus?: (options?: FocusOptions) => Promise; +export type FocusableElement = SetFocusable | HTMLElement; + +export interface SetFocusable extends LitElement { + setFocus: (options?: FocusOptions) => Promise; } /** * This helper returns true when an element has a setFocus method. * * @param {Element} el An element. - * @returns {boolean} The result. + * @returns {boolean} Whether the element is focusable. */ -export function isCalciteFocusable(el: FocusableElement): boolean { - return typeof el?.setFocus === "function"; +export function isCalciteFocusable(el: FocusableElement): el is SetFocusable { + return typeof (el as SetFocusable)?.setFocus === "function"; } /** From af9a62c7e1c3ce072016f60a55aae494b09758ea Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 21 Jul 2025 23:31:31 -0700 Subject: [PATCH 07/14] improve focusable test coverage --- .../src/components/action/action.e2e.ts | 17 ++++- .../src/components/button/button.e2e.ts | 16 ++++- .../components/card-group/card-group.e2e.ts | 68 +++++++++++-------- .../src/components/card/card.e2e.ts | 24 ++++--- .../src/components/carousel/carousel.e2e.ts | 57 ++++++++++------ .../components/chip-group/chip-group.e2e.ts | 68 +++++++++++-------- .../src/components/combobox/combobox.e2e.ts | 11 +++ .../date-picker-day/date-picker-day.e2e.ts | 18 ++++- .../src/components/dialog/dialog.e2e.ts | 2 +- .../src/components/fab/fab.e2e.ts | 6 +- .../src/components/handle/handle.e2e.ts | 6 +- .../inline-editable/inline-editable.e2e.ts | 15 +++- .../src/components/link/link.e2e.ts | 26 +++++-- .../src/components/modal/modal.e2e.ts | 4 +- .../src/components/panel/panel.e2e.ts | 2 +- .../components/sort-handle/sort-handle.e2e.ts | 6 +- .../stepper-item/stepper-item.e2e.ts | 6 +- .../src/components/switch/switch.e2e.ts | 15 ++-- .../components/table-cell/table-cell.e2e.ts | 8 +++ .../table-header/table-header.e2e.ts | 8 +++ .../src/components/table/table.tsx | 12 ++++ 21 files changed, 291 insertions(+), 104 deletions(-) create mode 100644 packages/calcite-components/src/components/table-cell/table-cell.e2e.ts create mode 100644 packages/calcite-components/src/components/table-header/table-header.e2e.ts diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index e18cb2bdde9..72c7e5dffe1 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -1,6 +1,17 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed, reflects } from "../../tests/commonTests"; +import { + accessible, + disabled, + hidden, + renders, + slots, + t9n, + defaults, + themed, + reflects, + focusable, +} from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; @@ -111,6 +122,10 @@ describe("calcite-action", () => { disabled("calcite-action"); }); + describe("focusable", () => { + focusable("calcite-action"); + }); + describe("slots", () => { slots("calcite-action", SLOTS); }); diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index 7281b9b90f4..ad4ac2d9783 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/packages/calcite-components/src/components/button/button.e2e.ts @@ -1,7 +1,17 @@ // @ts-strict-ignore import { newE2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n, themed } from "../../tests/commonTests"; +import { + accessible, + defaults, + disabled, + focusable, + hidden, + HYDRATED_ATTR, + labelable, + t9n, + themed, +} from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils/puppeteer"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -172,6 +182,10 @@ describe("calcite-button", () => { disabled("calcite-button"); }); + describe("focusable", () => { + focusable("calcite-button"); + }); + it("should have aria-live attribute set to polite by default", async () => { const page = await newE2EPage(); await page.setContent(`Continue`); diff --git a/packages/calcite-components/src/components/card-group/card-group.e2e.ts b/packages/calcite-components/src/components/card-group/card-group.e2e.ts index 1e73ac5d9c1..f609379562a 100644 --- a/packages/calcite-components/src/components/card-group/card-group.e2e.ts +++ b/packages/calcite-components/src/components/card-group/card-group.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; import { html } from "../../../support/formatting"; -import { accessible, renders, hidden, disabled, themed } from "../../tests/commonTests"; +import { accessible, renders, hidden, disabled, themed, focusable } from "../../tests/commonTests"; import { createSelectedItemsAsserter } from "../../tests/utils/puppeteer"; import { CSS } from "./resources"; @@ -21,40 +21,54 @@ describe("calcite-card-group", () => { disabled("", { focusTarget: "none" }); }); - describe("is accessible in selection mode none (default)", () => { - accessible( - html` + describe("focusable", () => { + focusable( + html` Heading Heading `, + { + focusTargetSelector: "calcite-card:first-of-type", + }, ); }); - describe("is accessible in selection mode single", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("accessible", () => { + describe("is accessible in selection mode none (default)", () => { + accessible( + html` + Heading + Heading + `, + ); + }); - describe("is accessible in selection mode single-persist", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("is accessible in selection mode single", () => { + accessible( + html` + Heading + Heading + `, + ); + }); - describe("is accessible in selection mode multiple", () => { - accessible( - html` - Heading - Heading - `, - ); + describe("is accessible in selection mode single-persist", () => { + accessible( + html` + Heading + Heading + `, + ); + }); + + describe("is accessible in selection mode multiple", () => { + accessible( + html` + Heading + Heading + `, + ); + }); }); describe("selection modes function as intended", () => { diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index 353ea0e6ab8..c67cb8e3964 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, renders, slots, hidden, t9n, themed } from "../../tests/commonTests"; +import { accessible, renders, slots, hidden, t9n, themed, focusable } from "../../tests/commonTests"; import { placeholderImage } from "../../../.storybook/placeholder-image"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; @@ -19,16 +19,22 @@ describe("calcite-card", () => { hidden("calcite-card"); }); - describe("accessible", () => { - accessible("calcite-card"); + describe("focusable", () => { + focusable("calcite-card"); }); - describe("accessible when selectable (deprecated)", () => { - accessible( - html` - Test image - `, - ); + describe("accessible", () => { + describe("default", () => { + accessible("calcite-card"); + }); + + describe("when selectable (deprecated)", () => { + accessible( + html` + Test image + `, + ); + }); }); describe("slots", () => { diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts index 4867077992d..8cf2ecc18d1 100644 --- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts +++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, hidden, renders, t9n, themed } from "../../tests/commonTests"; +import { accessible, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { breakpoints } from "../../utils/responsive"; import { findAll } from "../../tests/utils/puppeteer"; @@ -35,8 +35,8 @@ describe("calcite-carousel", () => { ); }); - describe("accessible", () => { - accessible( + describe("focusable", () => { + focusable( html`

carousel item content

 { ); }); - describe("accessible with autoplay paused", () => { - accessible( - html`

carousel item content

carousel item content

`, - ); - }); + describe("accessible", () => { + describe("default", () => { + accessible( + html`

carousel item content

carousel item content

`, + ); + }); - describe("accessible with autoplay when autoplay", () => { - accessible( - html`

carousel item content

carousel item content

`, - ); + describe("with autoplay paused", () => { + accessible( + html`

carousel item content

carousel item content

`, + ); + }); + + describe("with autoplay when autoplay", () => { + accessible( + html`

carousel item content

carousel item content

`, + ); + }); }); describe("translation support", () => { diff --git a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts index 7ed547928cd..9829b908072 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; import { html } from "../../../support/formatting"; -import { accessible, renders, hidden, disabled } from "../../tests/commonTests"; +import { accessible, renders, hidden, disabled, focusable } from "../../tests/commonTests"; import { CSS as CHIP_CSS } from "../chip/resources"; import { createSelectedItemsAsserter } from "../../tests/utils/puppeteer"; @@ -23,40 +23,54 @@ describe("calcite-chip-group", () => { }); }); - describe("is accessible in selection mode none (default)", () => { - accessible( - html` + describe("focusable", () => { + focusable( + html` `, + { + focusTargetSelector: "calcite-chip:first-of-type", + }, ); }); - describe("is accessible in selection mode single", () => { - accessible( - html` - - - `, - ); - }); + describe("accessible", () => { + describe("selection mode none (default)", () => { + accessible( + html` + + + `, + ); + }); - describe("is selection mode single persists", () => { - accessible( - html` - - - `, - ); - }); + describe("selection mode single", () => { + accessible( + html` + + + `, + ); + }); - describe("is accessible in selection mode multiple", () => { - accessible( - html` - - - `, - ); + describe("selection mode single persists", () => { + accessible( + html` + + + `, + ); + }); + + describe("selection mode multiple", () => { + accessible( + html` + + + `, + ); + }); }); describe("selection modes function as intended", () => { diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index d7e6e1f8af2..8b90f15aa5e 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -6,6 +6,8 @@ import { defaults, disabled, floatingUIOwner, + focusable, + focusable, formAssociated, hidden, labelable, @@ -140,6 +142,15 @@ describe("calcite-combobox", () => { ]); }); + describe("focusable", () => { + focusable(html` + + + + + `); + }); + describe("honors hidden attribute", () => { hidden("calcite-combobox"); }); diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts b/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts index 10e7cb397da..8a08b24ed87 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it, beforeEach } from "vitest"; -import { disabled } from "../../tests/commonTests"; +import { disabled, focusable } from "../../tests/commonTests"; import { newProgrammaticE2EPage } from "../../tests/utils/puppeteer"; import { DATE_PICKER_FORMAT_OPTIONS } from "../date-picker/resources"; @@ -23,6 +23,22 @@ describe("calcite-date-picker-day", () => { disabled(() => ({ tag: "calcite-date-picker-day", page })); }); + describe("focusable", () => { + focusable(async () => { + const page = await newProgrammaticE2EPage(); + await page.evaluate(() => { + const dateEl = document.createElement("calcite-date-picker-day"); + dateEl.active = true; + dateEl.dateTimeFormat = new Intl.DateTimeFormat("en"); // options not needed as this is only needed for rendering + dateEl.day = 3; + document.body.append(dateEl); + }); + await page.waitForChanges(); + + return { tag: "calcite-date-picker-day", page }; + }); + }); + describe("accessibility", () => { it("labels its associated day", async () => { const page = await newProgrammaticE2EPage(); diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 5b89686a390..ff488db736e 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -704,7 +704,7 @@ describe("calcite-dialog", () => { }); }); - describe("setFocus", () => { + describe("focusable", () => { const createDialogHTML = (contentHTML?: string, attrs?: string) => `${contentHTML}`; diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index c90939beecd..40e700dbb51 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, renders, themed } from "../../tests/commonTests"; import { findAll } from "../../tests/utils/puppeteer"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -31,6 +31,10 @@ describe("calcite-fab", () => { disabled("calcite-fab"); }); + describe("focusable", () => { + focusable("calcite-fab"); + }); + it(`should set all internal calcite-button types to 'button'`, async () => { const page = await newE2EPage({ html: "", diff --git a/packages/calcite-components/src/components/handle/handle.e2e.ts b/packages/calcite-components/src/components/handle/handle.e2e.ts index 560fb557cf4..d6398ff7515 100644 --- a/packages/calcite-components/src/components/handle/handle.e2e.ts +++ b/packages/calcite-components/src/components/handle/handle.e2e.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, disabled, hidden, renders, themed, t9n } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders, themed, t9n, focusable } from "../../tests/commonTests"; import { CSS, SUBSTITUTIONS } from "./resources"; import type { HandleNudge } from "./interfaces"; import type { Handle } from "./handle"; @@ -19,6 +19,10 @@ describe("calcite-handle", () => { disabled("calcite-handle"); }); + describe("focusable", () => { + focusable("calcite-handle"); + }); + describe("accessible", () => { accessible(``); }); diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts index 42a22735967..cefa0bc4b30 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { E2EPage, newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { beforeEach, describe, expect, it } from "vitest"; -import { accessible, disabled, hidden, labelable, renders, t9n, themed } from "../../tests/commonTests"; +import { accessible, disabled, focusable, hidden, labelable, renders, t9n, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import type { Input } from "../input/input"; import { findAll } from "../../tests/utils/puppeteer"; @@ -36,6 +36,19 @@ describe("calcite-inline-editable", () => { ); }); + describe("focusable", () => { + focusable( + html` + + + + `, + { + focusTargetSelector: "calcite-input", + }, + ); + }); + describe("rendering permutations", () => { it("renders default props when none are provided", async () => { const page: E2EPage = await newE2EPage(); diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts index b79eb37f02c..7998bb35072 100644 --- a/packages/calcite-components/src/components/link/link.e2e.ts +++ b/packages/calcite-components/src/components/link/link.e2e.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it, beforeEach } from "vitest"; -import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, renders, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -24,15 +24,33 @@ describe("calcite-link", () => { }); describe("accessible", () => { - accessible("link"); - accessible("link"); - accessible("Go"); + describe("default", () => { + accessible("link"); + }); + + describe("with href", () => { + accessible("link"); + }); + + describe("with href + icons", () => { + accessible("Go"); + }); }); describe("disabled", () => { disabled(`link`); }); + describe("focusable", () => { + describe("default", () => { + focusable(html`link`); + }); + + describe("with href", () => { + focusable(html`link`); + }); + }); + it("sets download attribute on internal anchor", async () => { const page = await newE2EPage(); await page.setContent(`Continue`); diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index 4842781d7d0..06935cdf8cb 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -11,6 +11,7 @@ import { waitForAnimationFrame, } from "../../tests/utils/puppeteer"; import { focusTrap } from "../../tests/commonTests/focusTrap"; +import { mockConsole } from "../../tests/utils/logging"; import { CSS, SLOTS } from "./resources"; import type { Modal } from "./modal"; @@ -388,7 +389,7 @@ describe("calcite-modal", () => { }); }); - describe("setFocus", () => { + describe("focusable", () => { const createModalHTML = (contentHTML?: string, attrs?: string) => `${contentHTML}`; @@ -397,6 +398,7 @@ describe("calcite-modal", () => { const focusableContentHTML = html`

Title

This is the content

`; + mockConsole("error"); describe("focuses close button by default", () => { focusable(createModalHTML(focusableContentHTML), { diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 945a4821dcf..342c7f0a54c 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -473,7 +473,7 @@ describe("calcite-panel", () => { `); }); - describe("is focusable", () => { + describe("focusable", () => { describe("with scrolling content", () => { describe("closable", () => { focusable( diff --git a/packages/calcite-components/src/components/sort-handle/sort-handle.e2e.ts b/packages/calcite-components/src/components/sort-handle/sort-handle.e2e.ts index 7927dd96c24..0c729ace1cb 100644 --- a/packages/calcite-components/src/components/sort-handle/sort-handle.e2e.ts +++ b/packages/calcite-components/src/components/sort-handle/sort-handle.e2e.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, disabled, hidden, renders, t9n, openClose } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders, t9n, openClose, focusable } from "../../tests/commonTests"; import { skipAnimations } from "../../tests/utils/puppeteer"; import T9nStrings from "./assets/t9n/messages.en.json"; import { CSS, REORDER_VALUES, SUBSTITUTIONS } from "./resources"; @@ -21,6 +21,10 @@ describe("calcite-sort-handle", () => { disabled(``); }); + describe("focusable", () => { + focusable("calcite-sort-handle"); + }); + describe("accessible", () => { accessible(``); }); diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts index 1cfe97fb768..28642e354ce 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { disabled, renders, hidden, t9n, themed } from "../../tests/commonTests"; +import { disabled, renders, hidden, t9n, themed, focusable } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -17,6 +17,10 @@ describe("calcite-stepper-item", () => { disabled("calcite-stepper-item"); }); + describe("focusable", () => { + focusable(html``); + }); + describe("translation support", () => { t9n(html``); }); diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts index 20d898efda9..ba2ec4bcdac 100644 --- a/packages/calcite-components/src/components/switch/switch.e2e.ts +++ b/packages/calcite-components/src/components/switch/switch.e2e.ts @@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest"; import { accessible, disabled, + focusable, formAssociated, hidden, HYDRATED_ATTR, @@ -29,11 +30,13 @@ describe("calcite-switch", () => { }); describe("accessible", () => { - accessible(``); - }); + describe("unchecked", () => { + accessible(``); + }); - describe("accessible: checked", () => { - accessible(``); + describe("checked", () => { + accessible(``); + }); }); describe("labelable", () => { @@ -48,6 +51,10 @@ describe("calcite-switch", () => { disabled("calcite-switch"); }); + describe("focusable", () => { + focusable("calcite-switch"); + }); + it("toggles the checked attributes appropriately when clicked", async () => { const page = await newE2EPage(); await page.setContent(""); diff --git a/packages/calcite-components/src/components/table-cell/table-cell.e2e.ts b/packages/calcite-components/src/components/table-cell/table-cell.e2e.ts new file mode 100644 index 00000000000..56223723162 --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/table-cell.e2e.ts @@ -0,0 +1,8 @@ +import { describe } from "vitest"; +import { focusable } from "../../tests/commonTests"; + +describe("calcite-table-header", () => { + describe("focusable", () => { + focusable("calcite-table-cell"); + }); +}); diff --git a/packages/calcite-components/src/components/table-header/table-header.e2e.ts b/packages/calcite-components/src/components/table-header/table-header.e2e.ts new file mode 100644 index 00000000000..5a90c65fe09 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/table-header.e2e.ts @@ -0,0 +1,8 @@ +import { describe } from "vitest"; +import { focusable } from "../../tests/commonTests"; + +describe("calcite-table-header", () => { + describe("focusable", () => { + focusable("calcite-table-header"); + }); +}); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 100c69c23ce..5bd6fa5a27e 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -145,6 +145,18 @@ export class Table extends LitElement { /** When `true`, displays striped styling in the component. */ @property({ reflect: true }) striped = false; + /** Paginates to a specific page */ + @property({ reflect: true }) startPage: number = 1; + + /** + * Specifies the current page + * + * @readonly + */ + @property() get currentPage(): number { + return Math.ceil(this.pageStartRow / this.pageSize); + } + //#endregion //#region Events From 74f3aa3e092e2c727858041c70a0696235b39260 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 22 Jul 2025 20:58:37 -0700 Subject: [PATCH 08/14] update focusable to assert on test-scoped focus options --- .../src/tests/commonTests/focusable.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/tests/commonTests/focusable.ts b/packages/calcite-components/src/tests/commonTests/focusable.ts index aa29fd4cd15..1222dedda33 100644 --- a/packages/calcite-components/src/tests/commonTests/focusable.ts +++ b/packages/calcite-components/src/tests/commonTests/focusable.ts @@ -48,7 +48,7 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu ); // we use a fake to assert that the focus options are passed correctly to the target element - const fakeFocusOptions = { __id__: "fake-focus-options" } as FocusOptions; + const fakeFocusOptions = { __id__: "fake-focus-options" } as const; type TestWindow = GlobalTestProps<{ receivedFocusOptions: FocusOptions[]; @@ -75,6 +75,7 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu testWindow.receivedFocusOptions = testWindow.receivedFocusOptions ? [...testWindow.receivedFocusOptions, options] : [options]; + originalFocus.call(this, options); }; }); @@ -88,7 +89,11 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu return testWindow.receivedFocusOptions; }); - expect(receivedFocusOptions).toContainEqual(fakeFocusOptions); - expect(receivedFocusOptions.length).toBe(1); + const testScopeFocusOptions = receivedFocusOptions.filter( + (focusOptions) => (focusOptions as typeof fakeFocusOptions)?.__id__ === "fake-focus-options", + ); + + expect(testScopeFocusOptions).toContainEqual(fakeFocusOptions); + expect(testScopeFocusOptions.length).toBe(1); }); } From 7b7f26c6910b7afaef84bdfbd0ff78cfbe22ce28 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 22 Jul 2025 20:59:45 -0700 Subject: [PATCH 09/14] ensure tests are set up consistently --- .../src/components/modal/modal.e2e.ts | 2 -- .../src/components/table/table.tsx | 12 ------------ .../src/tests/commonTests/utils.ts | 7 ++----- 3 files changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index 06935cdf8cb..e54d6360dc2 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -11,7 +11,6 @@ import { waitForAnimationFrame, } from "../../tests/utils/puppeteer"; import { focusTrap } from "../../tests/commonTests/focusTrap"; -import { mockConsole } from "../../tests/utils/logging"; import { CSS, SLOTS } from "./resources"; import type { Modal } from "./modal"; @@ -398,7 +397,6 @@ describe("calcite-modal", () => { const focusableContentHTML = html`

Title

This is the content

`; - mockConsole("error"); describe("focuses close button by default", () => { focusable(createModalHTML(focusableContentHTML), { diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 5bd6fa5a27e..100c69c23ce 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -145,18 +145,6 @@ export class Table extends LitElement { /** When `true`, displays striped styling in the component. */ @property({ reflect: true }) striped = false; - /** Paginates to a specific page */ - @property({ reflect: true }) startPage: number = 1; - - /** - * Specifies the current page - * - * @readonly - */ - @property() get currentPage(): number { - return Math.ceil(this.pageStartRow / this.pageSize); - } - //#endregion //#region Events diff --git a/packages/calcite-components/src/tests/commonTests/utils.ts b/packages/calcite-components/src/tests/commonTests/utils.ts index afe1a527843..fc192c3d283 100644 --- a/packages/calcite-components/src/tests/commonTests/utils.ts +++ b/packages/calcite-components/src/tests/commonTests/utils.ts @@ -36,11 +36,8 @@ export function getTag(tagOrHTML: string): ComponentTag { export async function simplePageSetup(componentTagOrHTML: TagOrHTML): Promise { const componentTag = getTag(componentTagOrHTML); - const page = await newE2EPage({ - html: isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}>`, - }); - await page.waitForChanges(); - + const page = await newE2EPage(); + await page.setContent(isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}>`); return page; } From d61e745a33291406b8894cfa6f8f1ad2bedcf889 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 22 Jul 2025 21:13:18 -0700 Subject: [PATCH 10/14] add doc for options --- .../src/components/accordion-item/accordion-item.tsx | 4 +++- .../src/components/action-bar/action-bar.tsx | 4 +++- .../src/components/action-group/action-group.tsx | 4 +++- .../src/components/action-menu/action-menu.tsx | 4 +++- .../src/components/action-pad/action-pad.tsx | 4 +++- .../calcite-components/src/components/action/action.tsx | 4 +++- .../calcite-components/src/components/alert/alert.tsx | 4 +++- .../src/components/autocomplete/autocomplete.tsx | 6 ++++-- .../src/components/block-group/block-group.tsx | 4 +++- .../src/components/block-section/block-section.tsx | 4 +++- .../calcite-components/src/components/block/block.tsx | 4 +++- .../calcite-components/src/components/button/button.tsx | 4 +++- .../src/components/card-group/card-group.tsx | 4 +++- packages/calcite-components/src/components/card/card.tsx | 4 +++- .../src/components/carousel/carousel.tsx | 4 +++- .../src/components/checkbox/checkbox.tsx | 4 +++- .../src/components/chip-group/chip-group.tsx | 4 +++- packages/calcite-components/src/components/chip/chip.tsx | 4 +++- .../color-picker-hex-input/color-picker-hex-input.tsx | 4 +++- .../src/components/color-picker/color-picker.tsx | 4 +++- .../src/components/combobox/combobox.tsx | 4 +++- .../src/components/date-picker-day/date-picker-day.tsx | 4 +++- .../src/components/date-picker/date-picker.tsx | 4 +++- .../calcite-components/src/components/dialog/dialog.tsx | 6 ++++-- .../src/components/dropdown-item/dropdown-item.tsx | 4 +++- .../src/components/dropdown/dropdown.tsx | 4 +++- packages/calcite-components/src/components/fab/fab.tsx | 4 +++- .../calcite-components/src/components/filter/filter.tsx | 4 +++- .../src/components/flow-item/flow-item.tsx | 4 +++- packages/calcite-components/src/components/flow/flow.tsx | 4 +++- .../calcite-components/src/components/handle/handle.tsx | 4 +++- .../src/components/inline-editable/inline-editable.tsx | 4 +++- .../components/input-date-picker/input-date-picker.tsx | 4 +++- .../src/components/input-number/input-number.tsx | 4 +++- .../src/components/input-text/input-text.tsx | 4 +++- .../components/input-time-picker/input-time-picker.tsx | 4 +++- .../src/components/input-time-zone/input-time-zone.tsx | 4 +++- .../calcite-components/src/components/input/input.tsx | 4 +++- packages/calcite-components/src/components/link/link.tsx | 4 +++- .../src/components/list-item/list-item.tsx | 4 +++- packages/calcite-components/src/components/list/list.tsx | 4 +++- .../src/components/menu-item/menu-item.tsx | 4 +++- packages/calcite-components/src/components/menu/menu.tsx | 4 +++- .../calcite-components/src/components/modal/modal.tsx | 4 +++- .../src/components/navigation-logo/navigation-logo.tsx | 4 +++- .../src/components/navigation-user/navigation-user.tsx | 4 +++- .../src/components/navigation/navigation.tsx | 4 +++- .../calcite-components/src/components/notice/notice.tsx | 4 +++- .../src/components/pagination/pagination.tsx | 4 +++- .../calcite-components/src/components/panel/panel.tsx | 4 +++- .../calcite-components/src/components/popover/popover.tsx | 4 +++- .../components/radio-button-group/radio-button-group.tsx | 4 +++- .../src/components/radio-button/radio-button.tsx | 4 +++- .../calcite-components/src/components/rating/rating.tsx | 4 +++- .../components/segmented-control/segmented-control.tsx | 4 +++- .../calcite-components/src/components/select/select.tsx | 4 +++- .../calcite-components/src/components/sheet/sheet.tsx | 4 +++- .../calcite-components/src/components/slider/slider.tsx | 4 +++- .../src/components/sort-handle/sort-handle.tsx | 4 +++- .../src/components/split-button/split-button.tsx | 4 +++- .../src/components/stepper-item/stepper-item.tsx | 4 +++- .../calcite-components/src/components/switch/switch.tsx | 4 +++- .../src/components/table-cell/table-cell.tsx | 4 +++- .../src/components/table-header/table-header.tsx | 4 +++- .../src/components/text-area/text-area.tsx | 4 +++- .../src/components/tile-select/tile-select.tsx | 4 +++- packages/calcite-components/src/components/tile/tile.tsx | 4 +++- .../src/components/time-picker/time-picker.tsx | 4 +++- .../calcite-components/src/controllers/useFocusTrap.ts | 4 +++- packages/calcite-components/src/utils/component.ts | 2 +- packages/calcite-components/src/utils/dom.ts | 8 ++++++-- 71 files changed, 216 insertions(+), 74 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 9ecb327c10a..cc29a9b9e3a 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -115,7 +115,9 @@ export class AccordionItem extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 8fad1073eaa..db172130c47 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -175,7 +175,9 @@ export class ActionBar extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 43303e3681b..0b1e0fcd89b 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -101,7 +101,9 @@ export class ActionGroup extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index d4430cc8007..01cc3febed4 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -183,7 +183,9 @@ export class ActionMenu extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index b64109b5a7f..2ba408dd788 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -103,7 +103,9 @@ export class ActionPad extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index f9cfdaadda1..d222ea75cb4 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -137,7 +137,9 @@ export class Action extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 84f958e0c9b..23828941c16 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -170,7 +170,9 @@ export class Alert extends LitElement implements OpenCloseComponent { * * `@returns` {Promise} * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx index 9031c21cc34..ee0a3944654 100644 --- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx +++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx @@ -366,7 +366,7 @@ export class Autocomplete * top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element * behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). * }); - * @param options - allows specific coordinates to be defined. + * @param options * @returns - promise that resolves once the content is scrolled to. */ @method() @@ -387,7 +387,9 @@ export class Autocomplete /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} */ @method() diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx index 35d52bc31a6..1d16fc709f5 100755 --- a/packages/calcite-components/src/components/block-group/block-group.tsx +++ b/packages/calcite-components/src/components/block-group/block-group.tsx @@ -113,7 +113,9 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} */ @method() diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index b4266691a6a..110e0bdaf63 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -99,7 +99,9 @@ export class BlockSection extends LitElement { /** * Sets focus on the component's first tabbable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 1f30814d614..914f74324b2 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -205,7 +205,9 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose /** * Sets focus on the component's first tabbable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index ef5e8f515fa..acec0723361 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -193,7 +193,9 @@ export class Button /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx index 5e279a56c05..b5cb2fa118c 100644 --- a/packages/calcite-components/src/components/card-group/card-group.tsx +++ b/packages/calcite-components/src/components/card-group/card-group.tsx @@ -70,7 +70,9 @@ export class CardGroup extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index ee146dfbc72..b60d8e0dc7f 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -129,7 +129,9 @@ export class Card extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index fe4ab207eea..1077c15a35b 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -177,7 +177,9 @@ export class Carousel extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index caf816f378e..ba1aab8ae1f 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -146,7 +146,9 @@ export class Checkbox /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx index 598545cdf35..ee91db969c2 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -85,7 +85,9 @@ export class ChipGroup extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index b5d2cf1bbc9..d4e8cb006fe 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -138,7 +138,9 @@ export class Chip extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx index 69586c6f940..bcb1a60b458 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx @@ -104,7 +104,9 @@ export class ColorPickerHexInput extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 6de3da9c026..0870b835115 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -375,7 +375,9 @@ export class ColorPicker extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index be9ec787e29..177db19a937 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -510,7 +510,9 @@ export class Combobox /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx index e3655c36c24..c9b2369d2e3 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx @@ -107,7 +107,9 @@ export class DatePickerDay extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index 71b3e37f8d2..088d54c6466 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -158,7 +158,9 @@ export class DatePicker extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index ce49253c41e..a1359cf422d 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -254,7 +254,7 @@ export class Dialog extends LitElement implements OpenCloseComponent { * top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element * behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). * }); - * @param options - allows specific coordinates to be defined. + * @param options * @returns - promise that resolves once the content is scrolled to. */ @method() @@ -265,7 +265,9 @@ export class Dialog extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button (the first focusable item). * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} - A promise that is resolved when the operation has completed. */ @method() diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx index b206e2a9412..28f31e718f4 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx @@ -114,7 +114,9 @@ export class DropdownItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index 0ba2f9d1ee9..06d5ceb542a 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -204,7 +204,9 @@ export class Dropdown /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index a86c3a11e14..b6055930e35 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -78,7 +78,9 @@ export class Fab extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index f3a8dccab90..72c8d5354f7 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -134,7 +134,9 @@ export class Filter extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 8326e28595d..d5180350e2e 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -166,7 +166,9 @@ export class FlowItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns promise. */ @method() diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx index dee4fcc8277..c1fe3e63e70 100755 --- a/packages/calcite-components/src/components/flow/flow.tsx +++ b/packages/calcite-components/src/components/flow/flow.tsx @@ -93,7 +93,9 @@ export class Flow extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns Promise */ @method() diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index 16ca5a6ab54..e96c1a8bfde 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -92,7 +92,9 @@ export class Handle extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx index a8b630e14cf..513a4ec460d 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx @@ -104,7 +104,9 @@ export class InlineEditable extends LitElement implements InteractiveComponent, /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 72f35b0a0d7..e27f8b8b263 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -373,7 +373,9 @@ export class InputDatePicker /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index a84ed2a369e..5b3b10cda2d 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -363,7 +363,9 @@ export class InputNumber /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 8498743d2fa..2325f4e618a 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -296,7 +296,9 @@ export class InputText /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 52018d0f757..b34bf5d7104 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -240,7 +240,9 @@ export class InputTimePicker /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index a06fc511262..459e76466f9 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -234,7 +234,9 @@ export class InputTimeZone /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 653a0997417..d3b9b62d75b 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -420,7 +420,9 @@ export class Input /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index f61e2ab11f0..ef1a2c09747 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -83,7 +83,9 @@ export class Link extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index e6f96193fc0..bc6ba582e11 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -260,7 +260,9 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index f4d51365acf..87f6e63baa2 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -286,7 +286,9 @@ export class List extends LitElement implements InteractiveComponent, SortableCo /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} */ @method() diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx index abfbc66891e..8ed0d9c173b 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -129,7 +129,9 @@ export class MenuItem extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx index 522f4290497..5514693d96c 100644 --- a/packages/calcite-components/src/components/menu/menu.tsx +++ b/packages/calcite-components/src/components/menu/menu.tsx @@ -65,7 +65,9 @@ export class Menu extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 8f8db46ca2f..863e2743969 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -254,7 +254,9 @@ export class Modal extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button (the first focusable item). * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx index e2263cf84fa..fa2d1266f4e 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -77,7 +77,9 @@ export class NavigationLogo extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx index 013ef8fb529..0fe56dd5b66 100644 --- a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx +++ b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx @@ -55,7 +55,9 @@ export class NavigationUser extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx index 204f3f31378..fde597aeaf8 100644 --- a/packages/calcite-components/src/components/navigation/navigation.tsx +++ b/packages/calcite-components/src/components/navigation/navigation.tsx @@ -85,7 +85,9 @@ export class Navigation extends LitElement { /** * When `navigationAction` is `true`, sets focus on the component's action element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index 5a724ac6d6a..f17904d5397 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -112,7 +112,9 @@ export class Notice extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index 41b1c259d74..e5db180f2ae 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -144,7 +144,9 @@ export class Pagination extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 6cac48841b1..8ffbcf9a07a 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -208,7 +208,9 @@ export class Panel extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 59a037a0311..0ed2311888f 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -253,7 +253,9 @@ export class Popover extends LitElement implements FloatingUIComponent, OpenClos /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 147d4e6e53b..ba4cfdc7cd7 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -98,7 +98,9 @@ export class RadioButtonGroup extends LitElement { /** * Sets focus on the fist focusable `calcite-radio-button` element in the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index d6b4de1c351..8e5338d1dc7 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -127,7 +127,9 @@ export class RadioButton /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index 25ef5464bb1..78bb824208d 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -188,7 +188,9 @@ export class Rating /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index a0947d99095..604cc5f5999 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -153,7 +153,9 @@ export class SegmentedControl /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index ee3e9e485f8..5c9c2253001 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -167,7 +167,9 @@ export class Select /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index f7c7d756558..b5b3b5a3131 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -230,7 +230,9 @@ export class Sheet extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button - the first focusable item. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 1522a2961ea..ee6a558319f 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -327,7 +327,9 @@ export class Slider /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx index 64845eef8c6..d4d1714c3f1 100644 --- a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx +++ b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx @@ -120,7 +120,9 @@ export class SortHandle extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx index 114957146db..7e2097a2241 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -156,7 +156,9 @@ export class SplitButton extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx index d325a586117..49d7361d4fb 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -149,7 +149,9 @@ export class StepperItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index c587be4e660..2edce4c8053 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -89,7 +89,9 @@ export class Switch /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index a72b636c936..9a4e4877773 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -113,7 +113,9 @@ export class TableCell extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index cc6e6a4818c..11875937273 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -113,7 +113,9 @@ export class TableHeader extends LitElement { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index 5adfd6a8cd5..d263ada4de1 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -305,7 +305,9 @@ export class TextArea /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index 48707eb4a14..f2d5bf458d1 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -102,7 +102,9 @@ export class TileSelect extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index f358b16d1dc..f6447c99267 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -153,7 +153,9 @@ export class Tile extends LitElement implements InteractiveComponent, Selectable /** * Sets focus on the component. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx index 29fa3417b85..667cd833318 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -108,7 +108,9 @@ export class TimePicker extends LitElement implements TimeComponent { /** * Sets focus on the component's first focusable element. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @method() async setFocus(options?: FocusOptions): Promise { diff --git a/packages/calcite-components/src/controllers/useFocusTrap.ts b/packages/calcite-components/src/controllers/useFocusTrap.ts index 16be1887a76..f4f8ba4eaec 100644 --- a/packages/calcite-components/src/controllers/useFocusTrap.ts +++ b/packages/calcite-components/src/controllers/useFocusTrap.ts @@ -108,7 +108,9 @@ function toContainerArray(containers: FocusTrapOptions["extraContainers"] = []) * * Note: traps will be deactivated automatically when the component is disconnected. * - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ export const useFocusTrap = ( options: UseFocusTrapOptions, diff --git a/packages/calcite-components/src/utils/component.ts b/packages/calcite-components/src/utils/component.ts index c5b75f2bda9..63adf01f5f4 100644 --- a/packages/calcite-components/src/utils/component.ts +++ b/packages/calcite-components/src/utils/component.ts @@ -40,7 +40,7 @@ export function isHidden { + * async focusPart(): Promise { * await componentFocusable(this); * this.internalElement?.focus(); * } diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index 0b43988e0e4..d9d4f228b9e 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -269,7 +269,9 @@ export function isCalciteFocusable(el: FocusableElement): el is SetFocusable { * @param includeContainer When true, the container element will be considered as well. Note, this is only applicable when `setFocus` is not applicable. * @param strategy The focus strategy to use when finding the first focusable element. Defaults to "tabbable". * @param context The element invoking the focus – use when the host is focusable to short-circuit the focus call. - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ export async function focusElement( el: FocusableElement, @@ -311,7 +313,9 @@ export function getFirstTabbable(element: HTMLElement, includeContainer?: boolea * * @param {HTMLElement} element The html element containing tabbable elements. * @param {boolean} includeContainer When true, the container element will be considered as well. - * @param options + * @param options - Enables customization of focus behavior. + * + * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ export function focusFirstTabbable(element: HTMLElement, includeContainer?: boolean, options?: FocusOptions): void { getFirstTabbable(element, includeContainer)?.focus(options); From 8669b833d1eb6c39a5005dfe57c193d8f1d2c0b8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 23 Jul 2025 00:19:00 -0700 Subject: [PATCH 11/14] roll back a11y test group cleanup --- .../components/card-group/card-group.e2e.ts | 64 +++++++++---------- .../src/components/card/card.e2e.ts | 18 +++--- .../src/components/carousel/carousel.e2e.ts | 58 ++++++++--------- .../components/chip-group/chip-group.e2e.ts | 64 +++++++++---------- .../src/components/link/link.e2e.ts | 14 +--- .../src/components/switch/switch.e2e.ts | 10 ++- 6 files changed, 105 insertions(+), 123 deletions(-) diff --git a/packages/calcite-components/src/components/card-group/card-group.e2e.ts b/packages/calcite-components/src/components/card-group/card-group.e2e.ts index f609379562a..88902540137 100644 --- a/packages/calcite-components/src/components/card-group/card-group.e2e.ts +++ b/packages/calcite-components/src/components/card-group/card-group.e2e.ts @@ -33,42 +33,40 @@ describe("calcite-card-group", () => { ); }); - describe("accessible", () => { - describe("is accessible in selection mode none (default)", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("is accessible in selection mode none (default)", () => { + accessible( + html` + Heading + Heading + `, + ); + }); - describe("is accessible in selection mode single", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("is accessible in selection mode single", () => { + accessible( + html` + Heading + Heading + `, + ); + }); - describe("is accessible in selection mode single-persist", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("is accessible in selection mode single-persist", () => { + accessible( + html` + Heading + Heading + `, + ); + }); - describe("is accessible in selection mode multiple", () => { - accessible( - html` - Heading - Heading - `, - ); - }); + describe("is accessible in selection mode multiple", () => { + accessible( + html` + Heading + Heading + `, + ); }); describe("selection modes function as intended", () => { diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index c67cb8e3964..04d1688c366 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -24,17 +24,15 @@ describe("calcite-card", () => { }); describe("accessible", () => { - describe("default", () => { - accessible("calcite-card"); - }); + accessible("calcite-card"); + }); - describe("when selectable (deprecated)", () => { - accessible( - html` - Test image - `, - ); - }); + describe("accessible when selectable (deprecated)", () => { + accessible( + html` + Test image + `, + ); }); describe("slots", () => { diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts index 8cf2ecc18d1..c983457cada 100644 --- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts +++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts @@ -47,38 +47,36 @@ describe("calcite-carousel", () => { }); describe("accessible", () => { - describe("default", () => { - accessible( - html`

carousel item content

carousel item content

`, - ); - }); + accessible( + html`

carousel item content

carousel item content

`, + ); + }); - describe("with autoplay paused", () => { - accessible( - html`

carousel item content

carousel item content

`, - ); - }); + describe("accessible with autoplay paused", () => { + accessible( + html`

carousel item content

carousel item content

`, + ); + }); - describe("with autoplay when autoplay", () => { - accessible( - html`

carousel item content

carousel item content

`, - ); - }); + describe("accessible with autoplay when autoplay", () => { + accessible( + html`

carousel item content

carousel item content

`, + ); }); describe("translation support", () => { diff --git a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts index 9829b908072..3bd0ed8e2bb 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts @@ -35,42 +35,40 @@ describe("calcite-chip-group", () => { ); }); - describe("accessible", () => { - describe("selection mode none (default)", () => { - accessible( - html` - - - `, - ); - }); + describe("is accessible in selection mode none (default)", () => { + accessible( + html` + + + `, + ); + }); - describe("selection mode single", () => { - accessible( - html` - - - `, - ); - }); + describe("is accessible in selection mode single", () => { + accessible( + html` + + + `, + ); + }); - describe("selection mode single persists", () => { - accessible( - html` - - - `, - ); - }); + describe("is accessible in selection mode single persists", () => { + accessible( + html` + + + `, + ); + }); - describe("selection mode multiple", () => { - accessible( - html` - - - `, - ); - }); + describe("is accessible in selection mode multiple", () => { + accessible( + html` + + + `, + ); }); describe("selection modes function as intended", () => { diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts index 7998bb35072..1643b1d934b 100644 --- a/packages/calcite-components/src/components/link/link.e2e.ts +++ b/packages/calcite-components/src/components/link/link.e2e.ts @@ -24,17 +24,9 @@ describe("calcite-link", () => { }); describe("accessible", () => { - describe("default", () => { - accessible("link"); - }); - - describe("with href", () => { - accessible("link"); - }); - - describe("with href + icons", () => { - accessible("Go"); - }); + accessible("link"); + accessible("link"); + accessible("Go"); }); describe("disabled", () => { diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts index ba2ec4bcdac..3f4d3ecd0af 100644 --- a/packages/calcite-components/src/components/switch/switch.e2e.ts +++ b/packages/calcite-components/src/components/switch/switch.e2e.ts @@ -30,13 +30,11 @@ describe("calcite-switch", () => { }); describe("accessible", () => { - describe("unchecked", () => { - accessible(``); - }); + accessible(``); + }); - describe("checked", () => { - accessible(``); - }); + describe("accessible: checked", () => { + accessible(``); }); describe("labelable", () => { From f68c9de2fb61b420c376e6b2d10f7936954cbbce Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 23 Jul 2025 00:33:41 -0700 Subject: [PATCH 12/14] tidy up --- .../calcite-components/src/components/combobox/combobox.e2e.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 8b90f15aa5e..b20ae4a6fad 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -7,7 +7,6 @@ import { disabled, floatingUIOwner, focusable, - focusable, formAssociated, hidden, labelable, From 34533a7b66c1bd5135940f561c4f7bc496dacc37 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 23 Jul 2025 00:41:33 -0700 Subject: [PATCH 13/14] roll back unintentional doc update --- packages/calcite-components/src/controllers/useFocusTrap.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/calcite-components/src/controllers/useFocusTrap.ts b/packages/calcite-components/src/controllers/useFocusTrap.ts index f4f8ba4eaec..16be1887a76 100644 --- a/packages/calcite-components/src/controllers/useFocusTrap.ts +++ b/packages/calcite-components/src/controllers/useFocusTrap.ts @@ -108,9 +108,7 @@ function toContainerArray(containers: FocusTrapOptions["extraContainers"] = []) * * Note: traps will be deactivated automatically when the component is disconnected. * - * @param options - Enables customization of focus behavior. - * - * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) + * @param options */ export const useFocusTrap = ( options: UseFocusTrapOptions, From 49aa5a41f3cd6a79a373ac44b29f54ef4e92ab80 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 23 Jul 2025 10:58:10 -0700 Subject: [PATCH 14/14] update doc --- .../src/components/accordion-item/accordion-item.tsx | 2 +- .../src/components/action-bar/action-bar.tsx | 2 +- .../src/components/action-group/action-group.tsx | 2 +- .../src/components/action-menu/action-menu.tsx | 2 +- .../src/components/action-pad/action-pad.tsx | 2 +- packages/calcite-components/src/components/action/action.tsx | 2 +- packages/calcite-components/src/components/alert/alert.tsx | 2 +- .../src/components/autocomplete/autocomplete.tsx | 2 +- .../src/components/block-group/block-group.tsx | 2 +- .../src/components/block-section/block-section.tsx | 2 +- packages/calcite-components/src/components/block/block.tsx | 2 +- packages/calcite-components/src/components/button/button.tsx | 2 +- .../src/components/card-group/card-group.tsx | 2 +- packages/calcite-components/src/components/card/card.tsx | 2 +- .../calcite-components/src/components/carousel/carousel.tsx | 2 +- .../calcite-components/src/components/checkbox/checkbox.tsx | 2 +- .../src/components/chip-group/chip-group.tsx | 2 +- packages/calcite-components/src/components/chip/chip.tsx | 2 +- .../color-picker-hex-input/color-picker-hex-input.tsx | 2 +- .../src/components/color-picker/color-picker.tsx | 2 +- .../calcite-components/src/components/combobox/combobox.tsx | 2 +- .../src/components/date-picker-day/date-picker-day.tsx | 2 +- .../src/components/date-picker/date-picker.tsx | 2 +- packages/calcite-components/src/components/dialog/dialog.tsx | 2 +- .../src/components/dropdown-item/dropdown-item.tsx | 2 +- .../calcite-components/src/components/dropdown/dropdown.tsx | 2 +- packages/calcite-components/src/components/fab/fab.tsx | 2 +- packages/calcite-components/src/components/filter/filter.tsx | 2 +- .../calcite-components/src/components/flow-item/flow-item.tsx | 2 +- packages/calcite-components/src/components/flow/flow.tsx | 2 +- packages/calcite-components/src/components/handle/handle.tsx | 2 +- .../src/components/inline-editable/inline-editable.tsx | 2 +- .../src/components/input-date-picker/input-date-picker.tsx | 2 +- .../src/components/input-number/input-number.tsx | 2 +- .../src/components/input-text/input-text.tsx | 2 +- .../src/components/input-time-picker/input-time-picker.tsx | 2 +- .../src/components/input-time-zone/input-time-zone.tsx | 2 +- packages/calcite-components/src/components/input/input.tsx | 2 +- packages/calcite-components/src/components/link/link.tsx | 2 +- .../calcite-components/src/components/list-item/list-item.tsx | 2 +- packages/calcite-components/src/components/list/list.tsx | 2 +- .../calcite-components/src/components/menu-item/menu-item.tsx | 2 +- packages/calcite-components/src/components/menu/menu.tsx | 2 +- packages/calcite-components/src/components/modal/modal.tsx | 2 +- .../src/components/navigation-logo/navigation-logo.tsx | 2 +- .../src/components/navigation-user/navigation-user.tsx | 2 +- .../src/components/navigation/navigation.tsx | 2 +- packages/calcite-components/src/components/notice/notice.tsx | 2 +- .../src/components/pagination/pagination.tsx | 2 +- packages/calcite-components/src/components/panel/panel.tsx | 2 +- .../calcite-components/src/components/popover/popover.tsx | 2 +- .../src/components/radio-button-group/radio-button-group.tsx | 2 +- .../src/components/radio-button/radio-button.tsx | 2 +- packages/calcite-components/src/components/rating/rating.tsx | 2 +- .../src/components/segmented-control/segmented-control.tsx | 2 +- packages/calcite-components/src/components/select/select.tsx | 2 +- packages/calcite-components/src/components/sheet/sheet.tsx | 2 +- packages/calcite-components/src/components/slider/slider.tsx | 2 +- .../src/components/sort-handle/sort-handle.tsx | 2 +- .../src/components/split-button/split-button.tsx | 2 +- .../src/components/stepper-item/stepper-item.tsx | 2 +- packages/calcite-components/src/components/switch/switch.tsx | 2 +- .../src/components/table-cell/table-cell.tsx | 2 +- .../src/components/table-header/table-header.tsx | 2 +- .../calcite-components/src/components/text-area/text-area.tsx | 2 +- .../src/components/tile-select/tile-select.tsx | 2 +- packages/calcite-components/src/components/tile/tile.tsx | 2 +- .../src/components/time-picker/time-picker.tsx | 2 +- packages/calcite-components/src/utils/dom.ts | 4 ++-- 69 files changed, 70 insertions(+), 70 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index cc29a9b9e3a..1b4e5b2e387 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -115,7 +115,7 @@ export class AccordionItem extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index db172130c47..573ee782fa8 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -175,7 +175,7 @@ export class ActionBar extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 0b1e0fcd89b..46df96ff3c1 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -101,7 +101,7 @@ export class ActionGroup extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 01cc3febed4..63aff4ee8fa 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -183,7 +183,7 @@ export class ActionMenu extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 2ba408dd788..7b7d7ea2d86 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -103,7 +103,7 @@ export class ActionPad extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index d222ea75cb4..38b673ab50a 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -137,7 +137,7 @@ export class Action extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 23828941c16..a2a4690ebb8 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -170,7 +170,7 @@ export class Alert extends LitElement implements OpenCloseComponent { * * `@returns` {Promise} * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx index ee0a3944654..d89308b2517 100644 --- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx +++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx @@ -387,7 +387,7 @@ export class Autocomplete /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx index 1d16fc709f5..a36c76697eb 100755 --- a/packages/calcite-components/src/components/block-group/block-group.tsx +++ b/packages/calcite-components/src/components/block-group/block-group.tsx @@ -113,7 +113,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 110e0bdaf63..f0b7e63bbe8 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -99,7 +99,7 @@ export class BlockSection extends LitElement { /** * Sets focus on the component's first tabbable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 914f74324b2..77db2b9d197 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -205,7 +205,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose /** * Sets focus on the component's first tabbable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index acec0723361..c29d91dc42e 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -193,7 +193,7 @@ export class Button /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx index b5cb2fa118c..a0a18748c3f 100644 --- a/packages/calcite-components/src/components/card-group/card-group.tsx +++ b/packages/calcite-components/src/components/card-group/card-group.tsx @@ -70,7 +70,7 @@ export class CardGroup extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index b60d8e0dc7f..17d7ec66ba9 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -129,7 +129,7 @@ export class Card extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index 1077c15a35b..9d08d5f6a87 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -177,7 +177,7 @@ export class Carousel extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index ba1aab8ae1f..f43f0ac4440 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -146,7 +146,7 @@ export class Checkbox /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx index ee91db969c2..e13d571302b 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -85,7 +85,7 @@ export class ChipGroup extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index d4e8cb006fe..be30ecbdd9b 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -138,7 +138,7 @@ export class Chip extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx index bcb1a60b458..158bbc0a03b 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx @@ -104,7 +104,7 @@ export class ColorPickerHexInput extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 0870b835115..96ba7998b7b 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -375,7 +375,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 177db19a937..6b7003688ef 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -510,7 +510,7 @@ export class Combobox /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx index c9b2369d2e3..ea2462f88e3 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx @@ -107,7 +107,7 @@ export class DatePickerDay extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index 088d54c6466..bd4c9800507 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -158,7 +158,7 @@ export class DatePicker extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index a1359cf422d..c01fdbdc1b6 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -265,7 +265,7 @@ export class Dialog extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button (the first focusable item). * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} - A promise that is resolved when the operation has completed. diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx index 28f31e718f4..b6385d03677 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx @@ -114,7 +114,7 @@ export class DropdownItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index 06d5ceb542a..2fccaefc596 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -204,7 +204,7 @@ export class Dropdown /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index b6055930e35..c5ddf5a8fd6 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -78,7 +78,7 @@ export class Fab extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index 72c8d5354f7..5905566a5c6 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -134,7 +134,7 @@ export class Filter extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index d5180350e2e..78df6ae75db 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -166,7 +166,7 @@ export class FlowItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns promise. diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx index c1fe3e63e70..ab497022438 100755 --- a/packages/calcite-components/src/components/flow/flow.tsx +++ b/packages/calcite-components/src/components/flow/flow.tsx @@ -93,7 +93,7 @@ export class Flow extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns Promise diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index e96c1a8bfde..a37813699c7 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -92,7 +92,7 @@ export class Handle extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx index 513a4ec460d..0b6e71a6889 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx @@ -104,7 +104,7 @@ export class InlineEditable extends LitElement implements InteractiveComponent, /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index e27f8b8b263..faefabbb658 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -373,7 +373,7 @@ export class InputDatePicker /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 5b3b10cda2d..0994c63ec2e 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -363,7 +363,7 @@ export class InputNumber /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 2325f4e618a..5d5404f1e57 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -296,7 +296,7 @@ export class InputText /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index b34bf5d7104..095db25fd84 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -240,7 +240,7 @@ export class InputTimePicker /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index 459e76466f9..8e573657d85 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -234,7 +234,7 @@ export class InputTimeZone /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index d3b9b62d75b..6fa9dcfbd46 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -420,7 +420,7 @@ export class Input /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index ef1a2c09747..5d4511f7a80 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -83,7 +83,7 @@ export class Link extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index bc6ba582e11..52c29848928 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -260,7 +260,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 87f6e63baa2..745f6dc63a5 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -286,7 +286,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) * @returns {Promise} diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx index 8ed0d9c173b..f4fadb1acab 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -129,7 +129,7 @@ export class MenuItem extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx index 5514693d96c..d3b98c0dc6a 100644 --- a/packages/calcite-components/src/components/menu/menu.tsx +++ b/packages/calcite-components/src/components/menu/menu.tsx @@ -65,7 +65,7 @@ export class Menu extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 863e2743969..f22606ddd6c 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -254,7 +254,7 @@ export class Modal extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button (the first focusable item). * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx index fa2d1266f4e..d7098f96d30 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -77,7 +77,7 @@ export class NavigationLogo extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx index 0fe56dd5b66..d78d64f7f9b 100644 --- a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx +++ b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx @@ -55,7 +55,7 @@ export class NavigationUser extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx index fde597aeaf8..45af2292194 100644 --- a/packages/calcite-components/src/components/navigation/navigation.tsx +++ b/packages/calcite-components/src/components/navigation/navigation.tsx @@ -85,7 +85,7 @@ export class Navigation extends LitElement { /** * When `navigationAction` is `true`, sets focus on the component's action element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index f17904d5397..c2d0f8ae36c 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -112,7 +112,7 @@ export class Notice extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index e5db180f2ae..96e59bd15ce 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -144,7 +144,7 @@ export class Pagination extends LitElement { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 8ffbcf9a07a..5485afe29d5 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -208,7 +208,7 @@ export class Panel extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 0ed2311888f..bdbd3c87cbf 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -253,7 +253,7 @@ export class Popover extends LitElement implements FloatingUIComponent, OpenClos /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index ba4cfdc7cd7..e05ba507959 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -98,7 +98,7 @@ export class RadioButtonGroup extends LitElement { /** * Sets focus on the fist focusable `calcite-radio-button` element in the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index 8e5338d1dc7..806b6b514e7 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -127,7 +127,7 @@ export class RadioButton /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index 78bb824208d..6d2a9aa9b17 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -188,7 +188,7 @@ export class Rating /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 604cc5f5999..26111ce8d8a 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -153,7 +153,7 @@ export class SegmentedControl /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 5c9c2253001..1f76ae4f986 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -167,7 +167,7 @@ export class Select /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index b5b3b5a3131..8863f782c06 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -230,7 +230,7 @@ export class Sheet extends LitElement implements OpenCloseComponent { /** * Sets focus on the component's "close" button - the first focusable item. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index ee6a558319f..a9f07042c13 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -327,7 +327,7 @@ export class Slider /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx index d4d1714c3f1..f5596663484 100644 --- a/packages/calcite-components/src/components/sort-handle/sort-handle.tsx +++ b/packages/calcite-components/src/components/sort-handle/sort-handle.tsx @@ -120,7 +120,7 @@ export class SortHandle extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx index 7e2097a2241..f44ada708e0 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -156,7 +156,7 @@ export class SplitButton extends LitElement implements InteractiveComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx index 49d7361d4fb..7e507cfae1e 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -149,7 +149,7 @@ export class StepperItem extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index 2edce4c8053..123f26eefcc 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -89,7 +89,7 @@ export class Switch /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 9a4e4877773..42f6f3d1e1d 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -113,7 +113,7 @@ export class TableCell extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 11875937273..d857da73d63 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -113,7 +113,7 @@ export class TableHeader extends LitElement { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index d263ada4de1..2ee09ffeb9e 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -305,7 +305,7 @@ export class TextArea /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index f2d5bf458d1..25568544704 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -102,7 +102,7 @@ export class TileSelect extends LitElement implements InteractiveComponent { /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index f6447c99267..db1581c0515 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -153,7 +153,7 @@ export class Tile extends LitElement implements InteractiveComponent, Selectable /** * Sets focus on the component. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx index 667cd833318..22e4965433e 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -108,7 +108,7 @@ export class TimePicker extends LitElement implements TimeComponent { /** * Sets focus on the component's first focusable element. * - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index d9d4f228b9e..304f11fb411 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -269,7 +269,7 @@ export function isCalciteFocusable(el: FocusableElement): el is SetFocusable { * @param includeContainer When true, the container element will be considered as well. Note, this is only applicable when `setFocus` is not applicable. * @param strategy The focus strategy to use when finding the first focusable element. Defaults to "tabbable". * @param context The element invoking the focus – use when the host is focusable to short-circuit the focus call. - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ @@ -313,7 +313,7 @@ export function getFirstTabbable(element: HTMLElement, includeContainer?: boolea * * @param {HTMLElement} element The html element containing tabbable elements. * @param {boolean} includeContainer When true, the container element will be considered as well. - * @param options - Enables customization of focus behavior. + * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */