Add accessibility form to the /help/accessibility-help tag page

dotcom-rendering/src/components/Accessibility.importable.tsx

@@ -0,0 +1,90 @@
+import { css } from '@emotion/react';
+import { storage } from '@guardian/libs';
+import { article17, palette } from '@guardian/source/foundations';
+import { useEffect, useState } from 'react';
+import { FrontSection } from './FrontSection';
+
+const formStyle = css`
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.5rem 1rem;
+	border: 2px groove ${palette.neutral[86]};
+	margin-left: 10px;
+	${article17}
+`;
+
+const bold = css`
+	font-weight: bold;
+`;
+
+/**
+ * Updates the user's accessibility preferences
+ *
+ * ## Why does this need to be an Island?
+ *
+ * Allows user to select their accessibility preferences
+ */
+export const Accessibility = () => {
+	const [shouldFlash, setShouldFlash] = useState<boolean | undefined>();
+
+	const checked = shouldFlash ?? true;
+
+	useEffect(() => {
+		const flashingPreference = storage.local.get(
+			'gu.prefs.accessibility.flashing-elements',
+		);
+		if (typeof flashingPreference === 'boolean') {
+			setShouldFlash(flashingPreference);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (shouldFlash === undefined) return;
+		storage.local.set(
+			'gu.prefs.accessibility.flashing-elements',
+			shouldFlash,
+		);
+	}, [shouldFlash]);
+
+	const toggleFlash = (): void => {
+		setShouldFlash((prev) => (prev === undefined ? false : !prev));
+	};
+
+	return (
+		<FrontSection
+			title={'Preferences'}
+			editionId={'UK'}
+			discussionApiUrl={''}
+		>
+			<form>
+				<fieldset css={formStyle}>
+					<p>
+						We aim to make this site accessible to a wide audience
+						and ensure a great experience for all users by
+						conforming to World Wide Web Consortium accessibility
+						guidelines (W3C's WCAG).
+					</p>
+					<p>
+						However, if you are having trouble reading this website,
+						you can change the way it looks or disable some of its
+						functionalities.
+					</p>
+
+					<label>
+						<input
+							type="checkbox"
+							checked={checked}
+							onChange={toggleFlash}
+							data-link-name="flashing-elements"
+						/>
+						<span css={bold}>Allow flashing elements </span>
+						{checked
+							? 'Untick this to disable flashing and moving elements'
+							: 'Tick this to enable flashing or moving elements'}
+					</label>
+				</fieldset>
+			</form>
+		</FrontSection>
+	);
+};

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { palette } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { Fragment } from 'react';
+import { Accessibility } from '../components/Accessibility.importable';
 import { DecideContainerByTrails } from '../components/DecideContainerByTrails';
 import {
 	decideFrontsBannerAdSlot,
@@ -92,6 +93,9 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 
 	const contributionsServiceUrl = 'https://contributions.guardianapis.com'; // TODO: Read this from config (use getContributionsServiceUrl)
 
+	const isAccessibilityPage =
+		tagPage.config.pageId === 'help/accessibility-help';
+
 	return (
 		<>
 			<div data-print-layout="hide" id="bannerandheader">
@@ -228,6 +232,11 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 			</div>
 
 			<main data-layout="TagPageLayout" id="maincontent">
+				{isAccessibilityPage && (
+					<Island priority="enhancement" defer={{ until: 'visible' }}>
+						<Accessibility />
+					</Island>
+				)}
 				<TagPageHeader
 					title={tagPage.header.title}
 					description={tagPage.header.description}