Componente de acordeón accesible para el acordeón JavaScript-A11Y

Vista prévia

Descripción

a11y-acordeón-componente es una biblioteca escrita en JavaScript vainilla para crear fácilmente acordeón compatible con WAI-ARIA de fácil configuración en la aplicación Web.

Características

• Tecla Intro o espacio para alternar los paneles de acordeón.
• Teclas de flecha para mover el foco.
• Tecla Inicio para desplazar el foco al primer encabezado.
• Tecla end para desplazar el foco al último encabezado.
• Teclas de página arriba y página abajo para mover el foco a los encabezados asociados.

Instalación

# Yarn
$ yarn add a11y-accordion-component

# NPM
$ npm install a11y-accordion-component --save

Funcionamiento

La estructura HTML principal para el componente de acordeón. Atributos disponibles:

• Data-Component = "acordeón": inicializar un nuevo acordeón
• Data-multiseleccionable = "false": permite seleccionar varios paneles de acordeón
• Data-collapsible = "false": es contraíble?
• ID = "Trigger-ID": ID de desencadenador
• ID = "panel-ID": ID de panel
• Data-Controls = "panel-ID": ID de control
• Data-Open = "true": si está abierto en init

<div class="c-accordion u-p" data-component="accordion">

<div role="heading" aria-level="3">


<div



id="accordion-trigger-1"



class="c-accordion__trigger"



data-controls="accordion-panel-1"



data-open="true">



Accordion Header 1


</div>

</div>

<div id="accordion-panel-1" class="c-accordion__panel">


<div class="c-accordion__inner">



<h3>Section 1</h3>



<p>




A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a




discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.




Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,




used to organize longer prose.



</p>



<p><a href="#">This is a text link</a></p>


</div>

</div>

<div role="heading" aria-level="3">


<div



id="accordion-trigger-2"



class="c-accordion__trigger"



data-controls="accordion-panel-2">



Accordion Header 2


</div>

</div>

<div id="accordion-panel-2" class="c-accordion__panel">


<div class="c-accordion__inner">



<h3>Section 2</h3>



<p>




A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a




discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.




Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,




used to organize longer prose.



</p>



<p><a href="#">This is a text link</a></p>


</div>

</div>

<div role="heading" aria-level="3">


<div



id="accordion-trigger-3"



class="c-accordion__trigger"



data-controls="accordion-panel-3">



Accordion Header 3


</div>

</div>

<div id="accordion-panel-3" class="c-accordion__panel">


<div class="c-accordion__inner">



<h3>Section 3</h3>



<p>




A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a




discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.




Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,




used to organize longer prose.



</p>



<p><a href="#">This is a text link</a></p>


</div>

</div>
</div>

Cargue el archivo JavaScript necesario ' a11y-Accordion-Component. js ' en el documento.

<script src="a11y-accordion-component.js"></script>

Inicializar la biblioteca y listo.

document.addEventListener('DOMContentLoaded', () => {


Accordions.init();

});

Registro de cambios

v1.2.6 (11/05/2018)

• eliminado el evento touchstart