{"_id":"@barrierefrei/a11y-menu-2","_rev":"4-64a2ea96ce71a7e2307fbdf8a5dd5849","name":"@barrierefrei/a11y-menu-2","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"@barrierefrei/a11y-menu-2","version":"1.0.0","keywords":["npm","typescript","example"],"author":{"name":"Wanja Friedemann Karl"},"license":"ISC","_id":"@barrierefrei/a11y-menu-2@1.0.0","maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"dist":{"shasum":"85e0f329af0b815cd4c351ba239b3f10a76f3077","tarball":"https://registry.npmjs.org/@barrierefrei/a11y-menu-2/-/a11y-menu-2-1.0.0.tgz","fileCount":8,"integrity":"sha512-WZigOnbVXXBHhyxQ5ahAyuRUUJ87cjZJpYkouFgklXfx7+Bvvg41QzANwBJ3yzr3yFbZwslN+swIJtBlHzkkFQ==","signatures":[{"sig":"MEUCIQCg3uGbIBxYAJMmh7Mv2R+0JI65sYq60IAlnqJLU4pJcgIgUfe0XjhkL4FbQX95o88WoULH+4g7620kvemu9vbR6/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39919},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"9d47937faa34515b6c28c9f2326de982049f1b47","scripts":{"lint":"eslint -c .eslintrc.json ./src --fix","test":"jest --config jestconfig.json","build":"tsc","format":"prettier --write \"./**/*.(json|ts|yml|js)\"","prepare":"npm run build","version":"npm run format && git add -A src","preversion":"npm run lint","postversion":"git push && git push --tags","prepublishOnly":"npm test && npm run lint"},"_npmUser":{"name":"wanjapflueger","email":"git@wanjapflueger.de"},"repository":{"url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git","type":"git"},"_npmVersion":"9.7.2","description":"A fully accessible menu","directories":{},"_nodeVersion":"20.4.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","eslint":"^8.44.0","ts-jest":"^29.1.1","prettier":"^3.0.0","typescript":"^5.1.6","@types/jest":"^29.5.2","eslint-plugin-jsdoc":"^46.4.3","jest-environment-jsdom":"^29.6.1","@typescript-eslint/parser":"^5.61.0","@typescript-eslint/eslint-plugin":"^5.61.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-menu-2_1.0.0_1694684899207_0.17031766491727884","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@barrierefrei/a11y-menu-2","version":"1.0.1","keywords":["npm","typescript","example"],"author":{"name":"Wanja Friedemann Karl"},"license":"ISC","_id":"@barrierefrei/a11y-menu-2@1.0.1","maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"dist":{"shasum":"2fe9af07cae444b775b3228bf92f350c213576e6","tarball":"https://registry.npmjs.org/@barrierefrei/a11y-menu-2/-/a11y-menu-2-1.0.1.tgz","fileCount":8,"integrity":"sha512-pBOqiP2aVvigrgV8e5IdJtO7XPhVXGHUWR3wuZYLOhK8nUMRVLCluL99SOe411U9fyPqu3f6h4xyMD+dOaASJQ==","signatures":[{"sig":"MEUCICbrTymLFKUWbVZquhh3+nu2cTA4uE2Wdw36H4Wz6F3bAiEAo4LNrjKlI5+O4iDuEFXWAjS3LPsmcZudF9eETPOZijg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39654},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"7ec3f696e37538dad06dc23cf0e70dc4833bd371","scripts":{"lint":"eslint -c .eslintrc.json ./src --fix","test":"jest --config jestconfig.json","build":"tsc","format":"prettier --write \"./**/*.(json|ts|yml|js)\"","prepare":"npm run build","version":"npm run format && git add -A src","preversion":"npm run lint","postversion":"git push && git push --tags","prepublishOnly":"npm test && npm run lint"},"_npmUser":{"name":"wanjapflueger","email":"git@wanjapflueger.de"},"repository":{"url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git","type":"git"},"_npmVersion":"9.7.2","description":"A fully accessible menu","directories":{},"_nodeVersion":"20.4.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","eslint":"^8.44.0","ts-jest":"^29.1.1","prettier":"^3.0.0","typescript":"^5.1.6","@types/jest":"^29.5.2","eslint-plugin-jsdoc":"^46.4.3","jest-environment-jsdom":"^29.6.1","@typescript-eslint/parser":"^5.61.0","@typescript-eslint/eslint-plugin":"^5.61.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-menu-2_1.0.1_1694695534373_0.6480973048285454","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@barrierefrei/a11y-menu-2","version":"1.1.0","keywords":["npm","typescript","example"],"author":{"name":"Wanja Friedemann Karl"},"license":"ISC","_id":"@barrierefrei/a11y-menu-2@1.1.0","maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"dist":{"shasum":"9e089f77e91946355eb735cb32f75e0cb4b11627","tarball":"https://registry.npmjs.org/@barrierefrei/a11y-menu-2/-/a11y-menu-2-1.1.0.tgz","fileCount":8,"integrity":"sha512-UPNikbL8H6IqXLfHWjVQqUI4hYY5n3UkYSvqimG8n3hRlpSNjb3BXD6MkYb7r/C3CM82vbs8WAliCDxvnteUag==","signatures":[{"sig":"MEUCIQD4ecf6O+hoHPHhYM7u7QN5zVUkKZm5q5XQChBpoloaKgIgOCd6Mm0NJRbdeXEDEBabjIp36jhcsTptgS3zbGsprus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41728},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"ee32eadb960cddea4a6856df5cebccd75c2457f0","scripts":{"lint":"eslint -c .eslintrc.json ./src --fix","test":"jest --config jestconfig.json","build":"tsc","format":"prettier --write \"./**/*.(json|ts|yml|js)\"","prepare":"npm run build","version":"npm run format && git add -A src","preversion":"npm run lint","postversion":"git push && git push --tags","prepublishOnly":"npm test && npm run lint"},"_npmUser":{"name":"wanjapflueger","email":"git@wanjapflueger.de"},"repository":{"url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git","type":"git"},"_npmVersion":"9.7.2","description":"A fully accessible menu","directories":{},"_nodeVersion":"20.4.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","eslint":"^8.44.0","ts-jest":"^29.1.1","prettier":"^3.0.0","typescript":"^5.1.6","@types/jest":"^29.5.2","eslint-plugin-jsdoc":"^46.4.3","jest-environment-jsdom":"^29.6.1","@typescript-eslint/parser":"^5.61.0","@typescript-eslint/eslint-plugin":"^5.61.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-menu-2_1.1.0_1694787223213_0.10768273025520969","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@barrierefrei/a11y-menu-2","version":"1.2.0","keywords":["a11y","accessibility","accessible","aria","disclosure","menu","nav","npm","typescript","w3c","wai-aria"],"author":{"name":"Wanja Friedemann Karl"},"license":"ISC","_id":"@barrierefrei/a11y-menu-2@1.2.0","maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"dist":{"shasum":"e4ef782fe77d4110101ae619f70a1df24e1283a0","tarball":"https://registry.npmjs.org/@barrierefrei/a11y-menu-2/-/a11y-menu-2-1.2.0.tgz","fileCount":8,"integrity":"sha512-QvHgGY3p0Ghp3RfLUS60j52CAf9ofGjIIvao4EknW9iOUOWk0+RW7id5kxdT2G1W8JRrqrViyJcm+3C/Jq34cw==","signatures":[{"sig":"MEQCIEg3WwRZSPIj5hZuRGoCVSdhTOK0nGCTs0XI0Wwv+ci2AiA/alemKWOpadbaD9PBMnJx10a4HyncOOxu8EjVRlefmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42922},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"9f32fe4320bb4302fd93a8afbeae3bacbfb169d9","scripts":{"lint":"eslint -c .eslintrc.json ./src --fix","test":"jest --config jestconfig.json","build":"tsc","format":"prettier --write \"./**/*.(json|ts|yml|js)\"","prepare":"npm run build","version":"npm run format && git add -A src","preversion":"npm run lint","postversion":"git push && git push --tags","prepublishOnly":"npm test && npm run lint"},"_npmUser":{"name":"wanjapflueger","email":"git@wanjapflueger.de"},"repository":{"url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git","type":"git"},"_npmVersion":"9.7.2","description":"A fully accessible menu","directories":{},"_nodeVersion":"20.4.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","eslint":"^8.44.0","ts-jest":"^29.1.1","prettier":"^3.0.0","typescript":"^5.1.6","@types/jest":"^29.5.2","eslint-plugin-jsdoc":"^46.4.3","jest-environment-jsdom":"^29.6.1","@typescript-eslint/parser":"^5.61.0","@typescript-eslint/eslint-plugin":"^5.61.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y-menu-2_1.2.0_1696587040380_0.48871677293000837","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@barrierefrei/a11y-menu-2","author":{"name":"Wanja Friedemann Karl"},"keywords":["a11y","accessibility","accessible","aria","disclosure","menu","nav","npm","typescript","w3c","wai-aria"],"version":"1.3.0","description":"A fully accessible menu","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","format":"prettier --write \"./**/*.(json|ts|yml|js)\"","lint":"eslint -c .eslintrc.json ./src --fix","prepare":"npm run build","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags","test":"jest --config jestconfig.json"},"repository":{"type":"git","url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git"},"license":"ISC","bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","devDependencies":{"@types/jest":"^29.5.2","@typescript-eslint/eslint-plugin":"^5.61.0","@typescript-eslint/parser":"^5.61.0","eslint":"^8.44.0","eslint-plugin-jsdoc":"^46.4.3","jest":"^29.6.1","jest-environment-jsdom":"^29.6.1","prettier":"^3.0.0","ts-jest":"^29.1.1","typescript":"^5.1.6"},"_id":"@barrierefrei/a11y-menu-2@1.3.0","gitHead":"526f175cb736ffe62cbe56132866423fef33a080","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-Qa9FwsgDd0T9Hh7y9GTIxB79O8SPUqcfpS35QHYRm0UIQSPK7saOCTuQa1aYAXYRqIurePqQabT2LauprWu1lQ==","shasum":"96dce0cbf0c2d4e3960e8eb0d445fc84c6df4fa8","tarball":"https://registry.npmjs.org/@barrierefrei/a11y-menu-2/-/a11y-menu-2-1.3.0.tgz","fileCount":8,"unpackedSize":45333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBer4SAk+2gLByQfzVaW1TPeSLMdlurmKG4VMCqNXv7iAiEAx1dRLIepvSKwrFlDseEYlRNmj+jZMgT0EOG1BM9zfh8="}]},"_npmUser":{"name":"wanjapflueger","email":"git@wanjapflueger.de"},"directories":{},"maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/a11y-menu-2_1.3.0_1735832864277_0.09684434021135968"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-14T09:48:19.112Z","modified":"2025-01-02T15:47:44.686Z","1.0.0":"2023-09-14T09:48:19.412Z","1.0.1":"2023-09-14T12:45:34.561Z","1.1.0":"2023-09-15T14:13:43.410Z","1.2.0":"2023-10-06T10:10:40.603Z","1.3.0":"2025-01-02T15:47:44.466Z"},"bugs":{"url":"https://gitlab.com/barrierefrei/a11y-menu-2/issues"},"author":{"name":"Wanja Friedemann Karl"},"license":"ISC","homepage":"https://gitlab.com/barrierefrei/a11y-menu-2#readme","keywords":["a11y","accessibility","accessible","aria","disclosure","menu","nav","npm","typescript","w3c","wai-aria"],"repository":{"type":"git","url":"git+ssh://git@gitlab.com/barrierefrei/a11y-menu-2.git"},"description":"A fully accessible menu","maintainers":[{"name":"wanjapflueger","email":"git@wanjapflueger.de"}],"readme":"# a11y-menu-2\n\nA menu that is fully accessible. It has no design or theme applied. That way you can be certain the menu is usable and accessible and you can apply your own styles.\n\n[![Pipeline status](https://gitlab.com/barrierefrei/a11y-menu-2/badges/master/pipeline.svg)](https://gitlab.com/barrierefrei/a11y-menu-2/-/pipelines)\n![npm](https://img.shields.io/npm/v/@barrierefrei/a11y-menu-2)\n\nThe code is based on the recommendations made by the [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) and has some extra features.\n\nKey features:\n\n- [Keyboard support](#keyboard-support)\n- [State changes](#state-changes)\n- [Events](#events)\n- [Tested](#accessibility-compliance-report)\n\n---\n\n## Table of contents\n\n- [a11y-menu-2](#a11y-menu-2)\n - [Table of contents](#table-of-contents)\n - [Requirements](#requirements)\n - [Changelog](#changelog)\n - [Install](#install)\n - [Usage](#usage)\n - [HTML](#html)\n - [JavaScript](#javascript)\n - [Parameters](#parameters)\n - [State changes](#state-changes)\n - [Events](#events)\n - [Keyboard support](#keyboard-support)\n - [Styles](#styles)\n - [Selectors](#selectors)\n - [Motivation](#motivation)\n - [Accessibility Compliance Report](#accessibility-compliance-report)\n\n## Requirements\n\n- You need to be able to import _JavaScript_ files\n- Valid HTML structure for a navigation (see [Example](#html))\n\n## Changelog\n\nSee [changelog.md](https://gitlab.com/barrierefrei/a11y-menu-2/-/blob/master/changelog.md).\n\n## Install\n\n```\nnpm i @barrierefrei/a11y-menu-2\n```\n\n## Usage\n\n### HTML\n\nThe following example contains all nessessary attributes like `aria-expanded`, `aria-controls`, `inert` and `aria-label`.\n\n[HTML example file: docs/markup.html](https://gitlab.com/barrierefrei/a11y-menu-2/-/blob/master/docs/markup.html)\n\nThe script will automatically add the `aria-current=\"page\"` attribute to any link, that matches the current URL. It will also add `data-current-parent` to any parent `HTMLLiElement`s.\n\n### JavaScript\n\n```js\nimport { A11yMenu2 } from '@barrierefrei/a11y-menu-2';\n\nconst myMenu = new A11yMenu2({\n nav: document.querySelector('nav'),\n});\n```\n\nYou can also call a method `closeAll` to close all menu items. You could run this on any `Event`.:\n\n```js\n/** Close all menu item on a button click */\ndocument.getElementById('close')?.addEventListener('click', () => {\n myMenu.closeAll();\n});\n```\n\nAlso check out [Events](#events).\n\n#### Parameters\n\nSee `ParameterOptions` in [src/index.ts](https://gitlab.com/barrierefrei/a11y-menu-2/-/blob/master/src/index.ts).\n\n#### State changes\n\nState changes are mapped with [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA).\n\nButtons that control submenus will change their `aria-expanded` attribute and the `inert` attribute of the associated submenu.\n\nExample of a **collapsed** submenu:\n\n```html\n\n
Submenu
\n```\n\nExample of an **expanded** submenu:\n\n```html\n\n
Submenu
\n```\n\n#### Events\n\nSome custom events will be fired. Checkout all available events at [src/\\_events.ts](https://gitlab.com/barrierefrei/a11y-menu-2/-/blob/master/src/_events.ts)\n\n```js\nconst myMenu = new A11yMenu2({ ... })\n\nmyMenu.onEvent('onSubmenuOpen', (options) => {\n console.log('A submenu was opened', options);\n console.log('The trigger is:', options.currentTrigger);\n console.log('The submenu is:', options.currentSubmenu);\n console.log('The navigation is:', options.nav);\n})\n```\n\n#### Keyboard support\n\n| Key | Function |\n| ----------------- | --------------------------------------------------------------------------------------------------------------- |\n| Tab / Shift + Tab | Move keyboard focus among top-level buttons and if a submenu is open, into and through links in the submenu. |\n| Escape | If a submenu is open, closes it and sets focus on the button that controls that submenu. |\n| Home | If focus is on a link/button, and it is not the first link/button, moves focus to the first link/button (toplevel). |\n| End | If focus is on a link/button, and it is not the last link/button, moves focus to the last link/button (toplevel). |\n|Space or Enter|If focus is on a button that triggers a submenu, activates the button, which toggles the visibility of the submenu (`inert`). If focus is on a link: 1.) If any link has aria-current set, removes it. 2.) Sets `aria-current=\"page\"` on the focused link. 3.) Activates the focused link (`aria-expanded=\"true\"`).|\n\n### Styles\n\nThe menu does not come with any design or theme applied.\n\n#### Selectors\n\nTo apply styles for different states, use these CSS selectors:\n\n[CSS example file: docs/selectors.css](https://gitlab.com/barrierefrei/a11y-menu-2/-/blob/master/docs/selectors.css)\n\n## Motivation\n\nThis 📦 package is a variant of another accessible menu. While you can navigate [@wanjapflueger/a11y-menu](https://www.npmjs.com/package/@wanjapflueger/a11y-menu) with the **arrow keys**, this 📦 package [@barrierefrei/a11y-menu-2](https://www.npmjs.com/package/@barrierefrei/a11y-menu-2) can be navigated with the **tab keys**.\n\nThe reason for this is, that with [@wanjapflueger/a11y-menu](https://www.npmjs.com/package/@wanjapflueger/a11y-menu) complex HTML that is not part of the menu structure will break the code, because it relies on a perfekt structure.\n\nThis approach is more open. The HTML may contains unordered lists `