From e34ea98a06c5be18fb11491f3338d52ab2521462 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Fri, 28 Jun 2024 17:00:47 +0100 Subject: [PATCH 1/5] Add accessibility preferences --- .../components/Accessibility.importable.tsx | 78 +++++++++++++++++++ .../src/layouts/TagPageLayout.tsx | 9 +++ 2 files changed, 87 insertions(+) create mode 100644 dotcom-rendering/src/components/Accessibility.importable.tsx diff --git a/dotcom-rendering/src/components/Accessibility.importable.tsx b/dotcom-rendering/src/components/Accessibility.importable.tsx new file mode 100644 index 00000000000..01553dd7fde --- /dev/null +++ b/dotcom-rendering/src/components/Accessibility.importable.tsx @@ -0,0 +1,78 @@ +import { css } from '@emotion/react'; +import { storage } from '@guardian/libs'; +import { textEgyptian17 } from '@guardian/source/foundations'; +import { useEffect, useState } from 'react'; +import { FrontSection } from './FrontSection'; + +const formStyle = css` + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem; + border: 2px groove rgb(192, 192, 192); + margin-left: 10px; + ${textEgyptian17} +`; + +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(true); + + useEffect(() => { + storage.local.set( + 'gu.prefs.accessibility.flashing-elements', + shouldFlash, + ); + }, [shouldFlash]); + + const useHandleCheckboxChange = (): void => { + setShouldFlash((prev) => !prev); + }; + + return ( + +
+
+

+ 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). +

+

+ However, if you are having trouble reading this website, + you can change the way it looks or disable some of its + functionalities. +

+ + +
+
+ + ); +}; diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx index 39fbe4c4a2a..0fad0059280 100644 --- a/dotcom-rendering/src/layouts/TagPageLayout.tsx +++ b/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 ( <>
@@ -228,6 +232,11 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
+ {isAccessibilityPage && ( + + + + )} Date: Mon, 1 Jul 2024 10:26:40 +0100 Subject: [PATCH 2/5] Update Accessibility.importable.tsx --- .../src/components/Accessibility.importable.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/components/Accessibility.importable.tsx b/dotcom-rendering/src/components/Accessibility.importable.tsx index 01553dd7fde..6b021a0b8f0 100644 --- a/dotcom-rendering/src/components/Accessibility.importable.tsx +++ b/dotcom-rendering/src/components/Accessibility.importable.tsx @@ -1,17 +1,17 @@ import { css } from '@emotion/react'; import { storage } from '@guardian/libs'; -import { textEgyptian17 } from '@guardian/source/foundations'; +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: 1rem; - padding: 1rem; - border: 2px groove rgb(192, 192, 192); + gap: 0.5rem; + padding: 0.5rem 1rem; + border: 2px groove ${palette.neutral[86]}; margin-left: 10px; - ${textEgyptian17} + ${article17} `; const bold = css` @@ -35,7 +35,7 @@ export const Accessibility = () => { ); }, [shouldFlash]); - const useHandleCheckboxChange = (): void => { + const toggleFlash = (): void => { setShouldFlash((prev) => !prev); }; @@ -63,7 +63,7 @@ export const Accessibility = () => { Allow flashing elements From 4c06672814418bfda0dbb2f856cae1388dba33b8 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 1 Jul 2024 12:07:03 +0100 Subject: [PATCH 3/5] Update Accessibility.importable.tsx --- .../src/components/Accessibility.importable.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/dotcom-rendering/src/components/Accessibility.importable.tsx b/dotcom-rendering/src/components/Accessibility.importable.tsx index 6b021a0b8f0..fa6825b746c 100644 --- a/dotcom-rendering/src/components/Accessibility.importable.tsx +++ b/dotcom-rendering/src/components/Accessibility.importable.tsx @@ -28,6 +28,15 @@ const bold = css` export const Accessibility = () => { const [shouldFlash, setShouldFlash] = useState(true); + useEffect(() => { + const flashingPreference = storage.local.get( + 'gu.prefs.accessibility.flashing-elements', + ); + if (flashingPreference === false) { + setShouldFlash(false); + } + }, []); + useEffect(() => { storage.local.set( 'gu.prefs.accessibility.flashing-elements', From c35beb643efbb4a18093dbc536c0dfb4d2162e13 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 1 Jul 2024 14:15:58 +0100 Subject: [PATCH 4/5] Parity with frontend's setting of preference Co-Authored-By: Max Duval --- .../src/components/Accessibility.importable.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/Accessibility.importable.tsx b/dotcom-rendering/src/components/Accessibility.importable.tsx index fa6825b746c..0fa1cc83bd3 100644 --- a/dotcom-rendering/src/components/Accessibility.importable.tsx +++ b/dotcom-rendering/src/components/Accessibility.importable.tsx @@ -26,18 +26,21 @@ const bold = css` * Allows user to select their accessibility preferences */ export const Accessibility = () => { - const [shouldFlash, setShouldFlash] = useState(true); + const [shouldFlash, setShouldFlash] = useState(); + + const checked = shouldFlash ?? true; useEffect(() => { const flashingPreference = storage.local.get( 'gu.prefs.accessibility.flashing-elements', ); - if (flashingPreference === false) { - setShouldFlash(false); + if (typeof flashingPreference === 'boolean') { + setShouldFlash(flashingPreference); } }, []); useEffect(() => { + if (shouldFlash === undefined) return; storage.local.set( 'gu.prefs.accessibility.flashing-elements', shouldFlash, @@ -45,7 +48,7 @@ export const Accessibility = () => { }, [shouldFlash]); const toggleFlash = (): void => { - setShouldFlash((prev) => !prev); + setShouldFlash((prev) => (prev === undefined ? false : !prev)); }; return ( @@ -71,12 +74,12 @@ export const Accessibility = () => { From 97ecaefa7fdc0a9800ef7ab0d9b2a33f4734015d Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 1 Jul 2024 15:10:20 +0100 Subject: [PATCH 5/5] Update TagPageLayout.tsx Co-Authored-By: Max Duval --- dotcom-rendering/src/layouts/TagPageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx index 0fad0059280..cd87046e8ea 100644 --- a/dotcom-rendering/src/layouts/TagPageLayout.tsx +++ b/dotcom-rendering/src/layouts/TagPageLayout.tsx @@ -233,7 +233,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
{isAccessibilityPage && ( - + )}