Plugin de acordeón accesible en JavaScript puro-AriaAccordion

Vista prévia

Descripción

AriaAccordion es un plugin de JavaScript vainilla para generar un widget de acordeón totalmente accesible en la Página Web.

Basado en un < a href = "https://www.w3.org/TR/wai-aria-practices/#accordion" target = "_ blank" rel = "noopener" > patrón de diseño RIA para Accordions y soporta acordeones anidados.

Esta es la versión de JavaScript puro del plugin de acordeón accesible para jQuery .

Keyboard interactions:

• up o left : mover el foco en el acordeón anterior
• Down o right : mover el foco en el siguiente acordeón
• Home : mover el foco en el primer acordeón
• End : mover el foco en el último acordeón
• Space o Return : abrir/cerrar acordeones

Funcionamiento

Marca la estructura HTML para el acordeón.

<div class="aria-accordion">

<div class="aria-accordion-panel">


<h3 class="aria-accordion-header">First Accordion</h3>


Accordion Content 1

</div>

<div class="aria-accordion-panel">


<h3 class="aria-accordion-header">Second Accordion</h3>


Accordion Content 2

</div>

<div class="aria-accordion-panel">


<h3 class="aria-accordion-header">Third tab</h3>


Accordion Content 3

</div>

...
</div>

Cada contenedor de acordeón puede tener los siguientes atributos de datos:

• datos-acordeón-abierto: Abra el acordeón en init.
• datos-acordeón-multiseleccionable: Permite abrir múltiples paneles de acordeón a la vez.
• Data-acordeón-prefijo-clase: clase de prefijo

<div class="aria-accordion" data-accordion-multiselectable="true" data-accordion-prefix-class="minimalist-accordion">

<div class="aria-accordion-panel">


<h3 class="aria-accordion-header">First Accordion</h3>


Accordion Content 1

</div>

<div class="aria-accordion-panel" data-accordion-open="true">


<h3 class="aria-accordion-header">Second Accordion</h3>


Accordion Content 2

</div>

<div class="aria-accordion-panel">


<h3 class="aria-accordion-header">Third tab</h3>


Accordion Content 3

</div>

...
</div>

El plugin también es compatible con acordeones anidados.

<div class="aria-accordion-panel">

<h2 class="aria-accordion-header">Nested tab</h2>

<p>Content of 2nd tab</p>


<div class="aria-accordion">



<div class="aria-accordion-panel">





<h3 class="aria-accordion-header">First tab</h3>





<p>Content of 1st tab</p>



</div>



<div class="aria-accordion-panel">





<h3 class="aria-accordion-header">Second tab</h3>





<p>Content of 2nd tab</p>



</div>



<div class="aria-accordion-panel">





<h3 class="aria-accordion-header">Third tab</h3>





<p>Content of 3rd tab</p>



</div>

</div>
</div>

Incluya la biblioteca Aria-Accordion. js para inicializar el plugin de acordeón.

<script src="aria-accordion.js"></script>

AriaAccordion.init('.aria-accordion')

Siéntase libre de estilo el acordeón con su propio CSS.

.aria-accordion {

margin: 1em 2em;

background-color: #DDDDDD;
}

.aria-accordion-header { margin: 0; }
.aria-accordion-panel { margin: 1em 1em 1em 2.3em; }
.aria-accordion-panel[aria-hidden=true] { display: none; }

button.aria-accordion-header {

display: block !important;

width: 100%;

background-color: #005000;

color: white;

text-align: left;

font-size: 130%;

margin-bottom: 0.1em;

padding: 0.3em 0.6em;

border: none;
}

.aria-accordion-header[aria-expanded="true"]:before { content: "⊟ "; }
.aria-accordion-header[aria-expanded="false"]:before { content: "⊞ "; }

.aria-accordion-header[aria-selected="true"]:after {

content: " → selected";
}
.aria-accordion-header[aria-selected="false"]:after {

content: " → not selected";

color: #7F7F7F;
}

Opciones completas de acordeón.

AriaAccordion.init('.aria-accordion',{

headersSelector: '.aria-accordion-header',

panelsSelector: '.aria-accordion-panel',

buttonsSelector: 'button.aria-accordion-header',

button: AriaAccordion.defaultButton(),

buttonSuffixId: '-tab',

multiselectable: true,

prefixClass: 'aria-accordion',

headerSuffixClass: '-title',

buttonSuffixClass: '-header',

panelSuffixClass: '-panel',

direction: 'ltr',

accordionPrefixId: 'aria-accordion'
})