{"id":13829010,"url":"https://github.com/googlecreativelab/creatability-components","last_synced_at":"2025-05-16T15:06:36.803Z","repository":{"id":33383601,"uuid":"153687898","full_name":"googlecreativelab/creatability-components","owner":"googlecreativelab","description":"Web components for making creative tools more accessible.","archived":false,"fork":false,"pushed_at":"2025-02-13T02:16:23.000Z","size":5702,"stargazers_count":293,"open_issues_count":24,"forks_count":51,"subscribers_count":23,"default_branch":"dev","last_synced_at":"2025-04-12T11:58:34.009Z","etag":null,"topics":["a11y","accessibility","aria","posenet","webcomponents"],"latest_commit_sha":null,"homepage":"https://creatability.withgoogle.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlecreativelab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2018-10-18T21:09:30.000Z","updated_at":"2025-04-09T12:07:29.000Z","dependencies_parsed_at":"2024-09-24T16:02:01.140Z","dependency_job_id":"eef0b4ef-96db-4f6d-a114-c2fa2be9a9ae","html_url":"https://github.com/googlecreativelab/creatability-components","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":"0.10416666666666663","last_synced_commit":"1adb190dfa3af979d834bd047822142238759e97"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fcreatability-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fcreatability-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fcreatability-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fcreatability-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlecreativelab","download_url":"https://codeload.github.com/googlecreativelab/creatability-components/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553960,"owners_count":22090417,"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","accessibility","aria","posenet","webcomponents"],"created_at":"2024-08-04T09:03:26.919Z","updated_at":"2025-05-16T15:06:36.760Z","avatar_url":"https://github.com/googlecreativelab.png","language":"TypeScript","readme":"# Creatability Accessible Web Components\n\n[Creatability](https://experiments.withgoogle.com/collection/creatability) is a set of experiments made in collaboration with creators and allies in the accessibility community. They explore how creative tools – drawing, music, and more – can be made more accessible using web and AI technology. We hope they inspire others to make new projects, so we've started open-sourcing components here for anyone to use. Note this repo is under development. Contributions welcome!\n\n![using input tracking](https://storage.googleapis.com/creatability-github/creatability-maher.gif)\n\n\n\n## Basics\n\nCopy the packaged file in [dist/acc-components.js](https://github.com/googlecreativelab/creatability-components/raw/dev/dist/acc-components.js) into your html file and you will receive the following HTML elements:\n\n* [`\u003cacc-button\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_button_.buttonelement.html) - standard button\n* [`\u003cacc-content\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_content_.contentelement.html) - a container for main content. Easily pairs with inputs such as `\u003cacc-pose-input\u003e` and displays webcam for using body as cursor input.\n* [`\u003cacc-group\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_group_.groupelement.html) - a group of UI controls\n* [`\u003cacc-input-mode-select\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_input_mode_select_.inputmodeselectelement.html) - used to select the current input method (i.e. mouse/keyboard/touch or body pose).\n* [`\u003cacc-item\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_item_.itemelement.html) - data used to populate an `\u003cacc-select\u003e` dropdown or an `\u003cacc-radio-group\u003e`.\n* [`\u003cacc-mouse-input\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_mouse_input_.mouseinputelement.html) - an input that combines mouse/keyboard/touch into one normalized input.\n* [`\u003cacc-optgroup\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_optgroup_.optgroupelement.html) - similar to `\u003coptgroup\u003e` a method of nesting within an `\u003cacc-select\u003e`\n* [`\u003cacc-pose-input\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_pose_input_.poseinputelement.html) - an element providing easy tracking of a selected body part to use as a cursor input.\n* `\u003cacc-radio-group\u003e` - a group of radio buttons\n* [`\u003cacc-range\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_range_.rangeelement.html) - a slider / range element\n* [`\u003cacc-select\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_select_.selectelement.html) - a select / dropdown element\n* [`\u003cacc-side-panel\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_side_panel_.sidepanel.html) - collapsable panel that you can place UI components in, also includes tabbable \"skip to content\" shortcut.\n* `\u003cacc-slide\u003e` - data to use as a slide within `\u003cacc-slideshow\u003e`\n* [`\u003cacc-slideshow\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_slideshow_.slideshowelement.html) - a slideshow with next/previous navigation\n* [`\u003cacc-snackbar\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_snackbar_.snackbarelement.html) - a floating temporary UI notification system. Ideal for use with ARIA-LIVE.\n* [`\u003cacc-toggle\u003e`](https://googlecreativelab.github.io/creatability-components/docs/api/classes/_components_toggle_.toggleelement.html) - similar to a checkbox\n\n\n## Usage\n\nA simple example of including the library then supporting mouse/keyboard and body tracking inputs.\n\n```html\n    \u003cbody\u003e\n        \u003c!-- webcomponents-loader loads polyfills only for browsers not supporting Shadow DOM --\u003e\n        \u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-loader.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"dist/acc-components.min.js\"\u003e\u003c/script\u003e\n\n        \u003cacc-input-mode-select\u003e\n            \u003cacc-mouse-input amplification=\"10\"\u003e\u003c/acc-mouse-input\u003e\n            \u003cacc-pose-input smoothing=\"0.5\" selected\u003e\u003c/acc-pose-input\u003e\n        \u003c/acc-input-mode-select\u003e\n\n        \u003cscript\u003e\n            const inputSelector = document.querySelector('acc-input-mode-select');\n\n            // all of the input's events bubble up to the selector\n            inputSelector.addEventListener('input', function onInput(event){\n                const input = event.target;\n                // position mapped to the content's coordinate space\n                // by default this is document.body, it can be set to any\n                // element with inputSelector.contentElement = htmlElement;\n                // or \u003cacc-input-mode-select contentselector=\"#content\"\u003e\n                // exists on individual inputs as well\n                const x = input.contentX;\n                const y = input.contentY;\n            }\n        \u003c/script\u003e\n    \u003c/body\u003e\n```\n\nIn pure JavaScript these elements behave like normal HTMLElement's:\n\n```js\n\nconst input = document.createElement('acc-pose-input');\n//or use document.querySelector('acc-pose-input')\n\ninput.addEventListener('input', (event)=\u003e{\n    console.log(event.target.position);\n});\n\n//this triggers the loading and initialization of any resources\ninput.initialize();\n\n```\n\n### Input Event Cycle\nAll input types dispatch the following events:\n\n* `'initializing'` when the input begins to load and initialize any necessary resources.\n* `'ready'` when the input has completed initializing and is now operating\n* `'input'` dispatched every time the input has a new value\n* `'stop'` dispatched if the input has stopped such as by switching inputs or calling `input.stop()`.\n* `'change'` dispatched when an attribute/property changes values\n\n\n## Side Panel and Content\n\nQuickly scaffold an application with a collapsable sidebar and content area that resizes accordingly and can display webcam when in use.\n\n```html\n\u003cacc-side-panel label=\"My Application\"\u003e\n    \u003cacc-group\u003e\n        \u003cacc-input-mode-select contentselector=\"#main-content\"\u003e\n            \u003cacc-mouse-input amplification=\"10\" enablekeyboard\u003e\u003c/acc-mouse-input\u003e\n            \u003cacc-pose-input amplification=\"3\" multiplier=\"1.01\" smoothing=\"0.75\" part=\"nose\"\u003e\u003c/acc-pose-input\u003e\n        \u003c/acc-input-mode-select\u003e\n    \u003c/acc-group\u003e\n\u003c/acc-side-panel\u003e\n\n\u003c!-- mounted attribute tells the element to be fullscree minus side-panel width --\u003e\n\u003cacc-content id=\"main-content\" webcamopacity=\"0.25\" grayscale mounted\u003e\n\u003c/acc-content\u003e\n```\n\n## Snackbar\nSnackbar is meant to be a temporary notification UI. **Snackbar is ideal for [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). To use as a Live Region YOU must add the `aria-live` attribute to the element directly in the HTML.** When its message changes (or show() is invoked) it will display for its set `duration` in seconds. Typically there is only one per application, the code below is for demonstration purposes.\n\n```html\n\u003cacc-snackbar id=\"snackbar-1\" duration=\"5\" aria-live=\"polite\" dismissable\u003e\n    \u003cstrong\u003eExample 1\u003c/strong\u003e will show for 5 seconds every time this content changes or until \"DISMISS\" is clicked\n\u003c/acc-snackbar\u003e\n\n\u003cacc-snackbar duration=\"0\" aria-live=\"assertive\" dismissable error\u003e\n    \u003cstrong\u003eExample 2\u003c/strong\u003e will show up indefinitely until \"DISMISS\" is clicked and will be styled boldly as an error alert.\n\u003c/acc-snackbar\u003e\n\n\u003cacc-snackbar aria-live=\"polite\"\u003e\n    \u003cstrong\u003eExample 3\u003c/strong\u003e will show up for 4 seconds every time its content changes.\n\u003c/acc-snackbar\u003e\n\n\n\u003cscript\u003e\n\n    setTimeout(function() {\n        // changing a snackbar's content will trigger it to show up again\n        // and with aria-live it will be read by screen readers when changed\n        const snack1 = document.querySelectorAll('#snackbar-1');\n        snack1.innerHTML = `\n            \u003cimg alt=\"A heart icon\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Love_Heart_symbol.svg/1000px-Love_Heart_symbol.svg.png\" width=\"32\"\u003e\n            \u003cdiv style=\"display: inline-block; transform: translate(0, -50%); padding-left: 8px;\"\u003e\n                \u003cstrong\u003eExample 1 updated\u003c/strong\u003e this changed message will get read by screen readers.\n            \u003c/div\u003e`;\n    }, 10000);\n\n\u003c/script\u003e\n```\n\n## Tutorial\n\nThe tutorial element gives you a simple slide show. It extends `AbstractModal` so it can be added to the screen by adding an \"open\" attribute. Each of the `\u003cacc-slide\u003e` children will be rendered as a slide-show.\n\n```html\n\u003cacc-tutorial\u003e\n    \u003cacc-slide\n        video=\"assets/s1.mp4\"\n        alt=\"don't forget to add alt text for the video\"\n        caption=\"This experiment lets you combine speech and music in a fun way.\"\u003e\u003c/acc-slide\u003e\n    \u003cacc-slide\n        caption=\"Just type some words, then set them into your own melody.\"\n        video=\"assets/s2.mp4\"\u003e\u003c/acc-slide\u003e\n    \u003cacc-slide\n        caption=\"You can change the melody using your mouse or keyboard.\"\n        video=\"assets/s3.mp4\"\u003e\u003c/acc-slide\u003e\n    \u003cacc-slide\n        caption=\"Just play around – try different voices, scales, and more.\"\n        video=\"assets/s4.mp4\"\u003e\u003c/acc-slide\u003e\n\u003c/acc-tutorial\u003e\n```\n\n## Contributors\n* [Kyle Phillips](https://github.com/hapticdata)\n* [Yotam Mann](https://github.com/tambien)\n* [Use All 5](https://github.com/useallfive)\n\n\n\n_This is not an official Google product_\n\n\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecreativelab%2Fcreatability-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglecreativelab%2Fcreatability-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecreativelab%2Fcreatability-components/lists"}