-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: deque's axe-core ally testing plugin
- Loading branch information
1 parent
58bf9f3
commit e05e65f
Showing
37 changed files
with
1,920 additions
and
543 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2020 Atanas Stoyanov | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| # Table of contents | ||
|
|
||
| - [In action](#in-action) | ||
| - [Overview](#overview) | ||
| - [Getting Started](#getting-started) | ||
| - [Install](#install) | ||
| - [Configure](#configure) | ||
| - [Pages format](#pages-format) | ||
| - [Examples](#examples) | ||
| - [Simple page](#simple-page) | ||
| - [API](#api) | ||
| - [<ins>AxeAllyBlock</ins>](#insaxeallyblockins) | ||
|
|
||
| # In action | ||
|
|
||
| [Example site](https://components-storybook-6-no-docs.netlify.app) | ||
|
|
||
| # Overview | ||
|
|
||
| Accessibility testing plugin using the [axe-core](https://github.com/dequelabs/axe-core) library from [deque](https://www.deque.com/axe/) | ||
|
|
||
| Some of the design goals: | ||
|
|
||
| - Test at the component-level. | ||
| - Provide a dashboard view to quickly see the errors and tests for the compnnt. | ||
| - Ability to select and outline the sub-elements generating the errors. | ||
| - Ability to see details from the errors and passed rules. | ||
| - Ability to review the rendered story right next to the testing panels. | ||
|
|
||
| <p align="center"> | ||
| <img src="https://github.com/ccontrols/component-controls/raw/master/misc/axe-plugin/images/axe-ally-testing.gif" alt="ally tests with axe plugin" width="738"> | ||
| </p> | ||
|
|
||
| # Getting Started | ||
|
|
||
| ## Install | ||
|
|
||
| ```sh | ||
| yarn add @component-controls/axe-plugin --dev | ||
| ``` | ||
|
|
||
| ## Configure | ||
|
|
||
| The axe-plugin is already installed part of [testing page](https://github.com/ccontrols/component-controls/blob/master/ui/pages/src/TestingPage/TestingPage.tsx) and you can also add it to any other documentation page: | ||
|
|
||
| ``` | ||
| import {...} from '@component-controls/blocks'; | ||
| import { AxeAllyBlock } from '@component-controls/axe-plugin'; | ||
| export const TestingCustomePage= () => ( | ||
| <> | ||
| <EditPage /> | ||
| <Title /> | ||
| <Subtitle /> | ||
| <Description /> | ||
| <Playground title="."> | ||
| <Story id="." /> | ||
| </Playground> | ||
| <PropsTable of="." title="Controls" visibility="controls" /> | ||
| <AxeAllyBlock title="A11y tests" /> | ||
| </> | ||
| ); | ||
| ``` | ||
|
|
||
| ## Pages format | ||
|
|
||
| The page definition files need to have a default export with the following fields | ||
|
|
||
| ```js | ||
| import React from 'react'; | ||
| export default { | ||
| // key used for navigation | ||
| key: string, | ||
| // title of the tab | ||
| title: string, | ||
| // react render function. | ||
| // active boolean - if the tab custom page is active | ||
| // storyId as a string | ||
| // Return an object that can be rendered from ReactDOM.render | ||
| render: ({ active, storyId }) => Element, | ||
| } | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Simple page | ||
|
|
||
| ```js | ||
| import React from 'react'; | ||
| import { DocsContainer, Story} from '@storybook/addon-docs/blocks'; | ||
| import { useContext, } from '@component-controls/storybook-custom-docs'; | ||
|
|
||
| const Page = () => { | ||
| const context = useContext(); | ||
| return ( | ||
| <DocsContainer context={context}><Story id={storyId}/></DocsContainer> | ||
| ) | ||
| } | ||
| export default { | ||
| key: 'docs-page', | ||
| title: 'Docs Page', | ||
| render: ({ active, storyId }) => { | ||
| return active ? <Page storyId={storyId} /> : null; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| # API | ||
|
|
||
| <react-docgen-typescript path="./src" exclude="AllyDashboard.tsx,BaseAllyBlock.tsx,HighlightSelector.tsx,NodesTable.tsx,ResultsTable.tsx,SelectionContext.tsx" /> | ||
|
|
||
| <!-- START-REACT-DOCGEN-TYPESCRIPT --> | ||
|
|
||
| ## <ins>AxeAllyBlock</ins> | ||
|
|
||
| Story block container that displays displays the [axe](https://github.com/dequelabs/axe-core) ally test results | ||
|
|
||
| _AxeAllyBlock [source code](https:/github.com/ccontrols/component-controls/tree/master/misc/axe-plugin/src/index.tsx)_ | ||
|
|
||
| ### properties | ||
|
|
||
| | Name | Type | Description | | ||
| | ------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `axeOptions` | _Spec_ | | | ||
| | `id` | _string_ | id of the story optional id to be used for the block if no id is provided, one will be calculated automatically from the title. | | ||
| | `name` | _string_ | alternatively you can use the name of a story to load from an external file | | ||
| | `title` | _string_ | optional section title for the block. | | ||
| | `description` | _string_ | optional markdown description. | | ||
| | `collapsible` | _boolean_ | if false, will nothave a collapsible frame. | | ||
| | `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box | | ||
|
|
||
| <!-- END-REACT-DOCGEN-TYPESCRIPT --> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| { | ||
| "name": "@component-controls/axe-plugin", | ||
| "version": "1.1.0", | ||
| "description": "Axe ally plugin for component-contols", | ||
| "keywords": [ | ||
| "addon", | ||
| "storybook" | ||
| ], | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.esm.js", | ||
| "typings": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist/", | ||
| "package.json", | ||
| "README.md", | ||
| "preset.js" | ||
| ], | ||
| "scripts": { | ||
| "build": "yarn cross-env NODE_ENV=production rollup -c", | ||
| "dev": "yarn cross-env NODE_ENV=development rollup -cw", | ||
| "docs": "ts-node -O '{\"module\": \"commonjs\"}' ../../scripts/docs.ts", | ||
| "fix": "yarn lint --fix", | ||
| "lint": "yarn eslint . --ext mdx,ts,tsx", | ||
| "prepare": "yarn build", | ||
| "test": "yarn jest --passWithNoTests" | ||
| }, | ||
| "homepage": "https://github.com/ccontrols/component-controls", | ||
| "bugs": { | ||
| "url": "https://github.com/ccontrols/component-controls/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/ccontrols/component-controls.git", | ||
| "directory": "misc/axe-plugin" | ||
| }, | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "@component-controls/blocks": "^1.1.0", | ||
| "@component-controls/components": "^1.1.0", | ||
| "@primer/octicons-react": "^9.6.0", | ||
| "axe-core": "^3.5.3", | ||
| "react": "^16.12.0", | ||
| "react-google-charts": "^3.0.15", | ||
| "theme-ui": "^0.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^16.9.34", | ||
| "typescript": "^3.8.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "@component-controls/blocks": "*", | ||
| "react": "*", | ||
| "theme-ui": "*" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "authors": [ | ||
| "Atanas Stoyanov" | ||
| ], | ||
| "gitHead": "c5145d66c6b8a355839e53c3bca97fd361ce9377" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { config } from '../../rollup-config'; | ||
|
|
||
| export default config({ | ||
| input: ['./src/index.ts'], | ||
| }); |
Oops, something went wrong.