test: add accessibility-checker for additional tests

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

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

packages/components/src/components/header/header.lite.tsx

@@ -110,7 +110,7 @@ export default function DBHeader(props: DBHeaderProps) {
 				<div class="db-header-action-container">
 					<div class="db-header-burger-menu-container">
 						<DBButton
-							id="button-burger-menu"
+							id={state._id + '-burger-menu'}
 							icon="menu"
 							noText
 							variant="ghost"

packages/components/src/components/switch/model.ts

@@ -30,7 +30,9 @@ export type DBSwitchProps = DBSwitchDefaultProps &
 	IconProps &
 	IconAfterProps;
 
-export interface DBSwitchDefaultState {}
+export interface DBSwitchDefaultState {
+	_checked: boolean;
+}
 
 export type DBSwitchState = DBSwitchDefaultState &
 	GlobalState &

packages/components/src/components/switch/switch.lite.tsx

@@ -1,4 +1,10 @@
-import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	onUpdate,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBSwitchProps, DBSwitchState } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
@@ -15,6 +21,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBSwitchState>({
 		_id: DEFAULT_ID,
+		_checked: false,
 		initialized: false,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -24,6 +31,10 @@ export default function DBSwitch(props: DBSwitchProps) {
 			if (props.change) {
 				props.change(event);
 			}
+
+			// We have different ts types in different frameworks, so we need to use any here
+			state._checked = (event.target as any)?.['checked'];
+
 			handleFrameworkEvent(this, event, 'checked');
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
@@ -60,10 +71,11 @@ export default function DBSwitch(props: DBSwitchProps) {
 			htmlFor={state._id}
 			class={cls('db-switch', props.className)}>
 			<input
-				ref={ref}
 				id={state._id}
 				type="checkbox"
 				role="switch"
+				aria-checked={state._checked}
+				ref={ref}
 				checked={props.checked}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}

packages/components/src/components/tooltip/tooltip.lite.tsx

@@ -51,6 +51,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 	return (
 		<i
 			role="tooltip"
+			aria-hidden="true"
 			ref={ref}
 			className={cls('db-tooltip', props.className)}
 			id={props.id}

showcases/angular-showcase/src/app/app.component.html

@@ -11,7 +11,7 @@
 			(onToggle)="toggleDrawer($event)"
 		>
 			<db-brand brand>Showcase</db-brand>
-			<db-navigation *dbNavigation>
+			<db-navigation *dbNavigation aria-label="main-navigation">
 				@for (item of navigationItems; track item.label) {
 					<app-nav-item [navItem]="item"> </app-nav-item>
 				}

showcases/angular-showcase/src/app/components/default.component.html

@@ -2,7 +2,7 @@
 @if (variantRef) {
 	<db-card class="variants-card" [elevationLevel]="getElevation()">
 		<div
-			[attr.aria-label]="variantRef.name"
+			[attr.aria-label]="variantRef.role ? variantRef.name : undefined"
 			[attr.role]="variantRef.role"
 			class="variants-list"
 		>
@@ -48,7 +48,13 @@ <h1>{{ title }}</h1>
 					class="variants-card"
 					[elevationLevel]="getElevation()"
 				>
-					<div class="variants-list">
+					<div
+						[attr.aria-label]="
+							variant.role ? variant.name : undefined
+						"
+						[attr.role]="variant.role"
+						class="variants-list"
+					>
 						@for (
 							example of variant.examples;
 							track example;

showcases/e2e/default.ts

@@ -1,11 +1,9 @@
 import { expect, type Page, test } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
-// @ts-expect-error - required for playwright
 import { close, getCompliance } from 'accessibility-checker';
 import { type ICheckerError } from 'accessibility-checker/lib/api/IChecker';
-import { COLORS } from './fixtures/variants.ts';
-// @ts-expect-error - required for playwright
-import { setScrollViewport } from './fixtures/viewport.ts';
+import { COLORS } from './fixtures/variants';
+import { setScrollViewport } from './fixtures/viewport';
 
 const density = 'regular';
 

showcases/e2e/link/showcase-link.spec.ts

@@ -3,5 +3,8 @@ import { test } from '@playwright/test';
 import { getDefaultScreenshotTest } from '../default.ts';
 
 test.describe('DBLink', () => {
-	getDefaultScreenshotTest({ path: '02/link' });
+	getDefaultScreenshotTest({
+		path: '02/link',
+		aCheckerDisableRules: ['aria_attribute_valid'] // TODO: This is a false positive -> add an issue in https://github.com/IBMa/equal-access
+	});
 });

showcases/e2e/switch/showcase-switch.spec.ts

@@ -3,5 +3,9 @@ import { test } from '@playwright/test';
 import { getDefaultScreenshotTest } from '../default.ts';
 
 test.describe('DBSwitch', () => {
-	getDefaultScreenshotTest({ path: '03/switch' });
+	getDefaultScreenshotTest({
+		path: '03/switch',
+		// It's an issue in the tool: https://github.com/IBMa/equal-access/issues/842
+		aCheckerDisableRules: ['aria_attribute_valid']
+	});
 });

showcases/e2e/tab-item/showcase-tab-item.spec.ts

@@ -7,6 +7,12 @@ test.describe('DBTabItem', () => {
 	// So we disabled "aria-allowed-role" for now
 	getDefaultScreenshotTest({
 		path: '04/tab-item',
-		axeDisableRules: ['aria-allowed-role']
+		// We need to change tabs anyway, we disable the rules for now
+		axeDisableRules: ['aria-allowed-role'],
+		aCheckerDisableRules: [
+			'aria_child_tabbable',
+			'input_checkboxes_grouped',
+			'aria_role_valid'
+		]
 	});
 });

showcases/react-showcase/src/components/index.tsx

@@ -19,7 +19,10 @@ const VariantList = ({
 
 	return (
 		<DBCard className="variants-card" elevationLevel={getElevation()}>
-			<div role={role} aria-label={name} className="variants-list">
+			<div
+				role={role}
+				aria-label={role ? name : undefined}
+				className="variants-list">
 				{examples.map((example, exampleIndex) => (
 					<div
 						key={`${example.name}-${exampleIndex}`}

showcases/react-showcase/src/components/navigation/index.tsx

@@ -10,17 +10,18 @@ import { getVariants } from '../data';
 // Patternhub:import NavigationItemComponent from '../navigation-item';
 
 const getNavigation = ({ children }: DBNavigationProps) => {
-	const label = `${children}`;
+	// TODO: The doesn't have a valid id
+	const labelID = `${children}`;
 	return (
 		<div>
 			<DBInfotext
-				id={label}
+				id={labelID}
 				size="small"
 				semantic="informational"
 				icon="none">
 				{children}
 			</DBInfotext>
-			<DBNavigation labelledBy={label}>
+			<DBNavigation labelledBy={labelID}>
 				<DBNavigationItem
 					active
 					subNavigation={

showcases/react-showcase/src/navigation/index.tsx

@@ -7,7 +7,7 @@ import { DBNavigation } from '../../../../output/react/src';
 import NavItem from './nav-item';
 
 const Navigation = () => (
-	<DBNavigation>
+	<DBNavigation aria-label="main-navigation">
 		{getSortedNavigationItems(NAVIGATION_ITEMS).map(
 			(navItem: NavigationItem) => (
 				<NavItem

showcases/vue-showcase/src/App.vue

@@ -89,7 +89,7 @@ const sortedNavigation = getSortedNavigationItems(navigationItems);
 				<template v-slot:brand>
 					<DBBrand>Showcase</DBBrand>
 				</template>
-				<DBNavigation>
+				<DBNavigation aria-label="main-navigation">
 					<template v-for="item of sortedNavigation">
 						<NavItemComponent :navItem="item"></NavItemComponent>
 					</template>

showcases/vue-showcase/src/components/DefaultComponent.vue

@@ -101,7 +101,7 @@ const getElevation = (): "1" | "2" | "3" =>
 	>
 		<div
 			:role="variantRef.role"
-			:aria-label="variantRef.name"
+			:aria-label="variantRef.role ? variantRef.name : undefined"
 			class="variants-list"
 		>
 			<div
@@ -134,7 +134,7 @@ const getElevation = (): "1" | "2" | "3" =>
 			<DBCard class="variants-card" :elevation-level="getElevation()">
 				<div
 					:role="variant.role"
-					:aria-label="variant.name"
+					:aria-label="variantRef.role ? variantRef.name : undefined"
 					class="variants-list"
 				>
 					<div