Cuadro de diálogo compatible con WAI-ARIA en JavaScript-a11y-Dialog

Vista prévia

Descripción

a11y-Dialog es un plugin de JavaScript puro para crear cuadros de diálogo totalmente accesibles con estilo personalizado y manejo de eventos.

Basado en el < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target = "_ blank" rel = "noopener" > < diálogo > elemento.

Instalación

# NPM
$ npm install a11y-dialog --save

Funcionamiento

Importe el script a11y-Dialog. js en el archivo HTML.

<script src="a11y-dialog.js"></script>

Cree el cuadro de diálogo siguiendo la estructura HTML de la siguiente manera:

<div class="dialog" aria-hidden="true" id="myDialog">

<div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>

<div class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription" role="dialog">


<div role="document">



<button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>




<h1 id="dialogTitle">Dialog Title</h1>




<p id="dialogDescription">Dialog Content</p>


</div>

</div>
</div>

Cree un elemento para alternar el cuadro de diálogo. Tenga en cuenta que el ' Data-a11y-Dialog-show ' tiene que coincidir con el ID de diálogo.

<button data-a11y-dialog-show="myDialog">open the dialog</button>

El estilo necesario para que el cuadro de diálogo funcione.

.dialog[aria-hidden="true"] {

display: none;
}

El estilo de diálogo adicional para que sea brillante.

.dialog-overlay {

z-index: 2;

background-color: rgba(0, 0, 0, 0.66);

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;
}

.dialog-content {

background-color: rgb(255, 255, 255);

z-index: 3;

position: fixed;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);
}

.dialog-content {

padding: 1em;

max-width: 90%;

width: 600px;

border-radius: 2px;
}

@media screen and (min-width: 700px) {

.dialog-content {


padding: 2em;

}
}

.dialog-overlay {

background-color: rgba(43, 46, 56, 0.9);
}

.dialog h1 {

margin: 0;

font-size: 1.25em;
}

.dialog-close {

position: absolute;

top: 0.5em;

right: 0.5em;

border: 0;

padding: 0;

background-color: transparent;

font-weight: bold;

font-size: 1.25em;

width: 1.2em;

height: 1.2em;

text-align: center;

cursor: pointer;

transition: 0.15s;
}

@media screen and (min-width: 700px) {

.dialog-close {


top: 1em;


right: 1em;

}
}

Inicialice el a11y-Dialog a través de JavaScript.

const myDialog = new A11yDialog(el, containers);

API methods.

// Show the dialog
myDialog.show();

// Hide the dialog
myDialog.hide();

// Unbind click listeners from dialog openers and closers and remove all bound
// custom event listeners registered with `.on()`
myDialog.destroy();

// Bind click listeners to dialog openers and closers
myDialog.create();

Controladores de eventos.

myDialogon('show', function (dialogEl, event) {

// Do something when dialog gets shown

// Note: opener is `event.currentTarget`
});

myDialogon('hide', function (dialogEl, event) {

// Do something when dialog gets hidden

// Note: closer is `event.currentTarget`
});

myDialogon('destroy', function (dialogEl) {

// Do something when dialog gets destroyed
});

myDialogon('create', function (dialogEl) {

// Do something when dialog gets created

// Note: because the initial `create()` call is made from the constructor, it

// is not possible to react to this particular one (as registering will be

// done after instantiation)
});

Registro de cambios

v5.1.2 (07/15/2018)

• Actualizado a la última versión