From 85d4146a31045ba779251bc4f1d5429ba50c85fe Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 11:05:32 +0200 Subject: [PATCH 1/3] chore: update testing table for patternhub with accessibility review --- .../accessibility-review-info.tsx | 41 ++++++++++ .../pages/foundations/test-table/index.tsx | 76 +++++++++++++------ .../patternhub/scripts/generate-test-table.js | 12 ++- showcases/shared/_accessibility-review.json | 47 ++++++++++++ 4 files changed, 151 insertions(+), 25 deletions(-) create mode 100644 showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx create mode 100644 showcases/shared/_accessibility-review.json 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..849437286ae 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 { testTableData } from '../../../data/testing-table'; +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" + } +] From 7ab932ba9c6752244b5e29f9a8cefc011d50d9e2 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 9 Aug 2024 07:09:22 +0200 Subject: [PATCH 2/3] Update showcases/patternhub/pages/foundations/test-table/index.tsx Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- showcases/patternhub/pages/foundations/test-table/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/patternhub/pages/foundations/test-table/index.tsx b/showcases/patternhub/pages/foundations/test-table/index.tsx index 849437286ae..be525f8af3e 100644 --- a/showcases/patternhub/pages/foundations/test-table/index.tsx +++ b/showcases/patternhub/pages/foundations/test-table/index.tsx @@ -1,6 +1,6 @@ import DefaultPage from '../../../components/default-page'; import { DBInfotext } from '../../../../../output/react/src'; -import { testTableData } from '../../../data/testing-table'; +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 = [ From d05e3a8906d4ae3262a580ac93024ade23114475 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Fri, 9 Aug 2024 07:20:48 +0200 Subject: [PATCH 3/3] docs: add description for accessibility review --- docs/how-to-develop-a-component.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) 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