lightning-base-components 1.19.7-alpha → 1.19.9-alpha

package/src/lightning/dialog/__examples__/basic/basic.html

@@ -1,22 +0,0 @@
-<template>
-    <lightning-dialog header="Create Contact" onclose={handleDialogClose} oncancel={handleDialogCancel}>
-        <lightning-input-name label="Contact Name"></lightning-input-name>
-        <div slot="footer">
-            <button class="slds-button slds-button_brand" onclick={handleCancel}>Cancel</button>
-            <button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
-        </div>
-    </lightning-dialog>
-
-    <template if:true={enteredName}>
-        Entered Name: {enteredName}
-    </template>
-
-    <div>
-        <lightning-button-icon
-            label="Create Contact"
-            icon-name="utility:add"
-            onclick={openCreateContactDialog}>
-        </lightning-button-icon>
-    </div>
-
-</template>

package/src/lightning/dialog/__examples__/basic/basic.js

@@ -1,24 +0,0 @@
-import { LightningElement, track } from 'lwc';
-
-export default class ModalDialogExample extends LightningElement {
-    @track enteredName = '';
-
-    openCreateContactDialog() {
-        this.dialog.showModal();
-    }
-
-    handleCancel() {
-        this.dialog.close();
-    }
-
-    handleSave() {
-        const name = this.template.querySelector('lightning-input-name');
-        this.enteredName = `${name.firstName} ${name.lastName}`;
-
-        this.dialog.close();
-    }
-
-    get dialog() {
-        return this.template.querySelector('lightning-dialog');
-    }
-}

package/src/lightning/dialog/__requirements__/requirements.md

