ARIA patterns

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Demo

Usage

<blockquote-dialog>
  <button form="form1" aria-label="close" formnovalidate>X</button>
  <p>Fill in your email address to receive our newsletter!</p>
  <form  id="form1 method="dialog">
    <label for="email">Email (required)</label>
    <input type="email" name="EMAIL" id="email" placeholder="[email protected]" required />
    <button type="submit" name="button">Sign up</button>
  </form>
</blockquote-dialog>

src/BlockquoteDialog.js:

class: BlockquoteDialog, blockquote-dialog

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | ----------------------------- | ------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | treewalker | | | | | | | dialogRef | | | | | | | open | public | boolean | | Opens the dialog when set to `true` and closes it when set to `false`. | | | _slotTpl | | | | | | | _labeledbyTpl | | | | | | | _contentTpl | | | | | | | _scrollerTpl | | | | | | | _firstNodeFocusTrapTpl | | | | | | | _lastNodeFocusTrapTpl | | | | | | | _isConnectedCallbackResolve | | | | | | | _isConnectedCallback | | | | | | | _firstFocusableChild | | | undefined | | | | _lastFocusableChild | | | undefined | | | | _nextClickIsFromContent | | boolean | false | | | | _overflowRoot | | | | | | | type | public | string | 'alert' | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog. | | | label | public | string | '' | The 'label' attribute will be used as the 'aria-label' for the dialog | | | labelledby | public | string | '' | The 'labelledby' attribute will be used as the 'aria-labelledby' for the dialog. It will also be used to create a slot with the same 'id' and 'name'. This slot is hidden by default and its 'name' and 'id' should correspond to the 'slot' attribute of an element in the Light DOM. This connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships. | | | labelledbyVisible | public | boolean | false | The 'labelledbyVisible' attribute will control the visibility of the slot created by 'labelledby'. By default, it is set to 'hidden'. | | | returnValue | public | | | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue returnValue | |

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------------------- | ------- | ----------- | ------------------- | ------ | -------------- | | getIsConnectedCallbackResolve | | | | | | | show | | | | | | | close | | | | | | | _handleSubmit | | | ev: SubmitEvent | | | | _handleOpen | | | | | | | _handleClose | | | ev: Event | | | | _handleCancel | | | ev: Event | | | | _handleDialogClick | | | | | | | _handleContentClick | | | | | | | _firstFocusTrap | | | { relatedTarget } | | | | _lastFocusTrap | | | { relatedTarget } | | |

Events

| Name | Type | Description | Inherited From | | -------- | ---- | ----------- | -------------- | | open | | | | | close | | | | | cancel | | | |

Attributes

| Name | Field | Inherited From | | --------------------- | ----------------- | -------------- | | open | open | | | label | label | | | labelledby | labelledby | | | labelledbyVisible | | | | type | type | | | labelledby-visibile | labelledbyVisible | |

Slots

| Name | Description | | ---- | ----------------------- | | | This element has a slot |

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | ------- | ------- | --------- | ------- | ----------- | -------------- | | #open | private | boolean | false | | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | ------------------ | ---------------- | ----------------------- | ------- | | js | BlockquoteDialog | BlockquoteDialog | src/BlockquoteDialog.js | |

src/index.js:

Exports

| Kind | Name | Declaration | Module | Package | | ---- | ------------------ | ---------------- | --------------------- | ------- | | js | BlockquoteDialog | BlockquoteDialog | ./BlockquoteDialog.js | |

src/styles/blockqoute-dialog-animations-styles.css.js:

Variables

| Name | Description | Type | | -------- | ----------- | ---- | | styles | | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | -------- | ----------- | ----------------------------------------------------- | ------- | | js | styles | styles | src/styles/blockqoute-dialog-animations-styles.css.js | |

src/styles/blockquote-dialog-styles.css.js:

Variables

| Name | Description | Type | | -------- | ----------- | ---- | | styles | | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | -------- | ----------- | ------------------------------------------ | ------- | | js | styles | styles | src/styles/blockquote-dialog-styles.css.js | |

define/blockquote-dialog.js:

Exports

| Kind | Name | Declaration | Module | Package | | --------------------------- | ------------------- | ---------------- | ------------------------ | ------- | | custom-element-definition | blockquote-dialog | BlockquoteDialog | /src/BlockquoteDialog.js | |