Merge pull request #460 from viaacode/feature/ARC-3813_driekeuzespeler-modal-react-components

refactor(ARC-3813): move the driekeuzespeler modal to react-components

Author: RobbeBierebeeck

ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss

@@ -71,15 +71,17 @@ $tile-hover-duration: 450ms;
 $tile-hover-easing: cubic-bezier(0.22, 1, 0.36, 1);
 $tile-rest-duration: 700ms;
 
-// Taking over as the active tile runs in two stages: the tile steps outward, and only then swells
-// back into its place while the stack behind it reorders. The reference stack steps out by 60 of
-// its 950, over 190ms, and hops 12 up halfway through the swell.
-$tile-step-out-distance: math.div(60, $stack-width) * 100cqw; // 6.316cqw
+// Taking over as the active tile runs in two stages, quicker and sharper at first, then settling
+// in more slowly, and hops 12 up halfway through. A timing split only now, not a position -- see
+// the keyframe further down. ARC-3813
 $tile-step-out-duration: 270ms;
 $tile-step-out-easing: cubic-bezier(0.4, 0, 0.8, 0.4);
 $tile-settle-lift: 1.2rem;
 $tile-activate-duration: $tile-step-out-duration + $tile-rest-duration; // 690ms
 $tile-step-out-stop: math.div($tile-step-out-duration, $tile-activate-duration) * 100%; // 27.536%
+// Unitless, for the scale blend below: a plain fraction multiplies against a CSS calc() cleanly,
+// where a percentage would not.
+$tile-step-out-fraction: math.div($tile-step-out-duration, $tile-activate-duration);
 $tile-settle-stop: $tile-step-out-stop + 0.45 * (100% - $tile-step-out-stop); // 60.145%
 
 // A border width, not spacing, so not a spacer multiple.
@@ -98,6 +100,16 @@ $pill-height-mobile: variables.$g-spacer-unit * 6;
 // breakpoint and 1440. The bounds are the mobile and desktop sizes of the design.
 $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 
+// Registered so the browser treats it as a length, which is what makes it eligible for the
+// `transition` below: an unregistered custom property can only snap between values, never ease,
+// so a bystander tile losing its shift the instant it becomes the hovered one would otherwise
+// jump straight to 0 before the activate keyframe even reads it. ARC-3813
+@property --tile-shift {
+	syntax: "<length>";
+	inherits: true;
+	initial-value: 0;
+}
+
 .c-driekeuzespeler {
 	position: relative;
 
@@ -186,7 +198,6 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		&:nth-child(1) {
 			--tile-tilt: #{-$tile-tilt};
 			--tile-tilt-active: #{-$tile-active-tilt};
-			--tile-step-out: calc(#{$tile-step-out-distance} * -1);
 
 			left: $hit-left-desktop;
 		}
@@ -201,7 +212,6 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		&:nth-child(3) {
 			--tile-tilt: #{$tile-tilt};
 			--tile-tilt-active: #{$tile-active-tilt};
-			--tile-step-out: #{$tile-step-out-distance};
 
 			left: $hit-left-desktop + 2 * $tile-offset-desktop;
 		}
@@ -251,10 +261,12 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		background-color: var(--tile-color, #{colors.$color-gray-100});
 		box-shadow: $tile-shadow-inactive;
 
-		// Transform and shadow only, so no layout work per frame.
+		// Transform and shadow only, so no layout work per frame. `--tile-shift` rides along so it can
+		// still be mid-transition when the activate keyframe below starts reading it.
 		transition:
 			transform $tile-rest-duration $tile-hover-easing,
-			box-shadow $tile-rest-duration $tile-hover-easing;
+			box-shadow $tile-rest-duration $tile-hover-easing,
+			--tile-shift $tile-rest-duration $tile-hover-easing;
 
 		// The white band on the active tile. Always present, revealed only when active, so it does not
 		// fade in halfway through the grow.
@@ -316,7 +328,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		}
 	}
 
-	// The tile's tilt and scale on :focus-within is motion, not a focus indicator, and it is gone
+	// The tile's tilt and scale on :focus-visible is motion, not a focus indicator, and it is gone
 	// altogether under prefers-reduced-motion. The keyboard user needs a real outline, and it belongs
 	// on the tile rather than on the zone the button fills, so it hugs what the visitor sees.
 	&__tile:has(&__tile-button:focus-visible) &__tile-visual {
@@ -402,9 +414,18 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 	}
 }
 
