{"id":22848349,"url":"https://github.com/feedzai/react-a11y-tools","last_synced_at":"2025-04-30T04:49:10.623Z","repository":{"id":40946253,"uuid":"359604020","full_name":"feedzai/react-a11y-tools","owner":"feedzai","description":"A small React component library that aims to ease the process of creating accessible design systems, web apps or websites","archived":false,"fork":false,"pushed_at":"2024-07-15T13:52:58.000Z","size":4217,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-30T04:49:05.251Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feedzai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2021-04-19T21:31:59.000Z","updated_at":"2024-08-29T05:12:06.000Z","dependencies_parsed_at":"2024-07-12T12:14:36.002Z","dependency_job_id":null,"html_url":"https://github.com/feedzai/react-a11y-tools","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":0.2962962962962963,"last_synced_commit":"fc2a874ebd3cfba86f787a12c96c2703529b3de6"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Freact-a11y-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Freact-a11y-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Freact-a11y-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Freact-a11y-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feedzai","download_url":"https://codeload.github.com/feedzai/react-a11y-tools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251644827,"owners_count":21620630,"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":"2024-12-13T04:11:29.422Z","updated_at":"2025-04-30T04:49:10.600Z","avatar_url":"https://github.com/feedzai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003e@feedzai/react-a11y-tools\u003c/h1\u003e\n\n\u003cp\u003eA small React component library that aims to ease the process of creating accessible design systems, web apps or websites\u003c/p\u003e\n\n\u003cbr /\u003e\n\n[**Read The Docs**](https://feedzai.github.io/react-a11y-tools/)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"20\" loading=\"lazy\" alt=\"Latest Release\" src=\"https://badgen.net/npm/v/@feedzai/react-a11y-tools\"/\u003e\n  \u003cimg height=\"20\" loading=\"lazy\" alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@feedzai/react-a11y-tools\"/\u003e\n  \u003cimg height=\"20\" loading=\"lazy\" alt=\"Tree Shaking Support\" src=\"https://badgen.net/bundlephobia/tree-shaking/@feedzai/react-a11y-tools\"/\u003e\n  \u003cimg height=\"20\" loading=\"lazy\" alt=\"Dependency Count\" src=\"https://badgen.net/bundlephobia/dependency-count/@feedzai/react-a11y-tools\"/\u003e\n  \u003cimg height=\"20\" loading=\"lazy\" alt=\"MIT License\" src=\"https://badgen.net/npm/license/@feedzai/react-a11y-tools\"/\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Table of Contents](#table-of-contents)\n- [The Problem](#the-problem)\n- [The Solution](#the-solution)\n- [Installation](#installation)\n- [Roadmap](#roadmap)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n  - [💡 Feature Requests](#-feature-requests)\n- [Tests](#tests)\n  - [Run all tests](#run-all-tests)\n  - [Unit tests](#unit-tests)\n  - [Cypress component tests:](#cypress-component-tests)\n  - [End-to-end tests:](#end-to-end-tests)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## The Problem\n\nWe find ourselves amidst the age of design systems, where virtually every company, regardless of size, has either established one or contemplated its creation. These systems serve as invaluable resources, equipping us with the means to swiftly construct seamless and uniform user interfaces.\n\nYet, accessibility remains a challenging endeavor, particularly when integrating frameworks like React. Whether we rely on existing design systems or embark on crafting our own from the ground up, ensuring accessibility often emerges as an afterthought. Regrettably, some companies face constraints in resources and time, making it difficult to prioritize accessibility efforts.\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## The Solution\n\nOur objective is to streamline certain aspects of the accessibility journey, focusing on key areas such as focus management, navigation, and announcements.\n\nThis library offers comprehensive accessibility features and behaviors in line with the WAI-ARIA Authoring Practices, encompassing support for screen-reader and keyboard navigation.\n\nWe refrain from imposing any specific styling methodology or design requirements. Instead, our compact package delivers essential behaviors and interactions, allowing you to concentrate on your design without constraints.\n\nAdditionally, we include a straightforward testing tool to simulate a mouse-free environment, facilitating thorough accessibility testing during development.\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## Installation\n\nTo integrate React A11y Tools into your React project directory, execute one of the following commands:\n\n```sh\n$ npm install @feedzai/react-a11y-tools\n\n# or if you use Yarn\n\n$ yarn add @feedzai/react-a11y-tools\n```\n\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## Roadmap\n\nHere is a table of the components, custom hooks and their status.\n\n✅ - Released\u003cbr/\u003e\n🛠 - Building\u003cbr/\u003e\n\n| Status | Name               |\n| ------ | ------------------ |\n| ✅     | Messages Announcer |\n| ✅     | Route Announcer    |\n| ✅     | Focus Manager      |\n| ✅     | Roving Tabindex    |\n| ✅     | Keyboard Only      |\n| ✅     | Skip Links         |\n| ✅     | Semantic Headings  |\n| ✅     | Visually Hidden    |\n| ✅     | useTabbable        |\n| ✅     | useAutoId          |\n\n\u003cbr/\u003e\n\n## Issues\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behaviour.\n\n[**See Bugs**][bugs]\n\u003cbr /\u003e\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## Tests\n\nThere are three layers of tests written for this library:\n\n- Unit tests: we use vitest\n- Component tests: we use cypress\n- End-to-end tests: we also use cypress\n\nTo run the whole suite of tests, make sure you've done the steps in [installation](#installation), then:\n\n### Run all tests\n\n```sh\nnpm run test\n```\n\n### Unit tests\n\n```sh\nnpm run test:unit\n```\n\n### Cypress component tests:\n\n```sh\nnpm run test:component-open\n```\n\n### End-to-end tests:\n\n```sh\nnpm run test:e2e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeedzai%2Freact-a11y-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeedzai%2Freact-a11y-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeedzai%2Freact-a11y-tools/lists"}