fix(slider): Allow slider click through progress

AmadeusITGroup · Nov 20, 2023 · 142113c · 142113c
1 parent f277534
commit 142113c
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 42 deletions.
diff --git a/angular/lib/src/lib/slider/slider.component.ts b/angular/lib/src/lib/slider/slider.component.ts
@@ -29,7 +29,6 @@ import {take} from 'rxjs';
 		'(blur)': 'handleBlur()',
 	},
 	template: `
-		<div [class]="state().vertical ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'" (click)="sliderClick($event)"></div>
 		@for (option of state().progressDisplayOptions; track option) {
 			<div
 				class="au-slider-progress"
@@ -39,6 +38,7 @@ import {take} from 'rxjs';
 				[style.height.%]="option.height"
 			></div>
 		}
+		<div [class]="state().vertical ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'" (click)="sliderClick($event)"></div>
 		<div
 			[class]="state().vertical ? 'au-slider-label-vertical au-slider-label-vertical-min' : 'au-slider-label au-slider-label-min'"
 			[style.visibility]="state().minValueLabelDisplay ? 'visible' : 'hidden'"

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
@@ -11,13 +11,13 @@ <h2>
 			<div
 			 class="au-slider au-slider-horizontal"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 0%; bottom: 0%; width: 70%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: visible;"
@@ -61,13 +61,13 @@ <h2>
 			<div
 			 class="au-slider au-slider-horizontal"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 0%; bottom: 0%; width: 20%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: visible;"
@@ -111,13 +111,13 @@ <h2>
 			<div
 			 class="au-slider au-slider-horizontal disabled"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 0%; bottom: 0%; width: 60%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: visible;"

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html
@@ -8,13 +8,13 @@
 			<div
 			 class="au-slider au-slider-horizontal"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 0%; bottom: 0%; width: 0%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: hidden;"

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html
@@ -11,9 +11,6 @@ <h2>
 			<div
 			 class="au-slider au-slider-horizontal"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 10%; bottom: 0%; width: 30%; height: 100%;"
@@ -30,6 +27,9 @@ <h2>
 				 class="au-slider-progress"
 				 style="left: 60%; bottom: 0%; width: 30%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: visible;"
@@ -137,13 +137,13 @@ <h2>
 			<div
 			 class="au-slider au-slider-horizontal"
 			>
-				<div
-				 class="au-slider-clickable-area"
-				/>
 				<div
 				 class="au-slider-progress"
 				 style="left: 10%; bottom: 0%; width: 30%; height: 100%;"
 				/>
+				<div
+				 class="au-slider-clickable-area"
+				/>
 				<div
 				 class="au-slider-label au-slider-label-min"
 				 style="visibility: visible;"

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html
@@ -16,13 +16,13 @@
 					<div
 					 class="au-slider au-slider-vertical my-0"
 					>
-						<div
-						 class="au-slider-clickable-area-vertical"
-						/>
 						<div
 						 class="au-slider-progress"
 						 style="left: 0%; bottom: 10%; width: 100%; height: 30%;"
 						/>
+						<div
+						 class="au-slider-clickable-area-vertical"
+						/>
 						<div
 						 class="au-slider-label-vertical au-slider-label-vertical-min"
 						 style="visibility: visible;"
@@ -89,13 +89,13 @@
 					<div
 					 class="au-slider au-slider-vertical my-0"
 					>
-						<div
-						 class="au-slider-clickable-area-vertical"
-						/>
 						<div
 						 class="au-slider-progress"
 						 style="left: 0%; bottom: 0%; width: 100%; height: 40%;"
 						/>
+						<div
+						 class="au-slider-clickable-area-vertical"
+						/>
 						<div
 						 class="au-slider-label-vertical au-slider-label-vertical-min"
 						 style="visibility: visible;"

diff --git a/e2e/slider/slider.e2e-spec.ts b/e2e/slider/slider.e2e-spec.ts
@@ -70,14 +70,15 @@ test.describe(`Slider tests`, () => {
 			await sliderDemoPO.locatorRoot.waitFor();
 
 			const expectedState = {...defaultExpectedState};
-			expectedState.value = '88';
-			expectedState.text = '88';
-			expectedState.ariaLabel = '88';
-			expectedState.style = 'left: 88%; top: 0%;';
-
-			const sliderLocator = sliderPO.locatorRoot;
-			const boundingBox = await sliderLocator.boundingBox();
-			await sliderLocator.click({position: {x: boundingBox!.x + boundingBox!.width * 0.8, y: 1}});
+			expectedState.value = '43';
+			expectedState.text = '43';
+			expectedState.ariaLabel = '43';
+			expectedState.style = 'left: 43%; top: 0%;';
+
+			const sliderProgressLocator = sliderPO.locatorProgress;
+			const boundingBox = await sliderProgressLocator.boundingBox();
+			// force the click though the progress bar
+			await sliderProgressLocator.click({position: {x: boundingBox!.x + boundingBox!.width * 0.5, y: 1}, force: true});
 
 			expect((await sliderPO.sliderHandleState())[0]).toEqual(expectedState);
 		});

diff --git a/page-objects/lib/slider.po.ts b/page-objects/lib/slider.po.ts
@@ -9,7 +9,7 @@ export const sliderSelectors = {
 	maxLabelHorizontal: '.au-slider-label-max',
 	minLabelVertical: '.au-slider-label-vertical-min',
 	maxLabelVertical: '.au-slider-label-vertical-max',
-	sliderProgress: '.au-slider-progress',
+	progress: '.au-slider-progress',
 };
 
 export class SliderPO extends BasePO {
@@ -39,6 +39,10 @@ export class SliderPO extends BasePO {
 		return this.locatorRoot.locator(this.selectors.maxLabelVertical);
 	}
 
+	get locatorProgress(): Locator {
+		return this.locatorRoot.locator(this.selectors.progress);
+	}
+
 	async sliderHandleState() {
 		return this.locatorRoot.locator(this.selectors.handle).evaluateAll((rootNode: HTMLElement[]) => {
 			return rootNode.map((rn) => {
@@ -57,7 +61,7 @@ export class SliderPO extends BasePO {
 	}
 
 	async sliderProgressState() {
-		return this.locatorRoot.locator(this.selectors.sliderProgress).evaluateAll((rootNode: HTMLElement[]) => {
+		return this.locatorRoot.locator(this.selectors.progress).evaluateAll((rootNode: HTMLElement[]) => {
 			return rootNode.map((rn) => rn.getAttribute('style'));
 		});
 	}

diff --git a/react/lib/Slider.tsx b/react/lib/Slider.tsx
@@ -37,17 +37,17 @@ export function Slider(props: Partial<SliderProps>) {
 			ref={sliderSetRef}
 			className={`au-slider ${vertical ? 'au-slider-vertical' : 'au-slider-horizontal'} ${className} ${disabled ? ' disabled' : ''}`}
 		>
-			<div
-				className={vertical ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'}
-				onClick={(e) => click(e as unknown as MouseEvent)}
-			/>
 			{progressDisplayOptions.map((option, index) => (
 				<div
 					key={index}
 					className={'au-slider-progress'}
 					style={{left: `${option.left}%`, bottom: `${option.bottom}%`, width: `${option.width}%`, height: `${option.height}%`}}
 				/>
 			))}
+			<div
+				className={vertical ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'}
+				onClick={(e) => click(e as unknown as MouseEvent)}
+			/>
 			<div
 				ref={minSetRef}
 				className={vertical ? 'au-slider-label-vertical au-slider-label-vertical-min' : 'au-slider-label au-slider-label-min'}

diff --git a/svelte/lib/slider/Slider.svelte b/svelte/lib/slider/Slider.svelte
@@ -51,9 +51,6 @@
 
 <!-- on:blur={onTouched} ?? -->
 <div use:sliderDirective class={`au-slider ${$vertical$ ? 'au-slider-vertical' : 'au-slider-horizontal'} ${$className$}`} class:disabled={$disabled$}>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class={$vertical$ ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'} on:click={click} />
 	{#each $progressDisplayOptions$ as option}
 		<div
 			class="au-slider-progress"
@@ -63,6 +60,9 @@
 			style:height={`${option.height}%`}
 		/>
 	{/each}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class={$vertical$ ? 'au-slider-clickable-area-vertical' : 'au-slider-clickable-area'} on:click={click} />
 	<div
 		class={$vertical$ ? 'au-slider-label-vertical au-slider-label-vertical-min' : 'au-slider-label au-slider-label-min'}
 		style:visibility={$minValueLabelDisplay$ ? 'visible' : 'hidden'}