Global Lua Modules/Accordion

Accordion is a script that allows users to create collapsible accordions in a page.
== ==
== About ==
Accordions are collapsible menus used in pages to show and hide content, just like collapsible tables, but with a few differences that aim at improving accessibility by using semantic elements and are less troublesome to use compared to the wikitables approach.
These elements are made out of two main parts: the header and the panel.
* The header is the part that is visible all the time and works as both a heading and a button to show its contents.
* The panel is the part that is usually hidden by default and can be displayed by interacting with its header. Here is where all of the contents of the accordion are placed.
By default, all accordion headers will have an arrow icon to indicate it's current status. When there is a nested accordion, the first-level accordions will change their icons to a "plus" sign that will change to a "minus" sign when it is expanded. When animations are enabled, the "minus" sign is changed by an "X".
== ==
Once you've imported both the Lua module and the Javascript and created its respective template in your wiki, you can use it like so:
{{Accordion
| type = [text/links]
| animation-duration = [int]
| accordion-n-expanded = true?
| accordion-n-title = [string]
| accordion-n-contents = [anything]
| accordion-n-link-N = [link]
}}
To use it (as a user), all you have to do is click on the heading labels that will display each accordion to reveal more content below it. Clicking the header when the panel has been opened will make it close again.
You can also use the keyboard buttons to navigate and use the accordion (while focusing any of its elements):
* // will focus the next accordion.
* // will focus the previous accordion.
* will focus the first accordion.
* will focus the last accordion.
* / will open the selected accordion.
Accordions also use several ARIA attributes so assistive technologies can recognize and behave accordingly to these elements. In case of the links accordions, if these are opened, an aria-label attribute will appear telling the user how many links are inside it so they can determine beforehand wether it's worth navigating though it or closing it and skip it entirely.
== Types ==
=== Text ===
The default accordion type. Despite being called text, this is the accordion variant where you can put any kind of content in its panel; such as images, tables, other templates, and more. You can even nest a second accordion inside (although doing more than two nested accordions is discouraged as it leads to unnecessarily complicated page layouts and can be confusing to navigate even with all the UI/UX considerations taken into account).
An example of this type of accordion is the following:
=== Links ===
In this types of accordion you only should list links for the user to click. It works more as a navigational menu than anything else. It accepts any kind of wikitext link (wether it's from the same wiki, interwiki, or an external link).
An example of this type of accordion is the following:
== API ==
=== HTML elements ===
Note that you don't have to write any HTML in order to make this script work, but you may want to know the purpose of each generated element.
HTML element 	Description
 	Mandatory. Element that wraps all accordions.
<section class="accordion" id="accordion-n"></section>	Mandatory. Accordion element that contains the header and the panel.
 	Mandatory. Header element that works as a button.
 	Mandatory. Panel element that holds the accordion's contents.
<svg class="accordion__icon"></svg> 	Optional. Indcates the state of the header (wether its expanded or not).
=== CSS classes ===
Some CSS classes are specfic to a type of accordion, so you are free to give custom styles to each type accordingly if needed. You can always style both types at the same time by not using the type name in the class.
CSS class 	Target 	Description
.accordion__wrapper 	Wrapper element 	Mandatory. Selects the wrapper element of all accordions.
.upgraded__accordion 	Wrapper element 	Mandatory. Ensures some behavior given after the JavaScript updates the HTML structure of the accordion.
.is-animated 	Wrapper element 	Optional. Allows transitions and animations to be played in all accordions.
.accordion 	Accordion 	Mandatory. Selects all accordions.
.accordion__text 	Accordion 	Mandatory (if accordion type is text). Selects all text-type accordions.
.accordion__links 	Accordion 	Mandatory (if accordion type is links). Selects all link-type accordions.
.accordion--header 	Accordion header 	Mandatory. Selects the accordion's header.
.accordion__text--header 	Accordion header 	Mandatory (if accordion type is text). Selects the text-type accordion's header.
.accordion__links--header	Accordion header 	Mandatory (if accordion type is links). Selects the link-type accordion's header.
.accordion--panel 	Accordion panel 	Mandatory. Selects the accordion's panel.
.accordion__text--panel 	Accordion panel 	Mandatory (if accordion type is text). Selects the text-type accordion's panel.
.accordion__links--panel 	Accordion panel 	Mandatory (if accordion type is links). Selects the link-type accordion's panel.
.accordion__icon 	Header icon 	Optional. Selects all types of header icons.
.accordion__icon--arrow 	Header icon 	Mandatory (if the header has a "arrow" icon). Selects the "arrow" icon.
.accordion__icon--plus 	Header icon 	Mandatory (if the header has a "plus" icon and there are nested accordions). Selects the "plus" icon.
.accordion__icon--plus-h 	Header "plus" icon	Optional. Selects the horizontal line from the "plus" icon.
.accordion__icon--plus-v 	Header "plus" icon	Optional. Selects the vertical line from the "plus" icon.
=== CSS variables ===
Custom properties that allows you to quickly customize some aspects of the component. You can use these on the .accordion element.
CSS variable 	Description
--accordion--background-color 	Modifies accordions' background color (does not affect the background color of the text-type accordion's header).
--accordion--border-color 	Modifies accordions' border color.
--accordion__header--background-color 	Modifies text-type accordion's header background color.
--accordion__header--background-color--hover	Modifies text-type accordion's header background color on hover/focus.
--accordion__links--background-color 	Modifies links-type accordion's header background color.
--accordion__links--background-color--hover 	Modifies links-type accordion's header background color on hover/focus.
--accordion__links--border-radius 	Modifies links-type accordions' border radius.
--accordion-icon-color--light 	Modifies header icon's color on light theme.
--accordion-icon-color--dark 	Modifies header icon's color on dark theme.
A CSS rule using all available variables looks like this: