Preventing the banner from obscuring focus

When an element is focused under the banner, we're moving the banner out
of the way, either by scrolling the page or by moving it.

WCAG 2.4.12

Author: felixgirault

src/ui/themes/dsfr/Banner.tsx

@@ -1,6 +1,7 @@
-import {useTranslations} from '../../utils/hooks';
-import {template} from '../../utils/template';
+import {useRef} from 'preact/hooks';
 import type {BannerComponent} from '../../components/types/Banner';
+import {useNonObscuringElement, useTranslations} from '../../utils/hooks';
+import {template} from '../../utils/template';
 
 const Banner: BannerComponent = ({
 	needsUpdate,
@@ -11,10 +12,13 @@ const Banner: BannerComponent = ({
 	onDecline,
 	onConfigure
 }) => {
+	const ref = useRef<HTMLDivElement>();
 	const t = useTranslations();
 
+	useNonObscuringElement(ref);
+
 	return (
-		<div className="fr-consent-banner" aria-hidden={isHidden}>
+		<div className="fr-consent-banner" aria-hidden={isHidden} ref={ref}>
 			{t.banner.title ? <h2 className="fr-h6">{t.banner.title}</h2> : null}
 
 			<div className="fr-consent-banner__content">

src/ui/themes/standard/Banner.tsx

@@ -1,7 +1,8 @@
+import {useRef} from 'preact/hooks';
+import {BannerComponent} from '../../components/types/Banner';
 import {imageAttributes} from '../../utils/config';
-import {useTranslations} from '../../utils/hooks';
+import {useNonObscuringElement, useTranslations} from '../../utils/hooks';
 import {template} from '../../utils/template';
-import {BannerComponent} from '../../components/types/Banner';
 
 const Banner: BannerComponent = ({
 	isHidden,
@@ -13,11 +14,14 @@ const Banner: BannerComponent = ({
 	onDecline: onDeclineRequest,
 	onConfigure: onConfigRequest
 }) => {
+	const bodyRef = useRef<HTMLDivElement>();
 	const t = useTranslations();
 
+	useNonObscuringElement(bodyRef);
+
 	return (
 		<div aria-hidden={isHidden} className="orejime-Banner">
-			<div className="orejime-Banner-body">
+			<div className="orejime-Banner-body" ref={bodyRef}>
 				{logo && (
 					<div className="orejime-Banner-logoContainer">
 						<img

src/ui/utils/dom.ts

@@ -53,3 +53,66 @@ export const findFirstFocusableChild = (element: HTMLElement) =>
 	element.querySelector<HTMLElement>(
 		'a[href], button:not([disabled]):not([aria-hidden]), [tabindex]:not([tabindex^="-"])'
 	);
+
+// Translates an element vertically by a given offset,
+// relatively to its current translation.
+const translateElementY = (element: HTMLElement, offset: number) => {
+	const base = Number(element.dataset.translation) || 0;
+	const translation = base + offset;
+
+	if (translation > 0) {
+		element.dataset.translation = translation.toString();
+		element.style.transform = `translateY(${translation}px)`;
+	} else {
+		delete element.dataset.translation;
+		element.style.transform = '';
+	}
+};
+
+// Resolves a visual collision between two elements, either
+// by scrolling or hiding one of them.
+// We're only resolving collisions on the vertical axis, as
+// it is the main direction of web pages.
+export const resolveCollision = (fixed: HTMLElement, mobile: HTMLElement) => {
+	if (mobile.contains(fixed)) {
+		translateElementY(mobile, 0);
+		return;
+	}
+
+	const fixedRect = fixed.getBoundingClientRect();
+	const mobileRect = mobile.getBoundingClientRect();
+	const isColliding =
+		mobileRect.left < fixedRect.right
+		&& mobileRect.right > fixedRect.x
+		&& mobileRect.top < fixedRect.bottom
+		&& mobileRect.bottom > fixedRect.top;
+
+	const mobileCenterY = mobileRect.top + mobileRect.height / 2;
+	const direction = mobileCenterY > window.innerHeight / 2 ? 1 : -1;
+	const overlap =
+		direction > 0
+			? fixedRect.bottom - mobileRect.top
+			: mobileRect.bottom - fixedRect.top;
+
+	if (!isColliding) {
+		translateElementY(mobile, overlap);
+		return;
+	}
+
+	const doc = document.documentElement;
+	const leeway =
+		direction > 0
+			? Math.abs(doc.scrollHeight - doc.clientHeight - doc.scrollTop)
+			: doc.scrollTop;
+
+	// We're scrolling as much possible first.
+	window.scrollBy({
+		top: overlap * direction
+	});
+
+	// If scrolling isn't enough to get out of trouble,
+	// we're moving the mobile element out of the way.
+	if (overlap > leeway) {
+		translateElementY(mobile, (overlap - leeway) * direction);
+	}
+};

src/ui/utils/hooks.ts

@@ -1,12 +1,13 @@
-import {useContext, useEffect, useState} from 'preact/hooks';
-import Context from '../components/Context';
+import {MutableRef, useContext, useEffect, useState} from 'preact/hooks';
 import {Purpose} from '../../core/types';
 import {
 	acceptedConsents,
 	areAllPurposesDisabled,
 	areAllPurposesEnabled,
 	declinedConsents
 } from '../../core/utils/purposes';
+import Context from '../components/Context';
+import {resolveCollision} from './dom';
 
 export const useConfig = () => {
 	const {config} = useContext(Context);
@@ -107,3 +108,17 @@ export const useConsent = (
 	const manager = useManager();
 	return [manager.getConsent(id), manager.setConsent.bind(manager, id)];
 };
+
+export const useNonObscuringElement = (ref: MutableRef<HTMLElement>): void => {
+	useEffect(() => {
+		const resolve = (event: FocusEvent) => {
+			resolveCollision(event.target as HTMLElement, ref.current);
+		};
+
+		document.addEventListener('focusin', resolve);
+
+		return () => {
+			document.removeEventListener('focusin', resolve);
+		};
+	}, [ref]);
+};