Componente de diálogo modal accesible en Vanilla JavaScript-a11y-Dialog

Vista prévia

Descripción

a11y-Dialog es un componente Vanilla de JavaScript (ES6) que le permite crear ventanas modales elegantes y accesibles & cuadros de diálogo usando WAI-ARIA.

Características

• Auto establece el foco en el primer elemento de la ventana modal.
• Admite el orden de tabulación.
• Cierre la ventana modal pulsando la tecla ESC.
• Haga clic en el exterior o en un elemento para cerrar la ventana modal.
• Establezca el foco en el botón de desencadenador cuando se cierre la ventana modal.
• Varias ventanas modales en la misma página.

How to use it:

Descargue e importe el componente a11y-Dialog en su documento como un módulo.

<script type="module">

import Dialogs from './src/a11y-dialog-component.js';
</script>

Importe la hoja de estilos para el estilo básico de la ventana modal.

<link rel="stylesheet" href="./src/main.css">

Inicialice el cuadro de diálogo a11y-con opciones.

Dialogs.init({

// options here
});

Cree una ventana modal siguiendo la estructura de marcado como esta:

<div id="example" class="c-dialog">

<div class="c-dialog__inner">


<header>



<h2 id="dialog-title">Dialog</h2>


</header>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non.</p>

</div>
</div>

Mostrar la ventana modal en la página.

Dialogs.create('example', {

labelledbyId: 'dialog-title',

describedbyId: 'dialog-desc'
});

A veces es posible que necesite un botón de desencadenador para alternar la ventana modal.

<button

type="button"

id="dialog-trigger"

class="c-btn"

data-component="dialog"

data-target="example"

data-labelledby="dialog-title"

data-describedby="dialog-desc">

Open Dialog
</button>

Personalice los selectores CSS:

Dialogs.init({

documentClass: 'js-document',

documentDisabledClass: 'is-disabled',

triggerActiveClass: 'is-active',
});

Abrir/cerrar la ventana modal mediante programación.

Dialogs.open(dialogID);
Dialogs.close(dialogID);

More API methods.

Dialogs.toggle(dialogID);
Dialogs.destroy(dialogID);
Dialogs.create();

Registro de cambios

v5.2.1 (03/09/2019)

• agregar el selector auxiliar

v5.1.0 (12/29/2018)

• Agregar método Create

v4.4.4 (11/18/2018)

• quitar evitar el valor predeterminado para los diálogos de información sobre herramientas

v4.4.3 (09/24/2018)

• solucionar problemas de iOS

v4.3.9 (09/08/2018)

• mayor tiempo de espera de enfoque