@@ -1,20 +0,0 @@
-### Specification
-
--   The modal accepts a “header” as a string attribute.
--   The modal accepts content in the form of the default slot.
--   The modal accepts a footer in the form of the named “footer” slot.
--   When opening a modal, the focus goes to the first tabbable element (we define this as a visible/non-disabled element that has a tabIndex of 0 and is not within a custom element with tabindex attribute of “-1" on it));
-    if none, then the focus is set on the close "x" button.
--   When opening a modal dialog, all the modal dialog's sibling nodes (including up the tree) will have aria-hidden=true to make them inert from accessibility perspective.
--   When a modal dialog is showing, a backdrop appears blocking any mouse interactions.
--   When a modal dialog is showing the focus is trapped for both sequential Tabs and Shift-Tabs, after the last tabbable element of the modal the focus needs to go to the close button, and if using Shift-Tab on the close button, the focus goes on the last tabbable element.
--   When the last tabbable element of the modal dialog is either removed or changed order the focus trapping should continue to work in the manner described above.
--   When the last tabbable is still in the DOM but no longer last, it will have its keydown listener removed and tabbing from it will lead to the next element.
--   When a dialog is closed, a 'close' event is dispatched.
--   When a dialog is closed, the focus returns to the element that was in focus before opening of the modal dialog. If no such element is found, document.body is focused.
--   When closing a modal dialog, the aria-hiddens of the modal dialog's sibling nodes are restored to their previous values (that is, if an element had aria-hidden="true" it will be preserved).
--   Clicking on the "x" (close) button closes the dialog and dispatches the 'close' and 'cancel' events (the latter is cancelable).
--   Pressing "Escape" closes the dialog, and dispatches 'close' and 'cancel' events (the latter is cancelable).
--   Opening and closing of the same dialog is possible (and will not leave any dangling references or extra DOM elements).
--   When opening a modal and there is another modal already opened, the second modal will not show and a console warning will appear.
--   Preventing the default behaviour of the 'cancel' event prevents the dialog from closing.

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -1,182 +0,0 @@
----
-examples:
-    - name: simple
-      label: Simple Dual Listbox
-      description: A simple dual listbox with options. Use the onchange event handler to capture what's selected.
-    - name: selected
-      label: Dual Listbox with Default Selected Options
-      description: This dual listbox shows some pre-selected options.
-    - name: required
-      label: Dual Listbox with Required Selected Options
-      description: This dual listbox shows required selected options.
-    - name: minmax
-      label: Dual listbox with Minimum and Maximum Required Options
-      description: This dual listbox requires you to select a minimum and maximum number of options.
----
-
-A `lightning-dual-listbox` component represents two side-by-side listboxes.
-Select one or more options in the list on the left. Move selected options to
-the list on the right. The order of the selected options is maintained and you
-can reorder options.
-
-Here's an example that creates a simple dual listbox with 8 options. Options
-7, 2 and 3 are selected under the second listbox. Options 2 and 7
-are required options.
-
-```html
-<template>
-    <lightning-dual-listbox
-        id="selectOptions"
-        name="Select Options"
-        label="Select Options"
-        source-label="Available Options"
-        selected-label="Selected Options"
-        options={listOptions}
-        value={defaultOptions}
-        required-options={requiredOptions}
-        onchange={handleChange}
-    >
-    </lightning-dual-listbox>
-</template>
-```
-
-```javascript
-import { LightningElement } from 'lwc';
-export default class MyComponentName extends LightningElement {
-    listOptions = [
-        { value: '1', label: 'Option 1' },
-        { value: '2', label: 'Option 2' },
-        { value: '3', label: 'Option 3' },
-        { value: '4', label: 'Option 4' },
-        { value: '5', label: 'Option 5' },
-        { value: '6', label: 'Option 6' },
-        { value: '7', label: 'Option 7' },
-        { value: '8', label: 'Option 8' },
-    ];
-
-    defaultOptions = ['7', '2', '3'];
-
-    requiredOptions = ['2', '7'];
-
-    handleChange(event) {
-        // Get the list of the "value" attribute on all the selected options
-        const selectedOptionsList = event.detail.value;
-        alert(`Options selected: ${selectedOptionsList}`);
-    }
-}
-```
-
-To specify the number of options users can select, use the `min` and `max`
-attributes. For example, if you set `min` to 3 and `max` to 8, users must
-select at least 3 options and at most 8 options.
-
-#### Input Validation
-
-Client-side input validation is available for this component. Note that disabled fields are always valid.
-
-To check the validity states of the input, use the `validity` attribute to return an object with read-only `boolean` attributes.
-
--   `rangeOverflow`
--   `rangeUnderflow`
--   `valueMissing`
--   `valid`
-    For more information on the `validity` attribute, see [lightning-input](bundle/lightning-input/documentation).
-
-#### Error Messages
-
-When an input validation fails, the following messages are displayed by default.
-
--   `rangeOverflow`: Select at most [max] options
--   `rangeUnderflow`: At least [min] options must be selected
--   `valueMissing`: An option must be selected
-
-[max] and [min] refer to the numerical values for the `max` and `min` attributes you provide.
-
-You can override the default messages by providing your own values for these attributes: `message-when-range-overflow`, `message-when-range-underflow`, and `message-when-value-missing`.
-
-#### Custom Validity Error Messages
-
-To programmatically display error messages on invalid fields, use the `reportValidity()` method. For custom validity error messages, display the message using `setCustomValidity()` and `reportValidity()`. For more information, see [lightning-input](bundle/lightning-input/documentation).
-
-#### Component Styling
-
-`lightning-dual-listbox` implements the [Dueling Picklist](https://www.lightningdesignsystem.com/components/dueling-picklist/) blueprint
-in the Salesforce Lightning Design System (SLDS).
-
-##### Variants
-
-Use the `variant` attribute with one of these values to position the labels differently relative to the picklist field.
-
--   `standard` is the default
--   `label-hidden` hides the label visually but makes it available to assistive technology. If you provide a value for `field-level-help`, the tooltip icon is still displayed.
--   `label-inline` aligns the label next to the picklist field
--   `label-stacked` places the label above the picklist field
-
-##### Customize Component Styling
-
-To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
-
-To customize the SLDS styles on the "Move selection to Selected" or "Move selection up" buttons, use SLDS styling hooks. For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
-
-#### Usage Considerations
-
-To retrieve the selected values, use the `onchange` handler.
-
-```
-handleChange(event) {
-    // Retrieve an array of the selected options
-    const selectedOptionsList = event.detail.value;
-    alert(`Options selected: ${selectedOptionsList}`);
-}
-```
-
-The `onchange` handler is triggered when you click the left and right buttons to
-move options from one list to another or when you change the order of options
-in the selected options list.
-
-#### Accessibility
-
-Use the following keyboard shortcuts to work with dual listboxes.
-
--   Click - Select a single option.
--   Cmd+Click - Select multiple options or deselect selected options.
--   Shift+Click - Select all options between the current and last clicked option.
-
-When focus is on options:
-
--   Up Arrow - Move selection to previous option.
--   Down Arrow - Move selection to next option.
--   Cmd/Ctrl+Up Arrow - Move focus to previous option.
--   Cmd/Ctrl+Down Arrow - Move focus to next option.
--   Ctrl+Space - Toggle selection of focused option.
--   Cmd/Ctrl+Right Arrow - Move selected options to right listbox.
--   Cmd/Ctrl+Left Arrow - Move selected options to left listbox.
--   Tab - Move focus to the buttons or between boxes.
-
-When focus is on a button:
-
--   Enter - Perform the operation associated with that button.
-
-#### Custom Events
-
-**`change`**
-
-The event fired when an item is selected in the combobox.
-
-The `change` event returns the following parameter.
-
-| Parameter | Type   | Description                               |
-| --------- | ------ | ----------------------------------------- |
-| value     | string | A comma-separated list of selected items. |
-
-The event properties are as follows.
-
-| Property   | Value | Description                                                                                               |
-| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
-| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
-| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
-| composed   | true  | This event propagates outside of the component in which it was dispatched.                                |
-
-#### Source Code
-
-`lightning-dual-listbox` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/dualListbox/__examples__/minmax/minmax.html

@@ -1,12 +0,0 @@
-<template>
-    <lightning-dual-listbox name="languages"
-                            label="Select Options (at least 5 and at most 10)"
-                            source-label="Available"
-                            selected-label="Selected"
-                            field-level-help="This is a dual listbox"
-                            options={options}
-                            min={min}
-                            max={max}
-                            value={values}></lightning-dual-listbox>
-
-</template>

package/src/lightning/dualListbox/__examples__/minmax/minmax.js

@@ -1,27 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DualListboxMinMax extends LightningElement {
-    options = [];
-    values = [];
-    requiredOptions = [];
-
-    get min() {
-        return 5;
-    }
-
-    get max() {
-        return 10;
-    }
-
-    connectedCallback() {
-        const items = [];
-        for (let i = 1; i <= 15; i++) {
-            items.push({
-                label: `Option ${i}`,
-                value: `opt${i}`,
-            });
-        }
-        this.options.push(...items);
-        this.values.push(...['opt2', 'opt4', 'opt6']);
-    }
-}

package/src/lightning/dualListbox/__examples__/required/required.html

@@ -1,11 +0,0 @@
-<template>
-    <lightning-dual-listbox name="languages"
-                            label="Select Options (Option 2 and Option 5 are required)"
-                            source-label="Available"
-                            selected-label="Selected"
-                            field-level-help="This is a dual listbox"
-                            options={options}
-                            required-options={requiredOptions}
-                            value={values}></lightning-dual-listbox>
-
-</template>

package/src/lightning/dualListbox/__examples__/required/required.js

@@ -1,20 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DualListboxRequired extends LightningElement {
-    options = [];
-    values = [];
-    requiredOptions = [];
-
-    connectedCallback() {
-        const items = [];
-        for (let i = 1; i <= 10; i++) {
-            items.push({
-                label: `Option ${i}`,
-                value: `opt${i}`,
-            });
-        }
-        this.options.push(...items);
-        this.values.push(...['opt2', 'opt4', 'opt6']);
-        this.requiredOptions.push(...['opt2', 'opt5']);
-    }
-}

package/src/lightning/dualListbox/__examples__/selected/selected.html

@@ -1,10 +0,0 @@
-<template>
-    <lightning-dual-listbox name="languages"
-                            label="Select Languages"
-                            source-label="Available"
-                            selected-label="Selected"
-                            field-level-help="This is a dual listbox"
-                            options={options}
-                            value={values}></lightning-dual-listbox>
-
-</template>

package/src/lightning/dualListbox/__examples__/selected/selected.js

@@ -1,18 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DualListboxSelected extends LightningElement {
-    options = [];
-    values = [];
-
-    connectedCallback() {
-        const items = [];
-        for (let i = 1; i <= 10; i++) {
-            items.push({
-                label: `Option ${i}`,
-                value: `opt${i}`,
-            });
-        }
-        this.options.push(...items);
-        this.values.push(...['opt2', 'opt4', 'opt6']);
-    }
-}

package/src/lightning/dualListbox/__examples__/simple/simple.html

@@ -1,12 +0,0 @@
-<template>
-    <lightning-dual-listbox name="languages"
-                            label="Select Languages"
-                            source-label="Available"
-                            selected-label="Selected"
-                            field-level-help="Select your preferred languages"
-                            options={options}
-                            onchange={handleChange}></lightning-dual-listbox>
-    <div class="slds-box" >
-        <p>Selected values are: {selected}</p>
-    </div>
-</template>

package/src/lightning/dualListbox/__examples__/simple/simple.js

@@ -1,24 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DualListboxSimple extends LightningElement {
-    _selected = [];
-
-    get options() {
-        return [
-            { label: 'English', value: 'en' },
-            { label: 'German', value: 'de' },
-            { label: 'Spanish', value: 'es' },
-            { label: 'French', value: 'fr' },
-            { label: 'Italian', value: 'it' },
-            { label: 'Japanese', value: 'ja' },
-        ];
-    }
-
-    get selected() {
-        return this._selected.length ? this._selected : 'none';
-    }
-
-    handleChange(e) {
-        this._selected = e.detail.value;
-    }
-}

package/src/lightning/dynamicIcon/__docs__/dynamicIcon.md

@@ -1,66 +0,0 @@
----
-examples:
-    - name: ellie
-      label: Ellie Icon
-      description: Displays a pulsing blue circle, which pulses and stops after one animation cycle.
-    - name: eq
-      label: EQ Icon
-      description: Displays an animated graph with three bars that rise and fall randomly.
-    - name: score
-      label: Score Icon
-      description: Displays a green filled circle or a red unfilled circle.
-    - name: strength
-      label: Strength Icon
-      description: Displays three animated horizontal circles that are colored green or red.
-    - name: trend
-      label: Trend Icon
-      description: Displays animated arrows that point up, down, or straight.
-    - name: waffle
-      label: Waffle Icon
-      description: Displays a 3x3 grid of dots that animates on hover.
----
-
-A `lightning-dynamic-icon` component visually indicates an event that's in
-progress, such as a graph that's loading.
-
-This component inherits styling from
-[dynamic icons](https://www.lightningdesignsystem.com/components/dynamic-icons/) in the
-Lightning Design System.
-
-Here's an example of an ellie icon with alternative text.
-
-```html
-<template>
-    <lightning-dynamic-icon
-        type="ellie"
-        alternative-text="Your calculation is running."
-    >
-    </lightning-dynamic-icon>
-</template>
-```
-
-#### Usage Considerations
-
-The following `type` options are available.
-
--   Use the `type="ellie"` attribute to show a pulsing blue circle, which pulses and stops after one animation cycle. This icon is great for field calculations or a process that's running in the background.
--   Use the `type="eq"` attribute to show an animated graph with three bars that rise and fall randomly. This icon is great for a graph that's refreshing.
--   Use the `type="score"` attribute to show a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
--   Use the `type="strength"` attribute to show three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
--   Use the `type="trend"` attribute to show animated arrows that point up, down, or straight. This icon is great for showing movement of a value from one range to another, like a forecast score.
--   Use the `type="waffle"` attribute to show a square made up of a 3x3 grid of circles. This icon animates on hover. This icon is great for app-related items, like the App Launcher in Lightning Experience.
-
-#### Accessibility
-
-Optionally, you can use the `alternative-text` attribute to describe the
-`lightning-dynamic-icon`.
-
-Sometimes a `lightning-dynamic-icon` is decorative and doesn't need a description.
-However, on smaller screens and windows the `lightning-dynamic-icon` can also be
-informational. In this case, include `alternative-text`. If you don't include
-`alternative-text`, check smaller screens and windows to ensure that the
-`lightning-dynamic-icon` is only decorative on all formats.
-
-#### Source Code
-
-`lightning-dynamic-icon` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/dynamicIcon/__examples__/ellie/ellie.html

@@ -1,9 +0,0 @@
-<template>
-    <p>
-        The ellie icon is a pulsing blue circle, which pulses and stops after one animation cycle.
-    </p>
-    <lightning-dynamic-icon 
-        type="ellie" 
-        alternative-text="Ellie intelligence">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/ellie/ellie.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconEllie extends LightningElement {}

package/src/lightning/dynamicIcon/__examples__/eq/eq.html

@@ -1,10 +0,0 @@
-<template>
-    <p>
-        EQ Icon - The eq icon displays an animated graph with three bars that rise and fall randomly.
-    </p>
-    <lightning-dynamic-icon
-        type="eq"
-        option="play"
-        alternative-text="Recording in progress">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/eq/eq.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconEq extends LightningElement {}

package/src/lightning/dynamicIcon/__examples__/score/score.html

@@ -1,10 +0,0 @@
-<template>
-    <p>
-        The score icon is a green filled circle or a red unfilled circle.
-    </p>
-    <lightning-dynamic-icon 
-        type="score" 
-        option="negative" 
-        alternative-text="Negative score">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/score/score.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconScore extends LightningElement {}

package/src/lightning/dynamicIcon/__examples__/strength/strength.html

@@ -1,10 +0,0 @@
-<template>
-    <p>
-        The strength icon displays three animated horizontal circles that are colored green or red.
-    </p>
-    <lightning-dynamic-icon 
-        type="strength" 
-        option="2" 
-        alternative-text="Strength: 2">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/strength/strength.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconStrength extends LightningElement {}

package/src/lightning/dynamicIcon/__examples__/trend/trend.html

@@ -1,10 +0,0 @@
-<template>
-    <p>
-        The trend icon displays animated arrows that point up, down, or straight.
-    </p>
-    <lightning-dynamic-icon 
-        type="trend" 
-        option="down" 
-        alternative-text="Trending down">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/trend/trend.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconTrend extends LightningElement {}

package/src/lightning/dynamicIcon/__examples__/waffle/waffle.html

@@ -1,9 +0,0 @@
-<template>
-    <p>
-        The waffle icon is a square made up of a 3x3 grid of circles. This icon animates on hover.
-    </p>
-    <lightning-dynamic-icon 
-        type="waffle" 
-        alternative-text="Application launcher">
-    </lightning-dynamic-icon>
-</template>

package/src/lightning/dynamicIcon/__examples__/waffle/waffle.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class DynamicIconWaffle extends LightningElement {}

package/src/lightning/fileDownload/__docs__/fileDownload.md

@@ -1,41 +0,0 @@
-Add file downloads to Experience Cloud sites that use the Build Your Own (LWR) template.
-
-To create a component that downloads a file, import `generateUrl` from `lightning/fileDownload`. Use the `generateUrl` function and pass in the record ID number of the files that you want to download. This function supports Content Document, Content Version, Attachment, or Document record IDs.
-
-This example returns a download URL that you can pass into `window.open` to download the file.
-
-```javascript
-import { generateUrl } from 'lightning/fileDownload';
-const url = generateUrl(recordId);
-window.open(url);
-```
-
-In this example, clicking a download button on a record generates a URL and uses it to download the record's files.
-
-```HTML
-<template>
-  <div>
-      <lightning-input type="text" label="File download for the record" value={recordId}></lightning-input>
-      <lightning-button label="Download" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-  </div>
-</template>
-```
-
-```Javascript
-import { LightningElement } from 'lwc';
-import { generateUrl } from 'lightning/fileDownload';
-export default class Download extends LightningElement {
-    recordId;
-    url;
-    handleClick() {
-        this.url = generateUrl(this.recordId);
-        window.open(this.url)
-    }
-}
-```
-
-#### Considerations
-
-- Authenticated users can download any files they have access to. Unauthenticated users can only download Content Document files that they can access with a Library membership.
-
-- The `recordId` parameter in `generateUrl` accepts IDs for Content Document, Content Version, Attachment, or Document files.

package/src/lightning/focusTrap/__requirements__/requirements.md

@@ -1,29 +0,0 @@
--   The component must accept a default slot
--   When a component within the slot has focus, the focus is trapped, in the following way:
-    -   When on the first tabbable (see definition below) element and `Shift-Tab` is pressed, the focus should go to the last tabbable element
-    -   When on the last tabbable element and `Tab` is pressed, the focus should go to the first tabbable element
--   Has `focus` method, when invoked:
-    -   If the slot within the focus trap already has focus, does nothing
-    -   If the slot within the focus trap doesn't have focus, focuses the first tabbable element of its default slot
--   The slot is assumed to have at least one tabbable element
--   Apart from the first and last tabbable elements tabbing order should remain unchanged
--   When there's a new tabbable element that precedes the previously first tabbable element, when pressing `Tab` on the last tabbable element the focus should go to the new tabbable element
--   When there's a new tabbable element that follows the previously last tabbable element, when pressing `Shift-Tab` on the last tabbable element the focus should go to the new tabbable element
--   When there's a new first/last tabbable element, tab navigation from previously first/last tabbable elements should be normal if they're still part of the slot (eg. pressing Tab on the previously last tabbable element should go the next tabbable element)
-
-Definitions:
-
--   Tabbable element:
-    -   Can be part of a custom element
-    -   Can be part of a slot
-    -   Can be part of an open shadow
-    -   Can be part of a same-origin iframe
-    -   Doesn't have an ascendant custom element that has `tabindex` attribute set to `-1`
-    -   Doesn't have `tabindex` attribute set to `-1` on itself
-    -   Doesn't have the computed style `visibility` as `hidden`
-    -   Has bounding client rect `height` or `width` greater than zero
-    -   Is a `button`, `select`, `textarea` or `input` element and `disabled` property is false
-    -   Is not an `input` element with `type=hidden`
-    -   Has `tabindex` attribute set to `0` or has the `tabIndex` property as `0` and is not an element that has `tabIndex` set to 0 by default (that's relevant for IE11 as all elements have `tabIndex` as `0` by default) as per
-        https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
-        (`a`, `select`, `textarea`, `input`, `button`, `iframe`, `object`, `area`, `frame`)