{"id":24440066,"url":"https://github.com/expediagroup/a11y-tools","last_synced_at":"2025-04-12T19:11:51.616Z","repository":{"id":143828125,"uuid":"184441413","full_name":"ExpediaGroup/a11y-tools","owner":"ExpediaGroup","description":"Client side A11y tools for trapping and tracking user focus. ","archived":false,"fork":false,"pushed_at":"2024-03-05T05:33:34.000Z","size":29,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T13:37:28.274Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ExpediaGroup.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-05-01T15:54:37.000Z","updated_at":"2020-09-10T23:42:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"168ad310-68be-4695-9f31-7e3933dd5cd0","html_url":"https://github.com/ExpediaGroup/a11y-tools","commit_stats":null,"previous_names":["homeaway/a11y-tools"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaGroup%2Fa11y-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaGroup%2Fa11y-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaGroup%2Fa11y-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExpediaGroup%2Fa11y-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ExpediaGroup","download_url":"https://codeload.github.com/ExpediaGroup/a11y-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618281,"owners_count":21134201,"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":[],"created_at":"2025-01-20T20:27:59.894Z","updated_at":"2025-04-12T19:11:51.595Z","avatar_url":"https://github.com/ExpediaGroup.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# a11y-tools\n\n* [Introduction](#introduction)\n* [Maintainers](#maintainers)\n* [Usage](#usage)\n* [Development](#development)\n* [Further Reading](#further-reading)\n\n## \u003ca name=\"introduction\"\u003e\u003c/a\u003eIntroduction\nHelper library with focus accessibility tools:\n\n`TrackFocus`, which tracks focus events caused by the keyboard and highlights them, but DOES NOT show focus state for mouse and touch events. [More Information](./markdown/TrackFocus.md)\n\n`TrapFocus`, which restricts keyboard tabbing to only focusable elements within a container. [More Information](./markdown/TrapFocus.md)\n\n\n## \u003ca name=\"maintainers\"\u003e\u003c/a\u003eMaintainers\n* Martin Note \u003cmnote@homeaway.com\u003e\n\n## \u003ca name=\"usage\"\u003e\u003c/a\u003eUsage\n\nApplication developers that want to consume this component should install the package using npm:\n\n```bash\nnpm install @vrbo/a11y-tools\n```\n\n### TrackFocus\n\nExample Usage:\n\n```javascript\n// ES6 module syntax:\nimport {TrackFocus} from '@vrbo/a11y-tools';\n\nconst trackFocus = new TrackFocus();\n\ntrackFocus.bindEvents();\n```\n\n### TrapFocus\n\nExample Usage:\n\n```javascript\nimport {TrapFocus} from '@vrbo/a11y-tools';\nimport React, {Component} from 'react';\n\nclass Example extends Component {\n    constructor(props) {\n        super(props);\n        this.trapFocus = new TrapFocus();\n        this.containerRef = React.createRef();\n    }\n\n    componentDidMount() {\n        const node = this.containerRef.current;\n        this.trapFocus.determineFocusable(node);\n    }\n\n    handleKeydown = (e) =\u003e {\n        if (e.keyCode === 9) { // Tab key\n            this.trapFocus.handleTabbing(e);\n        }\n    }\n\n    render() {\n        return (\n            \u003cdiv ref={this.containerRef} onKeydown={this.handleKeydown}\u003e\n                ...\n            \u003c/div\u003e\n        )\n    }\n}\n```\n\n## \u003ca name=\"development\"\u003e\u003c/a\u003eDevelopment\n\n| Script | Description |\n|---|---|\n| `npm install` | Install the project dependencies; once installed `npm run build` is also executed |\n| `npm start` | Run the webpack dev server and open the test harness in a browser |\n| `npm run start:silent` | Runs the webpack dev server but does not open a browser window |\n| `npm run start:docs` | Run the dev server and open the component documentation in a browser window |\n| `npm run build` | Compile Less (CSS) and Javascript assets |\n| `npm run test` | Run unit tests, stylelint, eslint and provide code coverage metrics |\n| `npm run test:unit` | Run unit tests only. To debug within the test suite pass the `--inspect` flag to `mocha` like so: `npm run test:unit -- --inspect` and add `debugger; //eslint-disable-line` to the line in the test file you would like to break on. If you need to break immediately, use `--inspect --inspect-brk`. |\n| `npm run test:style` | Run linters to verify code meets the configured `eslint` settings |\n| `npm run test:coverage` | Run `npm run test:unit` and provide metrics about coverage |\n\n### Notes\n\n- Any time the scripts related to `start` are executed the documentation or project demo is available in your browser at `localhost:8000` or `0.0.0.0:8000`.\n- To see a complete list of `npm scripts`, use: `npm run`\n\n\n### Component Documentation\n\nThe `npm run start:docs` command will build, run and launch the documentation that has been configured for the project. Documentation is configured through the `discovery.json` file in the root of the project. To add new documentation, add an entry to `discovery.json` and configure the options to point to the new markdown based documentation. Additionally, the `npm run build:docs` command is configured to build the documentation and publish it as the Github Pages content for the associated repository.\n\n## Further Reading\n\n* [Changelog](CHANGELOG.md)\n* [Code of conduct](CODE_OF_CONDUCT.md)\n* [Contributing](CONTRIBUTING.md)\n* [License](LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpediagroup%2Fa11y-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexpediagroup%2Fa11y-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpediagroup%2Fa11y-tools/lists"}