-// Stage one steps the tile outward at its resting size, stage two swells it back into its place.
-// `--tile-scale` is deliberately not read here: the hover rule below sets it for the tile the
-// animation holds at the end, so reading it would start the first frame already grown.
+// Position moves only via `--tile-shift`. A tile that's already shifted as another tile's
+// bystander has its own settle under way on that same property; adding a fixed step-out motion on
+// top of it fought over the same axis and produced a visible reversal. One source of motion only,
+// so a tile only ever travels towards wherever it currently sits. ARC-3813
+
+// The step-out stop still marks where the easing switches and where scale gets the blended value
+// below, rather than following one unbroken curve for the whole animation.
+
+// The tiles overlap at rest (a fanned stack), so z-index cannot go active from frame one: an
+// inactive-sized tile would paint over its neighbour before any motion justifies the reorder.
+// z-index climbs gradually across this same stage too (the browser interpolates it numerically,
+// the same as any other property), so it never gets ahead of the tile's actual position.
 @keyframes c-driekeuzespeler-tile-activate {
 	0% {
 		z-index: $tile-z-inactive;
@@ -416,8 +437,11 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 	#{$tile-step-out-stop} {
 		// The stack only reorders once the tile is clear of it.
 		z-index: $tile-z-active;
-		transform: translate(calc(-50% + var(--tile-shift, 0px) + var(--tile-step-out, 0px)), -50%)
-			rotate(var(--tile-tilt, 0deg)) scale($tile-scale-inactive);
+		transform: translate(calc(-50% + var(--tile-shift, 0px)), -50%)
+			rotate(var(--tile-tilt, 0deg))
+			scale(
+				calc(#{$tile-scale-inactive} + #{$tile-step-out-fraction} * (var(--tile-scale-active) - #{$tile-scale-inactive}))
+			);
 		animation-timing-function: $tile-hover-easing;
 	}
 
@@ -449,24 +473,36 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 // Every rule below is triggered by the hover zone and lands on the visual inside it. Splitting the
 // two is what stops the jitter: the zone the pointer tests against never moves.
 
+// `:focus-within` would also stay true after the modal closes: react-modal returns focus to the
+// tile that opened it, and a mouse-driven return leaves the tile looking stuck in its hover pose
+// while the visitor has moved on. `:focus-visible` only holds the pose for a focus a keyboard
+// visitor can see, which is what a returned focus is unless Escape (not the mouse) closed the modal.
+// Written out rather than through `:is()`: `:has()` cannot appear inside `:is()`, so every rule
+// below spells out the hover and the focus-visible branch as separate, comma-joined selectors.
+
 // No hover or focus anywhere in the stack: the middle tile is the active one. `:has` drives the
 // siblings with no javascript, as BlockHeroCarousel does.
-.c-driekeuzespeler__tiles:not(:has(.c-driekeuzespeler__tile:is(:hover, :focus-within)))
+.c-driekeuzespeler__tiles:not(
+		:has(.c-driekeuzespeler__tile:hover, .c-driekeuzespeler__tile .c-driekeuzespeler__tile-button:focus-visible)
+	)
 	.c-driekeuzespeler__tile:nth-child(2)
 	.c-driekeuzespeler__tile-visual {
 	@include tile-active;
 }
 
 // A hovered tile takes over the active look whole, so the stack always has one tile at that size.
-.c-driekeuzespeler__tile:is(:hover, :focus-within) .c-driekeuzespeler__tile-visual {
+.c-driekeuzespeler__tile:hover .c-driekeuzespeler__tile-visual,
+.c-driekeuzespeler__tile:has(:focus-visible) .c-driekeuzespeler__tile-visual {
 	@include tile-active;
 }
 
 // Only a side tile travels: the middle one is already the active tile, and hovering it moves the
 // two beside it instead. `forwards`, so the tile holds the last frame until the pointer leaves --
 // the transform transition then carries it back to rest on its own.
-.c-driekeuzespeler__tile:nth-child(1):is(:hover, :focus-within) .c-driekeuzespeler__tile-visual,
-.c-driekeuzespeler__tile:nth-child(3):is(:hover, :focus-within) .c-driekeuzespeler__tile-visual {
+.c-driekeuzespeler__tile:nth-child(1):hover .c-driekeuzespeler__tile-visual,
+.c-driekeuzespeler__tile:nth-child(1):has(:focus-visible) .c-driekeuzespeler__tile-visual,
+.c-driekeuzespeler__tile:nth-child(3):hover .c-driekeuzespeler__tile-visual,
+.c-driekeuzespeler__tile:nth-child(3):has(:focus-visible) .c-driekeuzespeler__tile-visual {
 	animation:
 		c-driekeuzespeler-tile-activate $tile-activate-duration linear forwards,
 		c-driekeuzespeler-tile-settle $tile-activate-duration linear;
@@ -475,7 +511,10 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 // The stack makes room for the hovered tile: its neighbour steps aside by a nudge, and the tile on
 // the far side slides inward and drops behind the middle one. Delayed by the first stage, so the
 // stack waits for the hovered tile to clear it.
-.c-driekeuzespeler__tiles:has(.c-driekeuzespeler__tile:nth-child(1):is(:hover, :focus-within)) {
+.c-driekeuzespeler__tiles:has(
+		.c-driekeuzespeler__tile:nth-child(1):hover,
+		.c-driekeuzespeler__tile:nth-child(1) .c-driekeuzespeler__tile-button:focus-visible
+	) {
 	.c-driekeuzespeler__tile:nth-child(2) .c-driekeuzespeler__tile-visual {
 		--tile-shift: var(--tile-nudge);
 
@@ -490,7 +529,10 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 	}
 }
 
-.c-driekeuzespeler__tiles:has(.c-driekeuzespeler__tile:nth-child(3):is(:hover, :focus-within)) {
+.c-driekeuzespeler__tiles:has(
+		.c-driekeuzespeler__tile:nth-child(3):hover,
+		.c-driekeuzespeler__tile:nth-child(3) .c-driekeuzespeler__tile-button:focus-visible
+	) {
 	.c-driekeuzespeler__tile:nth-child(2) .c-driekeuzespeler__tile-visual {
 		--tile-shift: calc(var(--tile-nudge) * -1);
 
@@ -507,7 +549,10 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 
 // The middle tile is the active one at rest, so hovering it grows nothing. Both side tiles give it
 // room instead, which is the only thing that moves.
-.c-driekeuzespeler__tiles:has(.c-driekeuzespeler__tile:nth-child(2):is(:hover, :focus-within)) {
+.c-driekeuzespeler__tiles:has(
+		.c-driekeuzespeler__tile:nth-child(2):hover,
+		.c-driekeuzespeler__tile:nth-child(2) .c-driekeuzespeler__tile-button:focus-visible
+	) {
 	.c-driekeuzespeler__tile:nth-child(1) .c-driekeuzespeler__tile-visual {
 		--tile-shift: calc(var(--tile-push) * -1);
 	}

ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.tsx

@@ -68,9 +68,10 @@ export const BlockDriekeuzespeler: FunctionComponent<BlockDriekeuzespelerProps>
 	// An index rather than the interest itself, so it survives the renderer handing us a rebuilt array.
 	const [openedIndex, setOpenedIndex] = useState<number | null>(null);
 
-	// The tile a pointer opened the modal from. Escape closes the modal without moving focus, and the
-	// stack's pose follows :focus-within, so that tile would stay in its opened pose under a cursor
-	// that sits somewhere else. Null after a keyboard open: there the focus belongs to the visitor.
+	// The tile a pointer opened the modal from. react-modal returns focus to it on close by any
+	// method, and the stack's pose follows :focus-visible, so that returned focus would otherwise
+	// leave the tile looking hovered under a cursor that has moved on. Null after a keyboard open:
+	// there the focus already belongs to the visitor, and blurring it would fight their own tabbing.
 	const openerRef = useRef<HTMLButtonElement | null>(null);
 
 	// Only the three on screen are resolved, not all two hundred a block may hold. The pids are part
@@ -212,8 +213,13 @@ export const BlockDriekeuzespeler: FunctionComponent<BlockDriekeuzespelerProps>
 				isFetching={isFetchingObjects || isFetchingPlayableFile}
 				onClose={() => {
 					setOpenedIndex(null);
-					openerRef.current?.blur();
+
+					// react-modal only returns focus to the opener once its own close effect runs, which is
+					// after this handler -- blurring here would just be undone a moment later. Deferred a
+					// tick so it lands after that return.
+					const opener = openerRef.current;
 					openerRef.current = null;
+					setTimeout(() => opener?.blur(), 0);
 				}}
 			/>
 		</div>

ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss

@@ -1,9 +1,112 @@
 @use "../../../../shared/styles/settings/colors" as colors;
 @use "../../../../shared/styles/settings/variables" as variables;
 
-$card-radius: variables.$g-spacer-unit * 1.5;
+// Matches the shuffle button's own hover shade (hetarchief-client's `$shade`): admin-core can't
+// reach that client-side variable, so the value is mirrored here rather than shared.
+$close-hover-shade: #505050;
+
+// Modal chrome
+// ---
+// `Modal` from @meemoo/react-components ships no styles of its own, so the look that used to come
+// from avo's `size="extra-large"`, `scrollable` and `borderless` props lives here instead. Scoped
+// to this block, so no other modal in the app is touched.
+
+// `Modal`'s default root class is the generic `c-modal`, which avo2-components still styles
+// globally for other modals in the app (background, width, radius, shadow, its own z-index).
+// `rootClassName` below replaces it outright, so this modal never inherits or collides with that.
+.c-driekeuzespeler-modal__overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 50;
+	display: flex;
+	padding: variables.$g-spacer-unit * 3;
+
+	// A takeover of whatever it shows reads darker than a dialog floating over the page.
+	background-color: rgba(colors.$color-gray-shadow, 0.96);
+
+	@media (max-width: variables.$g-bp2) {
+		padding: variables.$g-spacer-unit * 2.5;
+	}
+}
 
 .c-driekeuzespeler-modal {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 140rem;
+	max-height: 100%;
+	margin: auto;
+	background-color: colors.$white;
+
+	@media (max-width: variables.$g-bp2) {
+		width: 100%;
+	}
+
+	// react-modal focuses the dialog itself on open, and the app paints a focus ring on whatever has
+	// focus. This element is never reached by keyboard, so the ring is noise around the whole modal.
+	&:focus {
+		outline: none;
+	}
+
+	// No title bar: the heading floats over the body rather than reserving a row above it, so the
+	// media reaches the top edge of the modal. Only the close button shows.
+	&__heading {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 1;
+		background-color: transparent;
+	}
+
+	// Kept in the markup for the dialog's accessible name, never drawn.
+	&__title-wrapper {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	// A square tile in the corner, over the media. Compounded onto both of `Button`'s own classes for
+	// higher specificity: its base rules (rounded, sized, teal) would otherwise tie this on
+	// specificity and have to be out-raced on source order alone.
+	&__close.c-button.c-button--icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: variables.$g-spacer-unit * 8;
+		height: variables.$g-spacer-unit * 8;
+		padding: 0;
+		border: 0;
+		border-radius: 0;
+		background-color: colors.$color-gray-1000;
+		color: colors.$white;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $close-hover-shade;
+		}
+
+		.o-svg-icon svg path {
+			fill: currentcolor;
+		}
+	}
+
+	// The media runs edge to edge, so the body carries no padding of its own. Its own stacking
+	// context, so nothing the player draws inside it (flowplayer's own overlays use z-index too) can
+	// ever paint above the close button in `&__heading`, no matter what value it picks.
+	&__content {
+		position: relative;
+		z-index: 0;
+		flex: 1 1 auto;
+		overflow-y: auto;
+		padding: 0;
+	}
+
 	&__media {
 		display: flex;
 		align-items: center;
@@ -77,14 +180,10 @@ $card-radius: variables.$g-spacer-unit * 1.5;
 		font-weight: 700;
 	}
 
-	// Mobile insets the media and stacks the metadata card under it, with the theme CTA on its own row.
+	// Mobile keeps the same flush media, and stacks the theme CTA under the metadata.
 	@media (max-width: variables.$g-bp2) {
 		&__media {
-			width: calc(100% - #{variables.$g-spacer-unit * 5});
-			margin: 0 auto;
-			border-radius: $card-radius $card-radius 0 0;
-
-			// Tighter than desktop's 70vh: the stacked metadata card needs the room.
+			// Tighter than desktop's 70vh: the stacked metadata needs the room.
 			max-height: 45vh;
 			flex: 0 0 auto;
 		}
@@ -95,9 +194,6 @@ $card-radius: variables.$g-spacer-unit * 1.5;
 			flex-direction: column;
 			align-items: stretch;
 			background-color: colors.$white;
-			border-radius: 0 0 $card-radius $card-radius;
-			width: calc(100% - #{variables.$g-spacer-unit * 5});
-			margin: 0 auto;
 		}
 
 		&__divider {