{"id":26976868,"url":"https://github.com/accede-web/tablist","last_synced_at":"2025-04-03T12:17:16.171Z","repository":{"id":4967317,"uuid":"44120868","full_name":"AcceDe-Web/tablist","owner":"AcceDe-Web","description":"WAI-ARIA tab plugin without dependencies.","archived":false,"fork":false,"pushed_at":"2022-12-06T17:27:31.000Z","size":1370,"stargazers_count":20,"open_issues_count":17,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-09-23T09:19:12.096Z","etag":null,"topics":["a11y","tab-panel","tablist","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://a11y.switch.paris/onglet.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AcceDe-Web.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-12T16:49:30.000Z","updated_at":"2024-08-27T14:02:36.000Z","dependencies_parsed_at":"2023-01-13T13:19:09.822Z","dependency_job_id":null,"html_url":"https://github.com/AcceDe-Web/tablist","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AcceDe-Web%2Ftablist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AcceDe-Web%2Ftablist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AcceDe-Web%2Ftablist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AcceDe-Web%2Ftablist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AcceDe-Web","download_url":"https://codeload.github.com/AcceDe-Web/tablist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246998229,"owners_count":20866696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","tab-panel","tablist","vanilla-javascript","vanilla-js"],"created_at":"2025-04-03T12:17:15.561Z","updated_at":"2025-04-03T12:17:16.157Z","avatar_url":"https://github.com/AcceDe-Web.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AcceDe Web - tablist\n\nWAI-ARIA tab plugin without dependencies.\n\n## Requirements\n\n### HTML\n\nBasic HTML structure with roles `tablist`, `tab`, and `tabpanel`.\n\n#### HTML structure\n\n```html\n\u003cul role=\"tablist\"\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-1\"\u003eTab 1\u003c/li\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-2\"\u003eTab 2\u003c/li\u003e\n  \u003cli role=\"tab\" aria-disabled=\"true\" aria-controls=\"tab-3\"\u003eTab 3\u003c/li\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-4\"\u003eTab 4\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cdiv role=\"tabpanel\" id=\"tab-1\"\u003e\n  \u003cp\u003e---\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv role=\"tabpanel\" id=\"tab-2\"\u003e\n  \u003cp\u003e---\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv role=\"tabpanel\" id=\"tab-3\"\u003e\n  \u003cp\u003e---\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv role=\"tabpanel\" id=\"tab-4\"\u003e\n  \u003cp\u003e---\u003c/p\u003e\n\u003c/div\u003e\n```\n\nAn `aria-disabled` attribute set to `true` on a `tab` will disable the `tab` and the associated `tabpanel` making them unfocusable and unselectable.\n\nIf you wish to open one specific tab when the script starts, just add the `data-open` attribute with the value of `true` on the desired `tab`:\n\n```html\n\u003cul role=\"tablist\"\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-1\"\u003eTab 1\u003c/li\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-2\" data-open=\"true\"\u003eTab 2\u003c/li\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-3\"\u003eTab 3\u003c/li\u003e\n  \u003cli role=\"tab\" aria-controls=\"tab-4\"\u003eTab 4\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c!-- --\u003e\n```\n\n### CSS\n\nAt least a \u003cabbr title=\"Cascading Style Sheets\"\u003eCSS\u003c/abbr\u003e selector for panels to be hidden when not selected:\n\n```css\n[role=tabpanel][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/tablist\n```\n\nand later in your code:\n\n```js\nvar Tablist = require( '@accede-web/tablist' );\n\n// or\n\nimport Tablist from @accede-web/tablist\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\u003cscript src=\"./js/tablist.min.js\"\u003e\u003c/script\u003e\n```\n\nUsing the later, the script will be available on `window` under the namespace `Tablist`.\n\nNow to kick off the script:\n\n```js\n// get the tablist element\nvar list = document.querySelector( '[role=\"tablist\"]' );\n\n// create the tablist instance\nvar tablist = new window.Tablist( list );\n\n// optionnaly add callbacks to on show and hide a tab\ntablist.on( 'show', function( tab, tabPanel ){\n  …\n});\n\ntablist.on( 'hide', function( tab, tabPanel ){\n  …\n});\n\n// start the plugin\ntablist.mount();\n```\n\n## Parameters\n\nThe script takes one parameter:\n\n* the `tablist` \u003cabbr title=\"Document Object Model\"\u003eDOM\u003c/abbr\u003e element\n\nAs the script takes only one `tablist` element as parameter you have to loop over each `tablist` to kick off the script on each of them.\n\n```js\nvar lists = document.querySelectorAll( '[role=\"tablist\"]' );\n\nArray.prototype.forEach.call( lists, function( list ) {\n  new window.Tablist( list ).mount();\n});\n```\n\n## Methods\n\nThe `Tablist` constructor returns 4 methods:\n\n* `mount()` - bind all events and apply required attributes\n* `unmount()` - unbind keyboard and mouse events\n* `on( event, callback )` - bind a callback to either the `show` or `hide` event triggered when changing tab. Both `tab` and `tabPanel` HTMLElement are passed on the callback\n* `off( event, callback )` - unbind a callback to either the `show` or `hide` event triggered when changing tab\n\n## Properties\n\nTo know which `tab` and `tabPanel` is open use `tablist.current`. It will return an array containing `tab` and `tabPanel`\n\n```js\n// ES6 destructuring array\nconst { tab, tabPanel } = tablist.current;\n\ntab; // return the `tab`\ntabPanel; // return the `tabPanel`\n\n// ES5\nvar elements = tablist.current;\n\nelements.tab; // return the `tab`\nelements.tabPanel; // return the `tabPanel`\n```\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/2013/WD-wai-aria-practices-20130307/#tabpanel)\n\n* `Tab` - only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.\n* `Left Arrow` - with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.\n* `Right Arrow` - with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.\n* `Up arrow` - behaves the same as left arrow in order to support vertical tabs.\n* `Down arrow` - behaves the same as right arrow in order to support vertical tabs.\n* `Home` - with focus on a tab, pressing the Home key will move the focus to the first tab\n* `End` - with focus on a tab, pressing the End key will move the focus to the last tab\n* `Control+Up Arrow` - with focus anywhere within the tab panel, pressing Control+Up Arrow will move focus to the tab for that panel. This is not standard behavior.\n* `Control+PageUp` - When focus is inside of a tab panel, pressing Control+PageUp moves focus to the tab of the previous tab in the tab list and activates that tab. When focus is in the first tab panel in the tab list, pressing Control+PageUp will move focus to the last tab in the tab list and activate that tab.\n* `Control+PageDown` When focus is inside of a tab panel, pressing Control+PageDown moves focus to the tab of the next tab in the tab list and activates that tab. When focus is in the last tab panel in the tab list, pressing Control+PageUpwill move focus to the first tab in the tab list and activate that tab.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccede-web%2Ftablist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccede-web%2Ftablist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccede-web%2Ftablist/lists"}