test: add a11y tests to showcases

.github/workflows/02-e2e-showcases.yml

@@ -21,8 +21,8 @@ jobs:
       fail-fast: false
       matrix:
         framework: [angular, react, vue]
-        shardIndex: [1, 2]
-        shardTotal: [2]
+        shardIndex: [1, 2, 3, 4, 5]
+        shardTotal: [5]
     steps:
       - name: ⏬ Checkout repo
         uses: actions/checkout@v4

output/react/package.json

@@ -25,7 +25,6 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
     "@playwright/experimental-ct-react": "1.44.0",
     "@types/react": "^18.3.2",
     "react": "^18.3.1",

output/vue/package.json

@@ -41,7 +41,6 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
     "@playwright/experimental-ct-vue": "1.44.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "sass": "^1.77.1",

package.json

@@ -45,6 +45,7 @@
     "update:icon-fonts": "npm run update:icon-fonts --workspace=scripts"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.9.0",
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
     "@playwright/test": "1.44.0",

packages/components/_templates/mitosis/new/showcases/e2e-test.ejs.t

@@ -6,6 +6,6 @@ import { test } from '@playwright/test';
 import { getDefaultScreenshotTest } from '../default.ts';
 
 test.describe('DB<%= h.changeCase.pascal(name) %>', () => {
-	getDefaultScreenshotTest('<%= name %>');
+	getDefaultScreenshotTest({ path: '<%= name %>' });
 });
 

packages/components/scripts/post-build/angular.js

@@ -175,6 +175,26 @@ export class ${directive.name}Directive {}
 	});
 };
 
+const getAttributePassing = (componentName) => `
+ngAfterViewInit(): void {
+\t\tconst element: HTMLElement | null = this.ref?.nativeElement;
+\t\tconst parent = element?.closest('db-${componentName}') ?? element?.closest('db${componentName.replaceAll('-', '')}');
+\t\tif (element && parent) {
+\t\t\tconst attributes = parent.attributes;
+\t\t\tfor (let i = 0; i < attributes.length; i++) {
+\t\t\t\tconst attr = attributes.item(i);
+\t\t\t\tif (
+\t\t\t\t\tattr &&
+\t\t\t\t\t(attr.name.startsWith('data-') ||
+\t\t\t\t\t\tattr.name.startsWith('aria-'))
+\t\t\t\t) {
+\t\t\t\t\telement.setAttribute(attr.name, attr.value);
+\t\t\t\t\tparent.removeAttribute(attr.name);
+\t\t\t\t}
+\t\t\t}
+\t\t}
+\t}`;
+
 module.exports = (tmp) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
 	// Activate vue specific event handling
@@ -212,6 +232,12 @@ module.exports = (tmp) => {
 			{
 				from: 'mouseMove',
 				to: 'mousemove'
+			},
+			{
+				from: '@ViewChild("ref") ref!: ElementRef | undefined;',
+				to:
+					'@ViewChild("ref") ref!: ElementRef | undefined;' +
+					getAttributePassing(component.name)
 			}
 		];
 

packages/components/scripts/post-build/components.js

@@ -38,24 +38,16 @@ const getComponents = () => [
 	},
 
 	{
-		name: 'tab-panel',
-		config: {
-			angular: {
-				initValues: [
-					{ key: 'name', value: '' },
-					{ key: 'index', value: 0 }
-				]
-			}
-		}
+		name: 'tab-panel'
 	},
 	{
 		name: 'tab-item',
 		config: {
+			vue: {
+				vModel: [{ modelValue: 'checked', binding: ':checked' }]
+			},
 			angular: {
-				initValues: [
-					{ key: 'name', value: '' },
-					{ key: 'index', value: 0 }
-				]
+				controlValueAccessor: 'checked'
 			}
 		}
 	},

packages/components/src/components/navigation/model.ts

@@ -1,8 +1,14 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import {
+	AriaLabelledByProps,
+	GlobalProps,
+	GlobalState
+} from '../../shared/model';
 
 export interface DBNavigationDefaultProps {}
 
-export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
+export type DBNavigationProps = DBNavigationDefaultProps &
+	GlobalProps &
+	AriaLabelledByProps;
 
 export interface DBNavigationDefaultState {}
 

packages/components/src/components/navigation/navigation.lite.tsx

