{"id":22279291,"url":"https://github.com/19h47/19h47-tabs","last_synced_at":"2025-07-28T18:31:33.710Z","repository":{"id":41714487,"uuid":"160532223","full_name":"19h47/19h47-tabs","owner":"19h47","description":"📂","archived":false,"fork":false,"pushed_at":"2024-03-29T06:08:45.000Z","size":1826,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T06:07:25.699Z","etag":null,"topics":["javascript","tab","tablist","tabs","tabulation"],"latest_commit_sha":null,"homepage":"https://19h47.github.io/19h47-tabs/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/19h47.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-12-05T14:41:58.000Z","updated_at":"2024-04-15T13:59:13.374Z","dependencies_parsed_at":"2024-04-15T13:59:05.477Z","dependency_job_id":"66b5c489-9dd9-42df-90fd-e084723dd8bb","html_url":"https://github.com/19h47/19h47-tabs","commit_stats":{"total_commits":109,"total_committers":3,"mean_commits":"36.333333333333336","dds":0.3027522935779816,"last_synced_commit":"b57c24c3bd9007ed53f07d737d130d1204ccc59a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/19h47","download_url":"https://codeload.github.com/19h47/19h47-tabs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227942094,"owners_count":17844717,"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":["javascript","tab","tablist","tabs","tabulation"],"created_at":"2024-12-03T15:18:55.916Z","updated_at":"2024-12-03T15:18:56.625Z","avatar_url":"https://github.com/19h47.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @19h47/tabs\n\n\u003e Tabulation partout, tabulation nulle part\n\n## Installation\n\n```\nyarn add @19h47/tabs\n```\n\n## Usage\n\n```js\nimport Tabs from '@19h47/tabs';\n\nconst $element = document.querySelector('.js-tabs');\nconst tabs = new Tabs($element);\n\ntabs.init();\n```\n\n### Tablist\n\nThe element that serves as a container for the set of tabs. The `role=\"tablist\"` attribute is required.  \nThe `aria-label=\"\"` attribute provides a label that describes the purpose of the set of tabs.\n\n```html\n\u003cul role=\"tablist\" aria-label=\"navigation\"\u003e\n\t\u003cli\u003e\n\t\t\u003cbutton\n\t\t\ttype=\"button\"\n\t\t\tclass=\"is-active\"\n\t\t\trole=\"tab\"\n\t\t\taria-selected=\"true\"\n\t\t\taria-controls=\"home-tab\"\n\t\t\tid=\"home\"\n\t\t\u003e\n\t\t\tHome\n\t\t\u003c/button\u003e\n\t\u003c/li\u003e\n\t\u003cli\u003e\n\t\t\u003cbutton\n\t\t\ttype=\"button\"\n\t\t\trole=\"tab\"\n\t\t\taria-selected=\"false\"\n\t\t\taria-controls=\"project-tab\"\n\t\t\tid=\"project\"\n\t\t\ttabindex=\"-1\"\n\t\t\u003e\n\t\t\tProject\n\t\t\u003c/button\u003e\n\t\u003c/li\u003e\n\t\u003cli\u003e\n\t\t\u003cbutton\n\t\t\ttype=\"button\"\n\t\t\trole=\"tab\"\n\t\t\taria-selected=\"false\"\n\t\t\taria-controls=\"contact-tab\"\n\t\t\tid=\"contact\"\n\t\t\ttabindex=\"-1\"\n\t\t\tdata-deletable=\"\"\n\t\t\u003e\n\t\t\tContact\n\t\t\u003c/button\u003e\n\t\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Tab\n\nAn element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.\n\n```html\n\u003cbutton\n\ttype=\"button\"\n\trole=\"tab\"\n\taria-selected=\"false\"\n\taria-controls=\"foo-tab\"\n\tid=\"foo\"\n\ttabindex=\"-1\"\n\u003e\n\tProject\n\u003c/button\u003e\n```\n\nThe `role=\"tab\"` attribute is required.\n\nThe `aria-controls=\"foo-tab\"` refers to the id of the tabpanel element associated with the tab.\n\nSince an HTML button element is used for the tab, it is not necessary to set `tabindex=\"0\"` on the selected (active) tab element.\n\nIs the tabulation deletable ? You can set up this option by adding the `data-deletable` attribute on button.\n\nTo active the button on first load, add a `is-active` class to the button, remove the `tabindex` attribute and switch to `true` the `aria-selected` attribute.\n\n### Tabpanel\n\nThe element that contains the content associated with a tab.\n\n```html\n\u003csection tabindex=\"0\" role=\"tabpanel\" aria-labelledby=\"foo\" id=\"foo-tab\"\u003e\n\t\u003cp\u003e\n\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil hic, vero. Fugiat voluptas\n\t\tex consequatur hic nemo officia iure placeat non, pariatur, dolore natus nobis, tempore\n\t\tdolores dicta nisi inventore.\n\t\u003c/p\u003e\n\u003c/section\u003e\n```\n\nTo active panel on first load, add a `is-active` class to it.\n\n## Keyboard support\n\n| Key                       | Function                                                                                                                                                                                                                       |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Tab                       | \u003cul\u003e\u003cli\u003eWhen focus moves into the tab list, places focus on the active tab element\u003c/li\u003e\u003cli\u003eWhen the tab list contains the focus, moves focus to the next element in the tab sequence, which is the \u003ccode\u003etabpanel\u003c/code\u003e element.\u003c/li\u003e\u003c/ul\u003e |\n| Enter\u003cbr\u003eSpace            | When a tab has focus, activates the tab, causing its associated panel to be displayed.                                                                                                                                         |\n| Right Arrow               | When a tab has focus:\u003cul\u003e\u003cli\u003eMoves focus to the next tab.\u003c/li\u003e\u003cli\u003eIf focus is on the last tab, moves focus to the first tab.\u003c/li\u003e\u003c/ul\u003e                                                                                         |\n| Left Arrow                | When a tab has focus:\u003cul\u003e\u003cli\u003eMoves focus to the previous tab.\u003c/li\u003e\u003cli\u003eIf focus is on the first tab, moves focus to the last tab.\u003c/li\u003e\u003c/ul\u003e                                                                                     |\n| Home\u003cbr\u003e`fn + left arrow` | When a tab has focus, moves focus to the first tab.                                                                                                                                                                            |\n| End\u003cbr\u003e`fn + right arrow` | When a tab has focus, moves focus to the last tab.                                                                                                                                                                             |\n| Delete                    | When focus is on the **Contact** tab, removes the tab from the tab list and places focus on the previous tab.                                                                                                                  |\n\n## Options\n\n| Option   | Type     | Default  | Description                                                                                                                                                    |\n| -------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| delay    | integer  | 0        | Determine whether there should be a delay when user navigates with the arrow keys                                                                              |\n| hash     | boolean  | true     |                                                                                                                                                                |\n| callback | function | () =\u003e {} | A callback fired right before `Tab.activate` event. Useful for animation or to fetch data for instance. Don't use arrow function if you need to access `this`. |\n\n```javascript\nimport Tabs from '@19h47/tabs';\n\nconst $element = document.querySelector('.js-tabs');\nconst tabs = new Tabs($el, {\n\tcallback() {\n\t\treturn new Promise(resolve =\u003e {\n\t\t\t// animate, fetch data, use this, do your stuff, etc.\n\t\t\tresolve();\n\t\t});\n\t},\n});\n\ntabs.init();\n```\n\n## Events\n\n| Event        | Arguments | Description                                                                   |\n| ------------ | --------- | ----------------------------------------------------------------------------- |\n| Tab.activate | event     | Detail object containing current **controls** id, and current DOM **element** |\n| Tab.delete   | event     | Detail object containing current **controls** id, and current DOM **element** |\n\n```javascript\nimport Tabs from '@19h47/tabs';\n\nconst $element = document.querySelector('.js-tabs');\nconst tabs = new Tabs($element);\n\ntabs.init();\n\ntabs.tabs.forEach($tab =\u003e {\n\t$tab.el.addEventListener('Tab.activate', ({ detail }) =\u003e {\n\t\tconst { controls, element } = detail;\n\t\tconsole.log(controls, element);\n\t});\n\t$tab.el.addEventListener('Tab.delete', ({ detail }) =\u003e {\n\t\tconst { controls, element } = detail;\n\t\tconsole.log(controls, element);\n\t});\n});\n```\n\n## Methods\n\n| Method      |         |\n| ----------- | ------- |\n| `destroy()` | Destroy |\n| `init()`    | Create  |\n| `create()`  | Create  |\n\n## Build Setup\n\n```bash\n\n# install dependencies\n$ yarn install\n\n# serve with hot reload at localhost:3000\n$ yarn start\n\n# build for production\n$ yarn prod\n\n```\n\n## Example\n\nAn example is located right [here](https://19h47.github.io/19h47-tabs/), see [sources](/docs/index.html).\n\n## Acknowledgments\n\n-   [Deciding When to Make Selection Automatically Follow Focus](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus)\n-   [Example of Tabs with Manual Activation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/)\n-   [Example of Tabs with Automatic Activation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/)\n-   [Keycode](https://keycode.info/) by [Wes Bos](https://wesbos.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19h47%2F19h47-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F19h47%2F19h47-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19h47%2F19h47-tabs/lists"}