WIP Focus management

Author: felixgirault

src/ui/components/ContextualNoticeContainer.tsx

@@ -1,16 +1,38 @@
+import {useEffect, useState} from 'preact/hooks';
 import {purposesOnly} from '../utils/config';
-import {useConfig, useManager, useTheme} from '../utils/hooks';
+import {useConfig, useManager, useTheme, useTranslations} from '../utils/hooks';
+import {template} from '../utils/template';
+
+type ContextualNoticeState = 'enabled' | 'disabling' | 'disabled';
 
 interface ContextualNoticeContainerProps {
 	data: Record<string, string>;
+	isEnabled: boolean;
 }
 
-const ContextualNoticeContainer = ({data}: ContextualNoticeContainerProps) => {
+const ContextualNoticeContainer = ({
+	data,
+	isEnabled
+}: ContextualNoticeContainerProps) => {
 	const config = useConfig();
 	const manager = useManager();
+	const t = useTranslations();
 	const {ContextualNotice} = useTheme();
+	const [state, setState] = useState<ContextualNoticeState>(
+		isEnabled ? 'enabled' : 'disabled'
+	);
+
+	useEffect(() => {
+		if (isEnabled && state !== 'enabled') {
+			setState('enabled');
+		}
 
-	if (!data?.purpose) {
+		if (!isEnabled && state === 'enabled') {
+			setState('disabling');
+		}
+	}, [isEnabled]);
+
+	if (state === 'disabled') {
 		return null;
 	}
 
@@ -24,15 +46,30 @@ const ContextualNoticeContainer = ({data}: ContextualNoticeContainerProps) => {
 
 	const handleAccept = () => {
 		manager.setConsent(purpose.id, true);
+		setState('disabling');
+	};
+
+	const handleFocusOut = () => {
+		setState('disabled');
 	};
 
 	return (
 		<div className="orejime-Env">
-			<ContextualNotice
-				purpose={purpose}
-				data={data}
-				onAccept={handleAccept}
-			></ContextualNotice>
+			{state === 'enabled' ? (
+				<ContextualNotice
+					purpose={purpose}
+					data={data}
+					onAccept={handleAccept}
+				></ContextualNotice>
+			) : state === 'disabling' ? (
+				<div
+					tabIndex={-1}
+					title={template(t.contextual.accepted, {
+						purpose: purpose.title
+					}).join('')}
+					onFocusOut={handleFocusOut}
+				/>
+			) : null}
 		</div>
 	);
 };

src/ui/contextualConsentsEffect.tsx

@@ -1,38 +1,44 @@
 import {render} from 'preact';
-import {ConsentsMap, Manager} from '../core';
+import {ConsentsMap} from '../core/types';
+import Manager from '../core/Manager';
 import {Config} from './types';
 import Context from './components/Context';
 import ContextualNoticeContainer from './components/ContextualNoticeContainer';
 
 export const contextualConsentsEffect = (config: Config, manager: Manager) => {
-	const templates = new WeakMap();
+	const containers = new WeakMap();
 
 	return (consents: ConsentsMap) => {
 		Object.entries(consents).forEach(([id, state]) => {
 			document
 				.querySelectorAll(`template[data-contextual][data-purpose="${id}"]`)
 				.forEach((template: HTMLTemplateElement) => {
-					if (!templates.has(template)) {
+					if (!containers.has(template)) {
 						const container = document.createElement('div');
 						container.style.display = 'contents';
-						template.insertAdjacentElement('afterend', container);
-						templates.set(template, container);
+
+						// The container is inserted before the template, so if
+						// the user allows cookies from inside, the revealed
+						// content is always after.
+						template.insertAdjacentElement('beforeend', container);
+						containers.set(template, container);
 					}
 
+					const container = containers.get(template);
+
 					render(
-						state ? null : (
-							<Context.Provider
-								value={{
-									config,
-									manager
-								}}
-							>
-								<ContextualNoticeContainer
-									data={{...template.dataset}}
-								/>
-							</Context.Provider>
-						),
-						templates.get(template)
+						<Context.Provider
+							value={{
+								config,
+								manager
+							}}
+						>
+							<ContextualNoticeContainer
+								data={{...template.dataset}}
+								isEnabled={!state}
+							/>
+						</Context.Provider>,
+						container
 					);
 				});
 		});