@@ -24,6 +24,7 @@ export default function DBNavigation(props: DBNavigationProps) {
 		<nav
 			ref={ref}
 			id={state._id}
+			aria-labelledby={props.labelledBy}
 			class={cls('db-navigation', props.className)}>
 			<menu>{props.children}</menu>
 		</nav>

packages/components/src/components/notification/model.ts

@@ -44,7 +44,7 @@ export interface DBNotificationDefaultProps {
 	/**
 	 * The headline attribute changes the text of the bold headline.
 	 */
-	headline?: string;
+	headline?: string | any;
 
 	/**
 	 * The linkVariant will be used if slotLink is set.

packages/components/src/components/notification/notification-grid-default.scss

@@ -9,7 +9,7 @@
 	}
 
 	// 2. headline
-	&:has(h6) {
+	&:has(header) {
 		grid-template-columns: 1fr;
 		grid-template-areas:
 			"head"
@@ -35,7 +35,7 @@
 			grid-template-areas: "icon content close";
 		}
 
-		&:has(h6) {
+		&:has(header) {
 			grid-template-columns: min-content 1fr;
 			grid-template-areas:
 				"icon head"

packages/components/src/components/notification/notification-grid-non-overlay.scss

@@ -20,7 +20,7 @@
 			}
 
 			// 2. headline
-			&:has(h6) {
+			&:has(header) {
 				grid-template-columns: 1fr;
 				grid-template-areas:
 					"head"
@@ -45,7 +45,7 @@
 					"icon link";
 				grid-template-columns: min-content 1fr;
 
-				&:has(h6) {
+				&:has(header) {
 					grid-template-columns: min-content 1fr;
 					grid-template-areas:
 						"icon head"
@@ -74,7 +74,7 @@
 			}
 
 			// 2. headline
-			&:has(h6) {
+			&:has(header) {
 				grid-template-columns: 1fr min-content;
 				grid-template-areas:
 					"head link"
@@ -100,7 +100,7 @@
 					grid-template-areas: "icon content link close";
 				}
 
-				&:has(h6) {
+				&:has(header) {
 					grid-template-columns: min-content 1fr min-content;
 					grid-template-areas:
 						"icon head link"

packages/components/src/components/notification/notification-grid-overlay.scss

@@ -15,7 +15,7 @@
 		}
 
 		// 2. headline
-		&:has(h6) {
+		&:has(header) {
 			grid-template-columns: 1fr min-content;
 			grid-template-areas:
 				"head timestamp"
@@ -41,7 +41,7 @@
 				grid-template-areas: "icon content timestamp close";
 			}
 
-			&:has(h6) {
+			&:has(header) {
 				grid-template-columns: min-content 1fr min-content;
 				grid-template-areas:
 					"icon head timestamp"

packages/components/src/components/notification/notification.lite.tsx

@@ -22,7 +22,7 @@ export default function DBNotification(props: DBNotificationProps) {
 	// jscpd:ignore-end
 
 	return (
-		<div
+		<article
 			ref={ref}
 			id={props.id}
 			class={cls('db-notification', props.className)}
@@ -33,7 +33,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>
-				<h6>{props.headline}</h6>
+				<header>{props.headline}</header>
 			</Show>
 			<p>{props.children}</p>
 			<Show when={props.timestamp}>
@@ -55,6 +55,6 @@ export default function DBNotification(props: DBNotificationProps) {
 					{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
 				</DBButton>
 			</Show>
-		</div>
+		</article>
 	);
 }

packages/components/src/components/notification/notification.scss

@@ -13,7 +13,7 @@
 %ugly-line-height-workarounds {
 	// resets line-height to smaller height based on timestamp
 	&:has(span) {
-		h6,
+		header,
 		p,
 		&::before,
 		.db-button {
@@ -59,10 +59,28 @@
 	}
 
 	// headline
-	h6 {
-		font-family: var(--db-font-family-sans);
+	header {
 		grid-area: head;
-		margin: 0;
+		font-weight: 700;
+
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-family: var(--db-font-family-sans);
+			margin: 0;
+			line-height: var(--db-type-headline-line-height-2xs);
+			font-size: var(--db-type-headline-font-size-2xs);
+
+			&::before,
+			&::after {
+				--db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
+				--db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+			}
+		}
 	}
 
 	// content

packages/components/src/components/page/page.scss

@@ -22,7 +22,6 @@
 	}
 
 	&[data-variant="fixed"] {
-
 		@include header-footer-style();
 		block-size: 100%;
 		min-block-size: 100%;

packages/components/src/components/popover/popover.scss

@@ -4,6 +4,7 @@
 .db-popover {
 	position: relative;
 
+	&[data-e2e-hover="true"],
 	&:hover,
 	&:focus-within {
 		& > article {

packages/components/src/components/tab-item/model.ts

@@ -1,5 +1,8 @@
 import {
 	ActiveProps,
+	AriaControlsProps,
+	ChangeEventProps,
+	ChangeEventState,
 	GlobalProps,
 	GlobalState,
 	IconAfterProps,
@@ -8,29 +11,38 @@ import {
 } from '../../shared/model';
 
 export type DBTabItemDefaultProps = {
+	/**
+	 * To control the component
+	 */
+	checked?: boolean;
+
+	/**
+	 * The disabled attribute can be set to keep a user from clicking on the tab-item.
+	 */
+	disabled?: boolean;
 	/**
 	 * The label of the tab-item, if you don't want to use children.
 	 */
 	label?: string;
-
 	/**
 	 * Define the text next to the icon specified via the icon Property to get hidden.
 	 */
 	noText?: boolean;
-	/**
-	 * The disabled attribute can be set to keep a user from clicking on the tab-item.
-	 */
-	disabled?: boolean;
 };
 
 export type DBTabItemProps = GlobalProps &
 	DBTabItemDefaultProps &
 	IconProps &
 	IconAfterProps &
-	ActiveProps;
+	ActiveProps &
+	AriaControlsProps &
+	ChangeEventProps<HTMLInputElement>;
 
-export type DBTabItemDefaultState = {};
+export type DBTabItemDefaultState = {
+	_selected: boolean;
+};
 
 export type DBTabItemState = DBTabItemDefaultState &
 	GlobalState &
+	ChangeEventState<HTMLInputElement> &
 	InitializedState;