{"id":27633485,"url":"https://github.com/surveyjs/axe-reporter","last_synced_at":"2025-04-23T18:17:05.690Z","repository":{"id":288389028,"uuid":"966845788","full_name":"surveyjs/axe-reporter","owner":"surveyjs","description":"Axe HTML Reporter","archived":false,"fork":false,"pushed_at":"2025-04-23T12:02:16.000Z","size":324,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T18:16:49.006Z","etag":null,"topics":["accessibility-checker","axe","html","react","tool"],"latest_commit_sha":null,"homepage":"https://surveyjs.github.io/axe-reporter/","language":"JavaScript","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/surveyjs.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,"zenodo":null}},"created_at":"2025-04-15T14:39:41.000Z","updated_at":"2025-04-23T12:02:20.000Z","dependencies_parsed_at":"2025-04-17T22:16:08.341Z","dependency_job_id":null,"html_url":"https://github.com/surveyjs/axe-reporter","commit_stats":null,"previous_names":["surveyjs/axe-reporter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Faxe-reporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Faxe-reporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Faxe-reporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Faxe-reporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surveyjs","download_url":"https://codeload.github.com/surveyjs/axe-reporter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250487522,"owners_count":21438612,"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":["accessibility-checker","axe","html","react","tool"],"created_at":"2025-04-23T18:17:04.964Z","updated_at":"2025-04-23T18:17:05.674Z","avatar_url":"https://github.com/surveyjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Axe HTML Reporter\n\nA React-based HTML reporter for [axe-core](https://github.com/dequelabs/axe-core) accessibility testing results. This component provides an interactive and visually appealing UI that displays lists of passed and failed accessibility checks and detailed information about each issue.\n\n## Features\n\n- 📊 Visual percentage gauge showing overall accessibility score\n- 📋 Summary table of accessibility violations\n- 🔍 Detailed view of each accessibility rule check\n- 📑 Collapsible sections for passed and failed checks\n- 🏷️ WCAG tag formatting and categorization\n- 📱 Responsive design\n- 🎨 Customizable styling through CSS modules\n\n## Installation\n\n```bash\nnpm install axe-html-reporter\n# or\nyarn add axe-html-reporter\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport AxeReport from 'axe-html-reporter';\n\nfunction App() {\n  // Example axe-core results\n  const axeResults = {\n    passes: [\n      {\n        id: \"color-contrast\",\n        impact: \"serious\",\n        tags: [\"wcag2aa\", \"wcag143\"],\n        description: \"Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds\",\n        help: \"Elements must have sufficient color contrast\",\n        helpUrl: \"https://dequeuniversity.com/rules/axe/4.4/color-contrast\",\n        nodes: []\n      }\n    ],\n    violations: [\n      {\n        id: \"image-alt\",\n        impact: \"critical\",\n        tags: [\"wcag2a\", \"wcag111\", \"section508\", \"section508.22.a\"],\n        description: \"Ensures \u003cimg\u003e elements have alternate text or a role of none or presentation\",\n        help: \"Images must have alternate text\",\n        helpUrl: \"https://dequeuniversity.com/rules/axe/4.4/image-alt\",\n        nodes: []\n      }\n    ]\n  };\n\n  return (\n    \u003cAxeReport \n      data={axeResults}\n      info1=\"Tested on: example.com\"\n      info2=\"Date: 2025-04-17\"\n    /\u003e\n  );\n}\n```\n\n## Components\n\n### `AxeReport`\n\nThe main component that displays the complete accessibility report.\n\nProps:\n\n- `data`: `object`\\\nAn `axe-core` results object that contains the `passes` and `violations` arrays.\n- `info1`: `string`\\\nAdditional information to display in the header.\n- `info2`: `string`\\\nAdditional information to display in the header.\n\n### `PercentageGauge`\n\nA circular gauge component that displays the overall accessibility score.\n\nProps:\n\n- `percentage`: `number`\\\nA percentage value to display (0-100).\n- `size`: `number`\\\nThe size of the gauge in pixels.\n- `strokeWidth`: `number`\\\nThe width of the gauge's stroke.\n- `color`: `string`\\\nThe color of the progress indicator.\n- `backgroundColor`: `string`\\\nThe color of the background track.\n- `textColor`: `string`\\\nThe color of the percentage text.\n- `textSize`: `number`\\\nThe size of the percentage text.\n\n### `ReportSection`\n\nA collapsible section component that displays a list of accessibility check results.\n\nProps:\n\n- `title`: `string`\\\nThe section title.\n- `data`: `object[]`\\\nAn array of accessibility check results.\n\n### `ReportItem`\n\nA component that displays detailed information about a single accessibility rule check.\n\nProps:\n\n- `rule`: `object`\\\nAn accessibility rule data object.\n\n### `ReportSummary`\n\nA table component that displays a summary of accessibility rule violations.\n\nProps:\n\n- `data`: `object[]`\\\nAn array of accessibility rule violations.\n\n### `RuleSummary`\n\nA table component that displays detailed information about nodes affected by an accessibility rule.\n\nProps:\n\n- `nodes`: `object[]`\\\nAn array of DOM nodes affected by the rule.\n\n## Styling\n\nThe component [uses CSS modules](./src/styles/) for styling. You can customize the appearance by overriding the CSS classes in your own stylesheet.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n## Acknowledgments\n\n- [axe-core](https://github.com/dequelabs/axe-core) for the accessibility testing engine\n- [Original axe-html-reporter](https://github.com/lpelypenko/axe-html-reporter) for inspiration ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurveyjs%2Faxe-reporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurveyjs%2Faxe-reporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurveyjs%2Faxe-reporter/lists"}