{"id":22279229,"url":"https://github.com/19h47/19h47-listbox","last_synced_at":"2025-07-28T18:31:32.834Z","repository":{"id":41723101,"uuid":"238173051","full_name":"19h47/19h47-listbox","owner":"19h47","description":"📝 ","archived":false,"fork":false,"pushed_at":"2024-11-20T08:54:22.000Z","size":1401,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-20T10:47:41.566Z","etag":null,"topics":["listbox","option"],"latest_commit_sha":null,"homepage":"https://19h47.github.io/19h47-listbox/","language":"JavaScript","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,"publiccode":null,"codemeta":null}},"created_at":"2020-02-04T09:53:12.000Z","updated_at":"2024-11-20T08:54:19.000Z","dependencies_parsed_at":"2024-10-28T09:39:30.755Z","dependency_job_id":"de1be660-a1c0-45bf-b68b-4ceef16816c5","html_url":"https://github.com/19h47/19h47-listbox","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":0.375,"last_synced_commit":"8e46a8315236f707356416749dcc0474a62cb65f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-listbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-listbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-listbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2F19h47-listbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/19h47","download_url":"https://codeload.github.com/19h47/19h47-listbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227941954,"owners_count":17844686,"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":["listbox","option"],"created_at":"2024-12-03T15:18:40.323Z","updated_at":"2024-12-03T15:18:40.916Z","avatar_url":"https://github.com/19h47.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @19h47/listbox\n\nCollapsible single-select listbox widget\n\n## Installation\n\n```\nyarn add @19h47/listbox\n```\n\n## Usage\n\n```javascript\nconst $list = document.querySelector('.js-list');\n\nconst $listbox = $list.querySelector('[role=\"listbox\"]');\nconst $button = $list.querySelector('.js-list-button');\n\n// Init box.\nconst box = new Listbox.Box($listbox);\nbox.init();\n\n// Init button.\nconst button = new Listbox.Button($button, box);\nbutton.init();\n```\n\n```html\n\u003cdiv class=\"js-list\"\u003e\n\t\u003ch2 id=\"title\"\u003eChoose an monster\u003c/h2\u003e\n\t\u003cbutton id=\"button\" aria-labelledby=\"title button\" type=\"button\"\u003eBat\u003c/button\u003e\n\t\u003cul class=\"hidden\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"title\"\u003e\n\t\t\u003cli id=\"monster-bat\" role=\"option\"\u003eBat\u003c/li\u003e\n\t\t\u003cli id=\"monster-bear\" role=\"option\"\u003eBear\u003c/li\u003e\n\t\t\u003cli id=\"monster-behir\" role=\"option\"\u003eBehir\u003c/li\u003e\n\t\t\u003cli id=\"monster-beholder\" role=\"option\"\u003eBeholder\u003c/li\u003e\n\t\t\u003cli id=\"monster-boar\" role=\"option\"\u003eBoar\u003c/li\u003e\n\t\t\u003cli id=\"monster-bookworm\" role=\"option\"\u003eBookworm\u003c/li\u003e\n\t\t\u003cli id=\"monster-brownie\" role=\"option\"\u003eBrownie\u003c/li\u003e\n\t\t\u003cli id=\"monster-bugbear\" role=\"option\"\u003eBugbear\u003c/li\u003e\n\t\t\u003cli id=\"monster-carrion\" role=\"option\"\u003eCarrion crawler\u003c/li\u003e\n\t\t\u003cli id=\"monster-catoblepas\" role=\"option\"\u003eCatoblepas\u003c/li\u003e\n\t\t\u003cli id=\"monster-cats-great\" role=\"option\"\u003eCats, great\u003c/li\u003e\n\t\t\u003cli id=\"monster-cave-fisher\" role=\"option\"\u003eCave fisher\u003c/li\u003e\n\t\t\u003cli id=\"monster-centaur-sylvan\" role=\"option\"\u003eCentaur, sylvan\u003c/li\u003e\n\t\t\u003cli id=\"monster-centipede\" role=\"option\"\u003eCentipede\u003c/li\u003e\n\t\t\u003cli id=\"monster-chimera\" role=\"option\"\u003eChimera\u003c/li\u003e\n\t\t\u003cli id=\"monster-cockatrice\" role=\"option\"\u003eCockatrice\u003c/li\u003e\n\t\t\u003cli id=\"monster-coualt\" role=\"option\"\u003eCouatl\u003c/li\u003e\n\t\t\u003cli id=\"monster-dragon-turtle\" role=\"option\"\u003eDragon turtle\u003c/li\u003e\n\t\t\u003cli id=\"monster-hydra\" role=\"option\"\u003eHydra\u003c/li\u003e\n\t\t\u003cli id=\"monster-minotaur\" role=\"option\"\u003eMinotaur\u003c/li\u003e\n\t\t\u003cli id=\"monster-ogre\" role=\"option\"\u003eOgre\u003c/li\u003e\n\t\t\u003cli id=\"monster-vampire\" role=\"option\"\u003eVampire\u003c/li\u003e\n\t\t\u003cli id=\"monster-wyver\" role=\"option\"\u003eWyvern\u003c/li\u003e\n\t\t\u003cli id=\"monster-yeti\" role=\"option\"\u003eYeti\u003c/li\u003e\n\t\t\u003cli id=\"monster-yuan-ti\" role=\"option\"\u003eYuan-ti\u003c/li\u003e\n\t\t\u003cli id=\"monster-zombie\" role=\"option\"\u003eZombie\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Keyboard Support\n\nThe example listbox on this page implements the following keyboard interface.\n\n| Key                  | Function                                                                                                                                                                                                                                        |\n| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Enter                | - If the focus is on the button, expands the listbox and places focus on the currently selected option in the list.\u003cbr\u003e- If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label.        |\n| Escape               | If the listbox is displayed, collapses the listbox and moves focus to the button.                                                                                                                                                               |\n| Down Arrow           | - Moves focus to and selects the next option.\u003cbr\u003e- If the listbox is collapsed, also expands the list.                                                                                                                                          |\n| Up Arrow             | - Moves focus to and selects the previous option.\u003cbr\u003e- If the listbox is collapsed, also expands the list.                                                                                                                                      |\n| Home                 | If the listbox is displayed, moves focus to and selects the first option.                                                                                                                                                                       |\n| Printable Characters | - Type a character: focus moves to the next item with a name that starts with the typed character.\u003cbr\u003e- Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed. |\n\n## Event\n\n```\nButton.change\n```\n\n## Options\n\n```\ndelay\n```\n\n## Example\n\nAn example is located right [here](https://19h47.github.io/19h47-list/), see [sources](/docs/index.html).\n\n## References\n\n-   [Example of Tabs with Manual Activation](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html)\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-listbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F19h47%2F19h47-listbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19h47%2F19h47-listbox/lists"}