@accede-web/accordion 中文文档教程

Question

AcceDe Web - accordion

没有依赖项的 WAI-ARIA 手风琴插件。

Requirements

HTML

带有包含按钮和要显示的元素的标题的基本 HTML 结构。 标题可以是从 h1 到 h6 的任何 hx 或带有 role="heading" 和 的元素aria-level 属性。 标题和面板必须包含在用于启动脚本的公共元素中。 如果需要，aria-controls 属性可以替换为 data-controls。

HTML structure

<div class="accordion">
  <h3>
    <button id="tab1" aria-controls="panel1">Entête n<sup>o</sup> 1</button>
  </h3>
  <div id="panel1" aria-labelledby="tab1" aria-hidden="false">
    <p>---</p>
  </div>
  <h3>
    <button id="tab2" aria-controls="panel2" >Entête n<sup>o</sup> 2</button>
  </h3>
  <div id="panel2" aria-labelledby="tab2">
    <p>---</p>
  </div>
  <h3>
    <button id="tab3" aria-controls="panel3" >Entête n<sup>o</sup> 3</button>
  </h3>
  <div id="panel3" aria-labelledby="tab3">
    <p>---</p>
  </div>
  <h3>
    <button id="tab4" aria-controls="panel4">Entête n<sup>o</sup> 4</button>
  </h3>
  <div id="panel4" aria-labelledby="tab4">
    <p>---</p>
  </div>
</div>

button 上的 disabled 属性设置为 true 将禁用 button 和关联的 element 使它们无法聚焦且无法选择。

如果您希望在脚本启动时打开一个特定的选项卡，只需在所需的 button 上添加值为 true 的 data-expand 属性:

要允许同时打开多个面板，请将 data-multiselectable="true" 添加到标题和面板的父级

<div class="accordion" data-multiselectable="true">
  <h3>
    <button id="tab1" aria-controls="panel1" data-expand="true">Entête n<sup>o</sup> 1</button>
  </h3>
  ---
</div>

CSS

至少一个 CSS< /abbr> selector for panels to be hidden when not selected：

.accordion [aria-hidden="true"] {
  display: none;
}

选择器可以是你想要的任何东西，比如类，因为脚本允许在打开或关闭面板时进行回调； 您可以使用回调添加自己的类。

JavaScript

脚本本身，来自 npm:

$ npm install @accede-web/accordion

和稍后在您的代码中：

var Accordion = require( '@accede-web/accordion' );

// or

import Accordion from @accede-web/accordion;

或从 Github 下载并添加到页面（dist 文件夹中提供缩小和非缩小版本）

<script src="./js/accordion.min.js"></script>

使用后者，脚本将是在命名空间 Accordion 下的 window 上可用。

现在启动脚本：

// get the tablist element
var list = document.querySelector( '.accordion' );

// create the tablist instance
var accordion = new window.Accordion( list );

// optionnaly add callbacks on show and hide a panel
accordion.on( 'show', function( header, panel ){
  …
});

accordion.on( 'hide', function( header, panel ){
  …
});

// start the plugin
accordion.mount();

Parameters

脚本采用一个参数：

• the accordion DOM element

由于脚本只采用一个 accordion 元素作为参数，因此您必须遍历每个 accordion 以启动脚本他们每个人。

var lists = document.querySelectorAll( '.accordion' );

Array.prototype.forEach.call( lists, function( list ) {
  new window.Accordion( list ).mount();
});

Methods

Accordion 构造函数返回 4 个方法：

• mount() - start the magic
• unmount() - unbind keyboard and mouse events
• on( event, callback ) - bind a callback to either the show or hide event triggered when changing panel. Both header and panel HTMLElement are passed on the callback
• off( event, callback ) - unbind a callback to either the show or hide event triggered when changing panel
• closeAll() - Close all currently opened panels (will trigger a hide event on each opened panel).
• close( panel ) - Close a panel. panel is an HTMLElement representing the panel. It will trigger a hide event on the panel.
• openAll() - Open all panels (will trigger a show event on each opened panel).
• open( panel ) - Open a panel. panel is an HTMLElement representing the panel. It will trigger a show event on the panel.

Properties

要知道哪个 header 和 panel 是打开的，请使用 accordion.current。 它将返回一个包含所有打开的标题和面板的数组

// ES6 destructuring array
const [ accordion1, ... ] = accordion.current;
const { header, panel } = accordion1;

// ES5
var accordions = accordion.current;

accordions.forEach( function( accordion ){
  accordion.header; // return the header
  accordion.panel; // return the panel
});

这允许您添加或删除自己的 class 用于 CSS 目的或动画打开或关闭面板。

Keyboard Interaction

键盘交互基于 Atalan 的 AcceDe Web 指南（法语） 和 the WAI-AIRA 1.0 Authoring Practices

• Enter or Space:
• When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
• When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
• Down Arrow: If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
• Up Arrow: If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
• Home: When focus is on an accordion header, moves focus to the first accordion header.
• End: When focus is on an accordion header, moves focus to the last accordion header.
• Control + Page Down: If focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. If focus is in the last accordion header or panel, either does nothing or moves focus to the first accordion header.
• Control + Page Up: If focus is inside an accordion panel, moves focus to the header for that panel. If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.

Compatibilty

此插件已针对以下浏览器进行测试：

• Internet Explorer 9 and higher
• Microsoft Edge
• Chrome
• Firefox
• Safari

Testing

安装项目依赖项：

$ npm install

运行自动化测试用例：

$ npm test