{"id":31655659,"url":"https://github.com/bbb/testing-a11y","last_synced_at":"2025-10-07T13:50:54.336Z","repository":{"id":38868151,"uuid":"277330421","full_name":"BBB/testing-a11y","owner":"BBB","description":"A library for testing and accessibility with react/ react-native","archived":false,"fork":false,"pushed_at":"2023-03-01T23:00:22.000Z","size":715,"stargazers_count":4,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-04T13:50:40.214Z","etag":null,"topics":["a11y","accessibility","react","react-native","testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/BBB.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}},"created_at":"2020-07-05T15:31:15.000Z","updated_at":"2022-10-18T21:15:40.000Z","dependencies_parsed_at":"2023-02-17T11:30:50.772Z","dependency_job_id":null,"html_url":"https://github.com/BBB/testing-a11y","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/BBB/testing-a11y","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBB%2Ftesting-a11y","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBB%2Ftesting-a11y/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBB%2Ftesting-a11y/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBB%2Ftesting-a11y/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BBB","download_url":"https://codeload.github.com/BBB/testing-a11y/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBB%2Ftesting-a11y/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278786690,"owners_count":26045588,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react","react-native","testing"],"created_at":"2025-10-07T13:50:52.664Z","updated_at":"2025-10-07T13:50:54.329Z","avatar_url":"https://github.com/BBB.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003etesting-a11y\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nSome tools to make testing and accessibilty play a bit nicer with react/ react-native\n\u003c/p\u003e\n\n### Example\n\nYou have a component that you'd like to write integration tests for in the simulator using something like appium or detox.\n\nYou've added accessibility, and platform specific code. It's alot to remember for each place you'd like an ID, or just some a11y text.\n\n```typescript\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport const testID = \"amount\";\nconst isTesting = () =\u003e global.TEST_MODE === true;\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cText\u003eLabel\u003c/Text\u003e\n    \u003cText\n      testID={testID}\n      accessible={true}\n      accessibilityLabel={isTesting() ? testID : \"The price of the item\"}\n    \u003e\n      £50.00\n    \u003c/Text\u003e\n  \u003c/\u003e\n);\n```\n\nThat's a load of juggling for every component\n\nEnter `testing-a11y`!\n\n```typescript\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\nimport { a11yLabel, a11yOf, a11yProps } from \"./lib/testID\";\n\nexport const amountID = a11yOf(\"amount\", \"The price of the item\");\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cText\u003eLabel\u003c/Text\u003e\n    \u003cText {...amountID.asProps()}\u003e£50.00\u003c/Text\u003e\n  \u003c/\u003e\n);\n```\n\nMuch simpler! The library takes care of the platform/ a11y switching for you, and allows you to store one reference for testID and a11yLabels in a single place.\n\nWant a unique id for an item in a list? `testing-a11y` can do that too, simply call `amountID(ix)` instead of passing it:\n\n```typescript\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\nimport { a11yLabel, a11yOf } from \"./lib/testID\";\n\nexport const amountID = a11yOf(\"amount\", \"The price of the item\");\n\nexport default (props) =\u003e (\n  \u003c\u003e\n    {props.items.map((item, ix) =\u003e {\n      return (\n        \u003cText\u003e{item.name}\u003c/Text\u003e\n        \u003cText {...amountID(ix).asProps()}\u003e{item.amount}\u003c/Text\u003e\n      )\n    })}\n  \u003c/\u003e\n);\n```\n\nImagine you have a common component used all over your app. Each time you use it, because you want it to be easily selectable, you end up passing a differentiating string through to the component to add to the test.\n\n`testing-a11y` simplifies this by allowing you to wrap components. Everything inside the wrapper will have the prefix added to it's testID!\n\n```typescript\nimport * as React from \"react\";\nimport { Text, Button } from \"react-native\";\nimport { a11yLabel, a11yOf } from \"./lib/testID\";\n\nexport const submitButtonID = a11yOf(\"SubmitButton\");\n\nexport const SubmitButton: React.SFC\u003c{}\u003e = (props) =\u003e {\n  return (\n    \u003cButton\n      title={\"Submit\"}\n      onPress={() =\u003e void 0}\n      {...submitButtonID().asProps()}\n    /\u003e\n  );\n};\n\nexport default (props) =\u003e (\n  \u003c\u003e\n    \u003cTestIDPrefix value=\"Form\"\u003e\n      \u003cTestIDPrefix value=\"InnerForm\"\u003e\n        \u003cSubmitButton /\u003e\n      \u003c/TestIDPrefix\u003e\n    \u003c/TestIDPrefix\u003e\n    \u003cTestIDPrefix value=\"DifferentForm\"\u003e\n      \u003cSubmitButton /\u003e\n    \u003c/TestIDPrefix\u003e\n  \u003c/\u003e\n);\n```\n\nYou can now select the two different buttons with:\n\n```typescript\nimport { a11yProps } from \"testing-a11y\";\n\nconst firstButton = submitButtonID(\"Form.InnerForm\").asTestID();\nconst otherButton = submitButtonID(\"DifferentForm\").asTestID();\n```\n\nMuch cleaner!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbb%2Ftesting-a11y","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbb%2Ftesting-a11y","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbb%2Ftesting-a11y/lists"}