{"_id":"@accede-web/accordion","_rev":"2-3213e1b8b1f9ffff944182c5a254c698","name":"@accede-web/accordion","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.1":{"title":"AcceDe Web - accordion","name":"@accede-web/accordion","version":"1.0.1","description":"WAI-ARIA accordion plugin based on AcceDe Web accessibility guidelines","main":"dist/accordion.js","module":"lib/index.js","scripts":{"build":"rollup -c && cross-env NODE_ENV=production rollup -c","doc-lint":"documentation lint","doc-serve":"documentation serve","doc":"documentation build lib/*.js","postversion":"git push && git push --tags","test":"tape test/*.js | tap-diff","version":"npm run build && npm run test && git add -A dist","watch:build":"watch 'npm run build' lib --interval=1","watch:test":"watch 'npm test' {dist,test} --interval=1"},"repository":{"type":"git","url":"git+ssh://git@github.com/AcceDe-Web/tablist.git"},"keywords":["accessibility","accordion","javascript","vanilla","a11y"],"author":{"name":"Switch","email":"bonjour@switch.paris","url":"http://switch.paris"},"license":"ISC","browserslist":["> 1%","last 2 versions","IE 10"],"homepage":"http://a11y.switch.paris/","devDependencies":{"babel-core":"^6.26.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.1","cross-env":"^5.1.5","documentation":"^6.2.0","eslint":"^4.19.1","eslint-config-idiomatic":"^4.0.0","puppeteer":"^1.3.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.3","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^3.0.0","tap-diff":"^0.1.1","tape":"^4.9.0","watch":"^1.0.2"},"gitHead":"c1fecd15626ca49fa1313137022d90f0a87ffd4b","bugs":{"url":"https://github.com/AcceDe-Web/tablist/issues"},"_id":"@accede-web/accordion@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"enwin","email":"tifftafftoff@gmail.com"},"dist":{"integrity":"sha512-6irW8FsUjPaahJaSUYAi+18xZXvqS8k0mA79Ax6FqWf0bYWnQrj/D6ZKN3yLocAWvTem3HW/ILUdLRqnmviH4w==","shasum":"1433559a11fcdc620f4558ce3d252c7d2e2f420f","tarball":"https://registry.npmjs.org/@accede-web/accordion/-/accordion-1.0.1.tgz","fileCount":15,"unpackedSize":95449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbQ2p6CRA9TVsSAnZWagAA+KsP/jjB7FJYI+25xeHSa5T5\nT4RjWQFtcoD1fJEAflZwhdhVARc7fr1/OPyc1FVV50dduMTIlt1teu6CiYD2\nW8ewAHKcwKZAYfZrM68ggEqFBKohOr7Gv+gr0BgSZWGkB9Kwzt+754VTZ736\nCInBrzgokDFEkWlyv9bRR4ELLJgoatVf0NiVRA+7nRVEecLxnOa45UR0o0Gx\nazsw79DsWVoTUWI7ypGXt6svvBUY0m3QQn5Hn1/VFMJYhMwQY22UZwaHyqy9\nIxYt5c/uZ5FQNN+KAY0FBb1A2JpkogDqp827Dc1n9IClpIWIaWeoiLL7f5+L\nF4WzyYe8TlVa8JJ4VGHhGA/PPs0Fvm8XsQIMA4ffToBOyGXfLLqIWcpaM3VS\nUXcUqo18WOTKkm417LGUuazGNUU8w20CZNHkY/jbx5xj/mOt23rmwC+QGyY1\nwUgsiAGr1NYIAnOyXuiMYhnaq8vfYvXAqQEYceieBsMWGeFoEde+m0EZ7mho\n2O2zXy4ODKZx4ScHqIjng23PMIJ0l0DrpDiZwIJnqpmp4CYGze/SXZYLdwNI\nS2XAYGBksSzRn6jshh750uhR+V6cOlALFDj4fB4oqQgPSZgCNCz04b4x+vSB\nEl+YHjH+jrapRhaftsZjufEulzknbswbVaBn4JsdC6VsUr2H4YDvOpdRC91F\nx7aS\r\n=vbrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFALxV+pR9rK7r1JfeT4Y18uJnbIq4lLDsT0sY220/2aAiEAlpB/GzFas1pmLyKOHRAOQltc25er2eiNmUm1ynrJ3PY="}]},"maintainers":[{"name":"atalan","email":"a11y@atalan.fr"},{"name":"enwin","email":"tifftafftoff@gmail.com"},{"name":"sdussaut","email":"sdussaut@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.0.1_1531144826405_0.8666334709112453"},"_hasShrinkwrap":false},"1.1.0":{"title":"AcceDe Web - accordion","name":"@accede-web/accordion","version":"1.1.0","description":"WAI-ARIA accordion plugin based on AcceDe Web accessibility guidelines","main":"dist/accordion.js","module":"lib/index.js","scripts":{"build":"rollup -c && cross-env NODE_ENV=production rollup -c","doc-lint":"documentation lint","doc-serve":"documentation serve","doc":"documentation build lib/*.js","postversion":"git push && git push --tags","test":"tape test/*.js | tap-diff","version":"npm run build && npm run test && git add -A dist","watch:build":"watch 'npm run build' lib --interval=1","watch:test":"watch 'npm test' {dist,test} --interval=1"},"repository":{"type":"git","url":"git+ssh://git@github.com/AcceDe-Web/tablist.git"},"keywords":["accessibility","accordion","javascript","vanilla","a11y"],"author":{"name":"Switch","email":"bonjour@switch.paris","url":"http://switch.paris"},"license":"ISC","browserslist":["> 1%","last 2 versions","IE 10"],"homepage":"http://a11y.switch.paris/","devDependencies":{"babel-core":"^6.26.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.1","cross-env":"^5.1.5","documentation":"^6.2.0","eslint":"^4.19.1","eslint-config-idiomatic":"^4.0.0","puppeteer":"^1.3.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.3","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^3.0.0","tap-diff":"^0.1.1","tape":"^4.9.0","watch":"^1.0.2"},"gitHead":"00887e1abd855642c317db57de8b3c8da9216129","bugs":{"url":"https://github.com/AcceDe-Web/tablist/issues"},"_id":"@accede-web/accordion@1.1.0","_nodeVersion":"10.11.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-RxF1lucduqPfwuULI/FingecpjNOG7qZnhutAfvpGtzrO3XzoZxb8BH0CT1uePZ3W27o9VVprchFG6n7SqZ3iw==","shasum":"47eb766b88051a8eded02450bd2e6b34060e2ab0","tarball":"https://registry.npmjs.org/@accede-web/accordion/-/accordion-1.1.0.tgz","fileCount":6,"unpackedSize":43915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwqKKCRA9TVsSAnZWagAAt4oP/RZgEgS+dENCkZgQghPR\nZTCUGEzDYOG/R2D2ScK2FvAVdMuaVfPQQJpdcpdQk/AawQ1oPRfRumd3hjCF\n/2AztYgwwO0QHUi6RFY6BSsamF6yjJnI1jLWY/R3ZcTUWvIawmALL5W51tFw\n4tCWdzqAawlki/wIzKEYhhvNgtIz78XkVAZc0QERO/t6pPjs6ygGXbMjkqZx\n5Chzobl0ZCoa0yuodWkNoI30R9N4bMvLw3oT/iqZhLZSmIplUgI4uXZz0apd\nkp/VF3EOKO0iC7JxsNiD0E8o8sfpooj3Vthbj0jzn/P2+n6vGk74kA9w11vy\nHw/za2sgZloahUbsvXH8LSYTd1fRFLN0vX60sM/AsbMIYTeujAhBclJ9LDQ1\n5C8xiKGOJOf6oWOYs+rQYWDzAzbsA6IyKQItSzpp/65meEq7H6WhPYqH+RO7\nsE7WSonjqwjq0zHqUwcoHlMd2NK75OsceCasCTCNkVCKNpl6ByGbi3gyZ/3M\nWbNK2ECX9TdnKU1KjS73mfkI8SN2LDY9SbktXRhRE4kh2oNSol3ZghT4qOoB\n4sOTyHpwAD75MAqgvv1sE5LspZuItZai9tV/+0+VY9AXdRVUals6fLixfmB7\nlpKDHEqqcbJpiFnf70gpkeP1zRX7iR+xUf1fsSxdDfDn/9L+q3+q6kMVyyPP\nATAN\r\n=Gmy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlfkVgjZpELXxIKfH0YVVJnbdU2EdTeMAlEvhC27VSWgIgGN9l7L+w01p05aW9EgSluDFCX7l3o7Bdlm6Y+aDTj/E="}]},"maintainers":[{"name":"atalan","email":"a11y@atalan.fr"},{"name":"enwin","email":"tifftafftoff@gmail.com"},{"name":"sdussaut","email":"sdussaut@gmail.com"}],"_npmUser":{"name":"enwin","email":"tifftafftoff@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.1.0_1556259466026_0.41762820400375356"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-09T14:00:26.298Z","1.0.1":"2018-07-09T14:00:26.472Z","modified":"2022-04-04T11:06:30.515Z","1.1.0":"2019-04-26T06:17:46.162Z"},"maintainers":[{"name":"atalan","email":"a11y@atalan.fr"},{"name":"enwin","email":"tifftafftoff@gmail.com"},{"name":"sdussaut","email":"sdussaut@gmail.com"}],"description":"WAI-ARIA accordion plugin based on AcceDe Web accessibility guidelines","homepage":"http://a11y.switch.paris/","keywords":["accessibility","accordion","javascript","vanilla","a11y"],"repository":{"type":"git","url":"git+ssh://git@github.com/AcceDe-Web/tablist.git"},"author":{"name":"Switch","email":"bonjour@switch.paris","url":"http://switch.paris"},"bugs":{"url":"https://github.com/AcceDe-Web/tablist/issues"},"license":"ISC","readme":"# AcceDe Web - accordion\n\nWAI-ARIA accordion plugin without dependencies.\n\n## Requirements\n\n### HTML\n\nBasic HTML structure with a heading containing a button and the element to display. Headings can be any `hx` from `h1` to `h6` or an element with `role=\"heading\"` and `aria-level` attributes. The headings and panels must be enclosed in a common element used to initiate the script. `aria-controls` attribute can be replaced with `data-controls` if necessary.\n\n#### HTML structure\n\n```html\n<div class=\"accordion\">\n  <h3>\n    <button id=\"tab1\" aria-controls=\"panel1\">Entête n<sup>o</sup> 1</button>\n  </h3>\n  <div id=\"panel1\" aria-labelledby=\"tab1\" aria-hidden=\"false\">\n    <p>---</p>\n  </div>\n  <h3>\n    <button id=\"tab2\" aria-controls=\"panel2\" >Entête n<sup>o</sup> 2</button>\n  </h3>\n  <div id=\"panel2\" aria-labelledby=\"tab2\">\n    <p>---</p>\n  </div>\n  <h3>\n    <button id=\"tab3\" aria-controls=\"panel3\" >Entête n<sup>o</sup> 3</button>\n  </h3>\n  <div id=\"panel3\" aria-labelledby=\"tab3\">\n    <p>---</p>\n  </div>\n  <h3>\n    <button id=\"tab4\" aria-controls=\"panel4\">Entête n<sup>o</sup> 4</button>\n  </h3>\n  <div id=\"panel4\" aria-labelledby=\"tab4\">\n    <p>---</p>\n  </div>\n</div>\n```\n\nA `disabled` attribute set to `true` on a `button` will disable the `button` and the associated `element` making them unfocusable and unselectable.\n\nIf you wish to open one specific tab when the script starts, just add the `data-expand` attribute with the value of `true` on the desired `button`:\n\nTo allow multiple panels to be opened at the same time add `data-multiselectable=\"true\"` to the parent of the headers and panels\n\n```html\n<div class=\"accordion\" data-multiselectable=\"true\">\n  <h3>\n    <button id=\"tab1\" aria-controls=\"panel1\" data-expand=\"true\">Entête n<sup>o</sup> 1</button>\n  </h3>\n  ---\n</div>\n```\n\n### CSS\n\nAt least a <abbr title=\"Cascading Style Sheets\">CSS</abbr> selector for panels to be hidden when not selected:\n\n```css\n.accordion [aria-hidden=\"true\"] {\n  display: none;\n}\n```\n\nThe selector can be anything you want, like a class, as the script allows callback when opening or closing a panel; you can add your own class using the callbacks.\n\n### JavaScript\n\nThe script itself, either from npm:\n\n```bash\n$ npm install @accede-web/accordion\n```\n\nand later in your code:\n\n```js\nvar Accordion = require( '@accede-web/accordion' );\n\n// or\n\nimport Accordion from @accede-web/accordion;\n```\n\nor downloaded from Github and added to the page (minified and non minified versions available in the `dist` folder)\n\n```html\n<script src=\"./js/accordion.min.js\"></script>\n```\n\nUsing the later, the script will be available on `window` under the namespace `Accordion`.\n\nNow to kick off the script:\n\n```js\n// get the tablist element\nvar list = document.querySelector( '.accordion' );\n\n// create the tablist instance\nvar accordion = new window.Accordion( list );\n\n// optionnaly add callbacks on show and hide a panel\naccordion.on( 'show', function( header, panel ){\n  …\n});\n\naccordion.on( 'hide', function( header, panel ){\n  …\n});\n\n// start the plugin\naccordion.mount();\n```\n\n## Parameters\n\nThe script takes one parameter:\n\n* the `accordion` <abbr title=\"Document Object Model\">DOM</abbr> element\n\nAs the script takes only one `accordion` element as parameter you have to loop over each `accordion` to kick off the script on each of them.\n\n```js\nvar lists = document.querySelectorAll( '.accordion' );\n\nArray.prototype.forEach.call( lists, function( list ) {\n  new window.Accordion( list ).mount();\n});\n```\n\n## Methods\n\nThe `Accordion` constructor returns 4 methods:\n\n* `mount()` - start the magic\n* `unmount()` - unbind keyboard and mouse events\n* `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\n* `off( event, callback )` - unbind a callback to either the `show` or `hide` event triggered when changing panel\n* `closeAll()` - Close all currently opened panels (will trigger a `hide` event on each opened panel).\n* `close( panel )` - Close a panel. `panel` is an `HTMLElement` representing the panel. It will trigger a `hide` event on the panel.\n* `openAll()` - Open all panels (will trigger a `show` event on each opened panel).\n* `open( panel )` - Open a panel. `panel` is an `HTMLElement` representing the panel. It will trigger a `show` event on the panel.\n\n## Properties\n\nTo know which `header` and `panel` is open use `accordion.current`. It will return an array containing all opened headers and panels\n\n```js\n// ES6 destructuring array\nconst [ accordion1, ... ] = accordion.current;\nconst { header, panel } = accordion1;\n\n// ES5\nvar accordions = accordion.current;\n\naccordions.forEach( function( accordion ){\n  accordion.header; // return the header\n  accordion.panel; // return the panel\n});\n```\n\nThis allows you to add or remove your own `class` for <abbr title=\"Cascading Style Sheets\">CSS</abbr> purposes or animate the opening or closing of the panel.\n\n## Keyboard Interaction\n\nThe keyboard interactions are based on [Atalan's AcceDe Web guidelines (in French)](http://www.accede-web.com/notices/interface-riche/accordeons/) and [the WAI-AIRA 1.0 Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#accordion)\n\n* `Enter or Space`:\n  * 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.\n  * 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.\n* `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.\n* `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.\n* `Home`: When focus is on an accordion header, moves focus to the first accordion header.\n* `End`: When focus is on an accordion header, moves focus to the last accordion header.\n* `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.\n* `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.\n\n\n## Compatibilty\n\nThis plugin is tested against the following browsers:\n\n* Internet Explorer 9 and higher\n* Microsoft Edge\n* Chrome\n* Firefox\n* Safari\n\n\n## Testing\n\nInstall the project dependencies:\n\n```bash\n$ npm install\n```\n\nRun the automated test cases:\n\n```bash\n$ npm test\n```\n","readmeFilename":"README.md"}