This package has been deprecated

Author message:

WARNING: This project has been renamed to aria-modal. Install using aria-modal instead.

web-components-aria-modal
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

web-components-aria-modal

Accessible modal with Web Components

Install(ESM)

  • yarn add web-components-aria-modal or npm i web-components-aria-modal

Install(UMD)

Usage

import 'web-components-aria-modal';

/**
 * do something
*/

Append Your Modal

You can append your modal inside aria-modal with slot. If you use slot, you can use accessible feature for modal.
Please see following example.

<aria-modal>
  <div name="modal">
    <!-- ... -->
  </div>
</aria-modal>

Style

Using css variables, you can apply your style to <aria-modal>.

aria-modal {
  --backdrop-display: block; /* or flex, inline-block, etc... */
  --backdrop-color: rgba(0, 0, 0, 0.3); /* background-color for backdrop */
  --backdrop-position: absolute; /* or fixed */
  --backdrop-z-index: 0;
}

Props

name required default description
open false false It is used to show modal. You can set true if you want to open modal.
first-focus true none It is used to focus to first element when modal is opened. You should assign id name.
node true none It is used to move focus inside modal. You should set modal id name.
animation false false Fade animation will run if animation flag is true.
duration false 300 animation duration time
active false none active is class that is added when open props is changed true.
aria-label or aria-labelledby true none See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
aria-describedby true none See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
role true none Assignable value are dialog or alertdialog. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
aria-modal false true See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role

Warning

If the active class is not set to aria-modal, it may flicker when reloaded on browser. When you set active class, you should set your modal to display: none; and you should set your active class to display: block; /* or flex, inline-block, etc... */.
This problem is occurred by rendering process for Web Components. Your modal is assigned to slot element in aria-modal, and slot is rendered after JavaScript file(and Web Components) have loaded. That is, this problem is occurred by your modal is rendered without your modal is assigned to slot.

Example

https://github.com/github/clipboard-copy-element/tree/master/examples

Package Sidebar

Install

npm i web-components-aria-modal

Weekly Downloads

0

Version

1.2.2

License

MIT

Unpacked Size

43 kB

Total Files

14

Last publish

Collaborators

  • keiya01