chore: update testing table for patternhub with accessibility review (#…

…3020)

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

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<SemanticType>('critical');
+	const [text, setText] = useState<string>('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 <DBInfotext semantic={semantic}>{text}</DBInfotext>;
+};
+
+export default AccessibilityReviewInfo;

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
-						}) => (
-							<tr key={name}>
-								<td>{name}</td>
-								{[
-									singleComponentVisuals,
-									singleComponentAxe,
-									showcaseVisuals,
-									showcaseAxe,
-									showcaseAC,
-									showcaseGP
-								].map((status, index) => (
-									<td key={`${name}-${index}`}>
+							showcaseGP,
+							accessibilityReview
+						}) => {
+							const stable =
+								singleComponentVisuals &&
+								singleComponentAxe &&
+								showcaseVisuals &&
+								showcaseAxe &&
+								showcaseAC &&
+								showcaseGP &&
+								accessibilityReview?.status === 'DONE';
+							return (
+								<tr key={name}>
+									<td>{name}</td>
+									{[
+										singleComponentVisuals,
+										singleComponentAxe,
+										showcaseVisuals,
+										showcaseAxe,
+										showcaseAC,
+										showcaseGP
+									].map((status, index) => (
+										<td key={`${name}-${index}`}>
+											<DBInfotext
+												semantic={
+													status
+														? 'successful'
+														: 'critical'
+												}>
+												{status ? 'Done' : 'Missing'}
+											</DBInfotext>
+										</td>
+									))}
+									<td>
+										<AccessibilityReviewInfo
+											{...accessibilityReview}
+										/>
+									</td>
+									<td>
 										<DBInfotext
 											semantic={
-												status
+												stable
 													? 'successful'
 													: 'critical'
-											}
-											icon={
-												status
-													? 'check_circle'
-													: 'cross_circle'
 											}>
-											{status ? 'Done' : 'Missing'}
+											{stable ? 'Done 🎉' : 'Missing'}
 										</DBInfotext>
 									</td>
-								))}
-							</tr>
-						)
+								</tr>
+							);
+						}
 					)}
 				</tbody>
 			</table>

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,14 +32,18 @@ const generateTestTable = () => {
 		const hasScreenReaderTest = FS.existsSync(
 			`./../../showcases/screen-reader/tests/${componentName}.spec.ts`
 		);
+
 		data.push({
 			name: componentName,
 			singleComponentVisuals: hasComponentTest,
 			singleComponentAxe: hasComponentTest,
 			showcaseVisuals: hasShowcaseTest,
 			showcaseAxe: hasShowcaseTest,
 			showcaseAC: hasShowcaseTest,
-			showcaseGP: hasScreenReaderTest
+			showcaseGP: hasScreenReaderTest,
+			accessibilityReview: accessibilityReview.find(
+				(ar) => ar.name === componentName
+			)
 		});
 	}
 

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"
+	}
+]