diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index 375a43e9e52..a3f26aca581 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -117,3 +117,25 @@ We have multiple tests you should update: 2. Showcase Test: `showcases/e2e/my-awesome-component/showcase-my-awesome-component.spec.ts`. Test the styling in a specific framework here and also the functionality/events. To run all tests/update the screenshots you need `Docker`. More information here: `e2e/README.md`. + +## Manually Accessibility Review + +After creating a component and writing all test, we need some manually third party accessibility review to prove that the component is stable. This process is internal and will be handled by a team specialized in accessibility testing. +During this process you should track the progress of this manual test inside `showcases/shared/_accessibility-review.json`. +Add a new entry like this: + +```json + { + "name": "button", + "status": "REVIEW", + "date": "2023-11-23" + }, +``` + +You should change the `date` prop when the first manual test starts or when it gets any update. + +The `status` can be: + +- `REVIEW`, if the manual accessibility review should happen +- `PROGRESS`, if there are any open issues after the test +- `DONE`, if the component passed the accessibility review diff --git a/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx b/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx new file mode 100644 index 00000000000..355a15795f1 --- /dev/null +++ b/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react'; +import { DBInfotext, type SemanticType } from '../../../../output/react/src'; + +export type AccessibilityReviewInfoType = { + name: string; + status: 'DONE' | 'REVIEW' | 'PROGRESS' | string; + date: string; +}; + +const AccessibilityReviewInfo = ( + accessibilityReview?: AccessibilityReviewInfoType +) => { + const [semantic, setSemantic] = useState('critical'); + const [text, setText] = useState('Missing'); + + useEffect(() => { + if (accessibilityReview && accessibilityReview.status === 'DONE') { + setSemantic('successful'); + setText('Done'); + } else if ( + accessibilityReview && + accessibilityReview.status === 'REVIEW' + ) { + setSemantic('warning'); + setText('In review'); + } else if ( + accessibilityReview && + accessibilityReview.status === 'PROGRESS' + ) { + setSemantic('warning'); + setText('In progress'); + } else { + setSemantic('critical'); + setText('Missing'); + } + }, [accessibilityReview]); + + return {text}; +}; + +export default AccessibilityReviewInfo; diff --git a/showcases/patternhub/pages/foundations/test-table/index.tsx b/showcases/patternhub/pages/foundations/test-table/index.tsx index febb52cb615..be525f8af3e 100644 --- a/showcases/patternhub/pages/foundations/test-table/index.tsx +++ b/showcases/patternhub/pages/foundations/test-table/index.tsx @@ -1,6 +1,7 @@ import DefaultPage from '../../../components/default-page'; import { DBInfotext } from '../../../../../output/react/src'; import { testTableData } from '../../../data/testing-table'; // This file will be generated at runtime +import AccessibilityReviewInfo from '../../../components/accessibility-review-info/accessibility-review-info'; // This file will be generated at runtime const tableHeaders = [ { @@ -29,6 +30,12 @@ const tableHeaders = [ { label: 'Showcase: A11y (Screen-Reader)', href: 'https://github.com/guidepup/guidepup' + }, + { + label: 'Manually accessibility review' + }, + { + label: 'Testing stable' } ]; @@ -63,36 +70,57 @@ const TestTable = () => { showcaseVisuals, showcaseAxe, showcaseAC, - showcaseGP - }) => ( - - {name} - {[ - singleComponentVisuals, - singleComponentAxe, - showcaseVisuals, - showcaseAxe, - showcaseAC, - showcaseGP - ].map((status, index) => ( - + showcaseGP, + accessibilityReview + }) => { + const stable = + singleComponentVisuals && + singleComponentAxe && + showcaseVisuals && + showcaseAxe && + showcaseAC && + showcaseGP && + accessibilityReview?.status === 'DONE'; + return ( + + {name} + {[ + singleComponentVisuals, + singleComponentAxe, + showcaseVisuals, + showcaseAxe, + showcaseAC, + showcaseGP + ].map((status, index) => ( + + + {status ? 'Done' : 'Missing'} + + + ))} + + + + - {status ? 'Done' : 'Missing'} + {stable ? 'Done 🎉' : 'Missing'} - ))} - - ) + + ); + } )} diff --git a/showcases/patternhub/scripts/generate-test-table.js b/showcases/patternhub/scripts/generate-test-table.js index 58a47a572df..58db66a3464 100644 --- a/showcases/patternhub/scripts/generate-test-table.js +++ b/showcases/patternhub/scripts/generate-test-table.js @@ -5,6 +5,12 @@ const generateTestTable = () => { const docs = JSON.parse( FS.readFileSync('./../../output/docs.json', 'utf8').toString() ); + const accessibilityReview = JSON.parse( + FS.readFileSync( + './../shared/_accessibility-review.json', + 'utf8' + ).toString() + ); const data = []; for (const key of Object.keys(docs)) { const componentName = getComponentName(key); @@ -26,6 +32,7 @@ const generateTestTable = () => { const hasScreenReaderTest = FS.existsSync( `./../../showcases/screen-reader/tests/${componentName}.spec.ts` ); + data.push({ name: componentName, singleComponentVisuals: hasComponentTest, @@ -33,7 +40,10 @@ const generateTestTable = () => { showcaseVisuals: hasShowcaseTest, showcaseAxe: hasShowcaseTest, showcaseAC: hasShowcaseTest, - showcaseGP: hasScreenReaderTest + showcaseGP: hasScreenReaderTest, + accessibilityReview: accessibilityReview.find( + (ar) => ar.name === componentName + ) }); } diff --git a/showcases/shared/_accessibility-review.json b/showcases/shared/_accessibility-review.json new file mode 100644 index 00000000000..adea3b50b03 --- /dev/null +++ b/showcases/shared/_accessibility-review.json @@ -0,0 +1,47 @@ +[ + { + "name": "drawer", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "button", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "link", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "input", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "radio", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "checkbox", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "select", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "infotext", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "notification", + "status": "DONE", + "date": "2023-11-23" + } +]