test: HTML snapshot test for all samples for consistency in the markup (

#20)

.prettierignore

@@ -6,3 +6,4 @@ coverage/
 playwright-report/
 test-results/
 .svelte-kit/
+*-snapshots/

angular/demo/src/app/samples/alert/config.route.ts

@@ -18,14 +18,14 @@ export enum AlertStatus {
 @Component({
 	standalone: true,
 	imports: [AgnosUIAngularModule, NgFor, FormsModule],
-	template: ` <button class="btn btn-primary showAlert" (click)="showAlert(alert)">Show alert</button>
+	template: ` <button class="btn btn-primary showAlert" (click)="showAlert(alert)" type="button">Show alert</button>
 		<br />
 		<br />
 		<div class="d-flex flex-column">
 			<div class="d-flex form-group">
 				<label class="align-self-center me-3" for="typeSelect">Alert type: </label>
 				<select id="typeSelect" class="form-select w-auto" [(ngModel)]="type">
-					<option *ngFor="let style of styleList" [ngValue]="style.value">{{ style.label }}</option>
+					<option *ngFor="let style of styleList" [value]="style.value">{{ style.label }}</option>
 				</select>
 			</div>
 

angular/demo/src/app/samples/alert/dynamic.route.ts

@@ -24,18 +24,16 @@ class AlertContainerService {
 	standalone: true,
 	imports: [AlertComponent, NgFor],
 	template: `
-		<div #errorArea>
-			<au-alert
-				*ngFor="let alert of alertContainerService.alerts"
-				[animation]="alert.animation"
-				[animationOnInit]="alert.animationOnInit"
-				[dismissible]="alert.dismissible"
-				[type]="alert.type"
-				[slotDefault]="alert.slotDefault"
-				(hidden)="removeAlert(alert)"
-			>
-			</au-alert>
-		</div>
+		<au-alert
+			*ngFor="let alert of alertContainerService.alerts"
+			[animation]="alert.animation"
+			[animationOnInit]="alert.animationOnInit"
+			[dismissible]="alert.dismissible"
+			[type]="alert.type"
+			[slotDefault]="alert.slotDefault"
+			(hidden)="removeAlert(alert)"
+		>
+		</au-alert>
 	`,
 })
 class ChildComponent {

angular/demo/src/app/samples/alert/icon.route.ts

@@ -39,7 +39,7 @@ export default class IconAlertComponent {
 	providers: [SlotDirective],
 	template: `
 		<ng-template #iconDemo let-state="state" let-widget="widget">
-			<span class="d-flex align-items-center me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
+			<span class="d-flex align-items-center svg icon-20 me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
 			<div class="d-flex w-100 alert-body">
 				<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{widget, state}"></ng-template>
 				<button

angular/demo/src/app/samples/focustrack/focustrack.route.ts

@@ -12,15 +12,15 @@ import {Component} from '@angular/core';
 			<div [auUse]="hasFocusApi.directive" class="my-2 p-2 border">
 				<h5>Container</h5>
 				<input class="form-control" type="text" placeholder="Focusable input" id="focusableInput" /><br />
-				<input class="form-control" type="text" placeholder="Focusable input 2" id="focusableInput2" /><br />
+				<input class="form-control" type="text" placeholder="Focusable input 2" id="focusableInput2" />
 			</div>
 			<input class="form-control" type="text" placeholder="Disabled input" id="disabledInput" disabled /><br />
 			<div class="form-check mb-2">
 				<input class="form-check-input" type="checkbox" id="containerHasFocus" [checked]="hasFocusApi.hasFocus$ | async" disabled />
 				<label class="form-check-label" for="containerHasFocus">Focus in container</label>
 			</div>
 			<label for="activeElement" class="form-label">Active element history:</label>
-			<textarea class="form-control mb-2" id="activeElementHistory">{{ activeElementsJson }}</textarea>
+			<textarea class="form-control mb-2" id="activeElementHistory" readonly>{{ activeElementsJson }}</textarea>
 			<button class="btn btn-primary" (click)="clear()">Clear</button>
 		</div>
 	`,

angular/demo/src/app/samples/modal/default.route.ts

@@ -9,7 +9,7 @@ import {FormsModule} from '@angular/forms';
 	standalone: true,
 	imports: [AgnosUIAngularModule, CommonModule, FormsModule],
 	template: `
-		<button class="btn btn-primary" (click)="show(modal)">Launch demo modal</button>
+		<button class="btn btn-primary" type="button" (click)="show(modal)">Launch demo modal</button>
 		<div class="mt-3" data-testid="message">{{ message }}</div>
 		<au-modal #modal slotTitle="Save changes">
 			Do you want to save your changes?

angular/demo/src/app/samples/pagination/config.route.ts

@@ -47,7 +47,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 					*ngIf="!widget.api.isEllipsis(page)"
 					[attr.aria-label]="state.pagesLabel[i]"
 					class="page-link au-page"
-					href
+					href="#"
 					(click)="widget.actions.select(page); $event.preventDefault()"
 					[attr.tabindex]="state.disabled ? '-1' : null"
 					[attr.aria-disabled]="state.disabled ? 'true' : null"
@@ -77,7 +77,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 				</button>
 			</div>
 			<br />
-			Collection Size:
+			Collection size:
 			<div id="btn-config-collectionSize" class="btn-group mb-2">
 				<button
 					class="btn btn-sm btn-outline-secondary"
@@ -102,7 +102,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"
-					[class.active]="(widgetsConfig$ | async)?.pagination?.collectionSize === undefined"
+					[class.active]="!(widgetsConfig$ | async)?.pagination?.collectionSize"
 					(click)="updatePaginationConfig({collectionSize: undefined})"
 				>
 					undefined
@@ -148,7 +148,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 					[class.active]="(widgetsConfig$ | async)?.pagination?.slotPages === custom"
 					(click)="updatePaginationConfig({slotPages: custom})"
 				>
-					custom Pages
+					custom pages
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"

angular/demo/src/app/samples/rating/config.route.ts

@@ -56,7 +56,7 @@ import {Component} from '@angular/core';
 				</button>
 				<button
 					class="btn btn-sm btn-outline-secondary"
-					[class.active]="(widgetsConfig$ | async)?.rating?.maxRating === undefined"
+					[class.active]="!(widgetsConfig$ | async)?.rating?.maxRating"
 					(click)="updateRatingConfig({maxRating: undefined})"
 				>
 					undefined

angular/demo/src/app/samples/select/select.route.ts

@@ -10,8 +10,8 @@ import {FormsModule} from '@angular/forms';
 	template: `
 		<h2>Multiselect example</h2>
 		<div class="mb-3">
-			<label for="select-example" class="form-label">Multiselect</label>
-			<au-select id="select-example" [items]="items" [(filterText)]="filterText"></au-select>
+			<label class="form-label">Multiselect</label>
+			<au-select [items]="items" [(filterText)]="filterText"></au-select>
 		</div>
 		<div class="demo-select-config">
 			<strong>Default config</strong><br />

angular/demo/src/index.html

@@ -7,6 +7,6 @@
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
 	<body>
-		<app-root></app-root>
+		<app-root id="root"></app-root>
 	</body>
 </html>

angular/lib/src/lib/alert/alert.component.ts

@@ -79,7 +79,12 @@ const defaultConfig: Partial<AlertProps> = {
 			<ng-content></ng-content>
 		</ng-template>
 
-		<div *ngIf="!state().hidden" [auUse]="widget.directives.transitionDirective" class="d-flex w-100 alert alert-{{ state().type }}" role="alert">
+		<div
+			*ngIf="!state().hidden"
+			[auUse]="widget.directives.transitionDirective"
+			class="au-alert d-flex w-100 alert alert-{{ state().type }}"
+			role="alert"
+		>
 			<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
 		</div>`,
 })

angular/lib/src/lib/pagination/pagination.component.ts

@@ -139,7 +139,7 @@ export class PaginationPagesDirective {
 				*ngIf="!widget.api.isEllipsis(page)"
 				[attr.aria-label]="state.pagesLabel[i]"
 				class="page-link au-page"
-				href
+				href="#"
 				(click)="widget.actions.select(page); $event.preventDefault()"
 				[attr.tabindex]="state.disabled ? '-1' : null"
 				[attr.aria-disabled]="state.disabled ? 'true' : null"
@@ -176,7 +176,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaFirstLabel"
 						class="page-link au-first"
-						href
+						href="#"
 						(click)="widget.actions.first(); $event.preventDefault()"
 						[attr.tabindex]="state.previousDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.previousDisabled ? 'true' : null"
@@ -190,7 +190,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaPreviousLabel"
 						class="page-link au-previous"
-						href
+						href="#"
 						(click)="widget.actions.previous(); $event.preventDefault()"
 						[attr.tabindex]="state.previousDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.previousDisabled ? 'true' : null"
@@ -205,7 +205,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaNextLabel"
 						class="page-link au-next"
-						href
+						href="#"
 						(click)="widget.actions.next(); $event.preventDefault()"
 						[attr.tabindex]="state.nextDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.nextDisabled ? 'true' : null"
@@ -219,7 +219,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					<a
 						[attr.aria-label]="state.ariaLastLabel"
 						class="page-link au-last"
-						href
+						href="#"
 						(click)="widget.actions.last(); $event.preventDefault()"
 						[attr.tabindex]="state.nextDisabled ? '-1' : null"
 						[attr.aria-disabled]="state.nextDisabled ? 'true' : null"
@@ -230,6 +230,7 @@ const defaultConfig: Partial<PaginationProps> = {
 					</a>
 				</li>
 			</ul>
+			<div aria-live="polite" class="visually-hidden">Current page is {{ state.page }}</div>
 		</ng-container>
 	`,
 })

angular/lib/src/lib/select/select.component.ts

@@ -20,8 +20,7 @@ export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
 	templateUrl: './select.component.html',
 	styles: [],
 	host: {
-		'[class]': '"au-select dropdown input-group input-group-sm mb-3 " + state$().className',
-		style: 'display: block',
+		'[class]': '"au-select dropdown input-group input-group-sm mb-3 d-block" + state$().className',
 	},
 })
 export class SelectComponent<Item> implements OnChanges {