From 281d8f8a513f9387861994715c6078bf2c94e4a5 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 11:15:34 +0000
Subject: [PATCH 1/7] rename onClickAccessibilityStatement

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Footer/BottomBar.stories.tsx | 2 +-
 src/components/Footer/BottomBar.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Footer/BottomBar.stories.tsx b/src/components/Footer/BottomBar.stories.tsx
index e603697..aa9f382 100644
--- a/src/components/Footer/BottomBar.stories.tsx
+++ b/src/components/Footer/BottomBar.stories.tsx
@@ -13,7 +13,7 @@ export const BottomBar: Story = {
   args: {
     title: 'Accessibility Statement',
     email: 'team@example.com',
-    clickAccessibility: () => console.log('Click Accessibility'),
+    onClickAccessibilityStatement: () => console.log('Click Accessibility'),
     url: 'http://localhost:6006'
   }
 };
\ No newline at end of file
diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index c0e3689..244b38c 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -4,11 +4,11 @@ import {AppBar, Box, Link, Toolbar, Typography} from "@mui/material";
 export interface BottomBarProps {
   title: string;
   email: string;
-  clickAccessibility: () => void;
+  onClickAccessibilityStatement: () => void;
   url: string;
 }
 
-export const BottomBar = ({title, email, clickAccessibility, url}: BottomBarProps) => {
+export const BottomBar = ({title, email, onClickAccessibilityStatement, url}: BottomBarProps) => {
   return (
     <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
       <Toolbar sx={{
@@ -21,7 +21,7 @@ export const BottomBar = ({title, email, clickAccessibility, url}: BottomBarProp
         <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
         <Link underline="always" onClick={() => {
           window.location.hash = 'accessibility';
-          clickAccessibility();
+          onClickAccessibilityStatement();
         }} title={`${title}`}>
           Accessibility statement
         </Link>

From c25b03c603333db6f582f2dd45b1e735849ec7bf Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 13:57:56 +0000
Subject: [PATCH 2/7] update scroll section

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 package-lock.json                             | 73 +++++++++++++++++++
 .../AccessibilityStatement.stories.tsx        |  3 +-
 .../Accessibility/AccessibilityStatement.tsx  | 19 ++++-
 src/components/Footer/BottomBar.tsx           |  7 +-
 4 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ebae341..adbda77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5483,6 +5483,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/css-mediaquery": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@types/css-mediaquery/-/css-mediaquery-0.1.4.tgz",
@@ -14047,6 +14054,58 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
+    "node_modules/react-router": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.0.tgz",
+      "integrity": "sha512-1xf+yMVhUjAzZGY90ZnYJ9KVe1R8FggpugzRBkh+p6vl4cC1sHDe3nO+r5rxWTAgCMf8uN5hfoV2M7rLVTWPUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.0.tgz",
+      "integrity": "sha512-2QAxXpwgQuh423C64oZiV2cCKPCNUgZxcvZaS8O0PAHPZ/z8kTq7YbGD4KTNZm6Yj66d+HAfGkWPp8MCpdtD+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -14849,6 +14908,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -15779,6 +15845,13 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/src/components/Accessibility/AccessibilityStatement.stories.tsx b/src/components/Accessibility/AccessibilityStatement.stories.tsx
index 195a224..d09c94a 100644
--- a/src/components/Accessibility/AccessibilityStatement.stories.tsx
+++ b/src/components/Accessibility/AccessibilityStatement.stories.tsx
@@ -12,6 +12,7 @@ type Story = StoryObj<typeof AccessibilityStatementComponent>;
 export const AccessibilityStatement: Story = {
   args: {
     teamEmail: 'team@example.com',
-    emailUsToReportAProblem: () => console.log('Email us to report a problem')
+    sendReportProblemGaEvent: () => console.log('Email us to report a problem'),
+    scrollSection: ""
   }
 };
\ No newline at end of file
diff --git a/src/components/Accessibility/AccessibilityStatement.tsx b/src/components/Accessibility/AccessibilityStatement.tsx
index 0479068..c1148ba 100644
--- a/src/components/Accessibility/AccessibilityStatement.tsx
+++ b/src/components/Accessibility/AccessibilityStatement.tsx
@@ -1,16 +1,27 @@
-import React from 'react';
+import React,{ useEffect } from 'react';
 import {Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 
 export interface IAccessibilityStatementProps {
   teamEmail: string;
-  emailUsToReportAProblem: () => void;
+  sendReportProblemGaEvent: () => void;
+  scrollSection: string;
 }
 
 export const AccessibilityStatement = ({
                                          teamEmail,
-                                         emailUsToReportAProblem
+                                         sendReportProblemGaEvent,
+                                         scrollSection
                                        }: IAccessibilityStatementProps) => {
+  useEffect(() => {
+    if (scrollSection) {
+      const element = document.getElementById(scrollSection);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }, [scrollSection]);
+
   return (
     <Box sx={{maxWidth: '70%', fontSize: '16px'}}>
       <Box sx={{
@@ -136,7 +147,7 @@ export const AccessibilityStatement = ({
             contact us:</Typography>
           <Button color="primary" variant="contained" size="large" style={{textTransform: 'none', fontSize: '16px'}}
                   href={`mailto:${teamEmail}`} target="_blank"
-                  onClick={emailUsToReportAProblem}>Email us to report a problem
+                  onClick={sendReportProblemGaEvent}>Email us to report a problem
           </Button>
         </Box>
         <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index 244b38c..3a2b343 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import {AppBar, Box, Link, Toolbar, Typography} from "@mui/material";
+import {AppBar, Link, Toolbar, Typography} from "@mui/material";
 
 export interface BottomBarProps {
-  title: string;
   email: string;
   onClickAccessibilityStatement: () => void;
   url: string;
 }
 
-export const BottomBar = ({title, email, onClickAccessibilityStatement, url}: BottomBarProps) => {
+export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBarProps) => {
   return (
     <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
       <Toolbar sx={{
@@ -22,7 +21,7 @@ export const BottomBar = ({title, email, onClickAccessibilityStatement, url}: Bo
         <Link underline="always" onClick={() => {
           window.location.hash = 'accessibility';
           onClickAccessibilityStatement();
-        }} title={`${title}`}>
+        }}>
           Accessibility statement
         </Link>
         <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>

From 72674cb51dfda37028b2324e7abc56063069d218 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 14:12:29 +0000
Subject: [PATCH 3/7] update using href for accessibility

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Footer/BottomBar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index 3a2b343..f798212 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -18,8 +18,7 @@ export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBar
       }}>
         <Typography variant="body1">Support links:</Typography>
         <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
-        <Link underline="always" onClick={() => {
-          window.location.hash = 'accessibility';
+        <Link underline="always" href="#accessibility" onClick={() => {
           onClickAccessibilityStatement();
         }}>
           Accessibility statement

From bacfa0b2a51fefdccc5cd238755a1cf5836b9fed Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 14:36:13 +0000
Subject: [PATCH 4/7] update #accessibility/ in href

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../Accessibility/AccessibilityStatement.tsx         | 12 ++++++------
 src/components/Footer/BottomBar.tsx                  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Accessibility/AccessibilityStatement.tsx b/src/components/Accessibility/AccessibilityStatement.tsx
index c1148ba..0bff882 100644
--- a/src/components/Accessibility/AccessibilityStatement.tsx
+++ b/src/components/Accessibility/AccessibilityStatement.tsx
@@ -34,37 +34,37 @@ export const AccessibilityStatement = ({
       <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
         <Typography variant="h2" sx={{paddingBottom: '10px'}}>In this page:</Typography>
         <List sx={{border: '1px solid #B4B5BE'}}>
-          <ListItem component={Link} href="#introduction" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/introduction" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
             <ListItemText primary="Introduction"/>
           </ListItem>
-          <ListItem component={Link} href="#how-accessible" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/how-accessible" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
             <ListItemText primary="How accessible this service is"/>
           </ListItem>
-          <ListItem component={Link} href="#feedback" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/feedback" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
             <ListItemText primary="Feedback and contact information"/>
           </ListItem>
-          <ListItem component={Link} href="#enforcement" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/enforcement" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
             <ListItemText primary="Enforcement procedure"/>
           </ListItem>
-          <ListItem component={Link} href="#technical-info" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/technical-info" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
             <ListItemText primary="Technical information about this website’s accessibility"/>
           </ListItem>
-          <ListItem component={Link} href="#improve-accessibility" sx={{textDecoration: 'underline'}}>
+          <ListItem component={Link} href="#accessibility/improve-accessibility" sx={{textDecoration: 'underline'}}>
             <ListItemIcon sx={{minWidth: '20px'}}>
               <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
             </ListItemIcon>
diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index f798212..f7fd1a4 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -18,7 +18,7 @@ export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBar
       }}>
         <Typography variant="body1">Support links:</Typography>
         <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
-        <Link underline="always" href="#accessibility" onClick={() => {
+        <Link underline="always" href="#accessibility/" onClick={() => {
           onClickAccessibilityStatement();
         }}>
           Accessibility statement

From c7ec4124f12a246ed72fd0fa6e4d7ff72a1d6a59 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 14:52:05 +0000
Subject: [PATCH 5/7] adding padding to button

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../Accessibility/AccessibilityStatement.tsx   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Accessibility/AccessibilityStatement.tsx b/src/components/Accessibility/AccessibilityStatement.tsx
index 0bff882..2d2b0aa 100644
--- a/src/components/Accessibility/AccessibilityStatement.tsx
+++ b/src/components/Accessibility/AccessibilityStatement.tsx
@@ -1,4 +1,4 @@
-import React,{ useEffect } from 'react';
+import React, {useEffect} from 'react';
 import {Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 
@@ -17,7 +17,7 @@ export const AccessibilityStatement = ({
     if (scrollSection) {
       const element = document.getElementById(scrollSection);
       if (element) {
-        element.scrollIntoView({ behavior: 'smooth' });
+        element.scrollIntoView({behavior: 'smooth'});
       }
     }
   }, [scrollSection]);
@@ -140,12 +140,14 @@ export const AccessibilityStatement = ({
         </Box>
         <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
           <Typography variant="h2" id="feedback">Feedback and contact information</Typography>
-          <Typography sx={{paddingTop: '10px'}}>The Dynamic Response Tool (DRT) team, which works within Technology
-            Delivery Centre, is responsible for the accessibility of this service. We’re always looking to improve the
-            accessibility of this website. If you
-            find any problems not listed on this page or think we’re not meeting other accessibility requirements,
-            contact us:</Typography>
-          <Button color="primary" variant="contained" size="large" style={{textTransform: 'none', fontSize: '16px'}}
+          <Typography sx={{paddingTop: '10px', paddingBottom: '10px',}}>The Dynamic Response Tool (DRT) team, which
+            works within Technology Delivery Centre, is responsible for the accessibility of this service. We’re always
+            looking to improve the accessibility of
+            this website. If you find any problems not listed on this page or think we’re not meeting other
+            accessibility requirements, contact us:
+          </Typography>
+          <Button color="primary" variant="contained" size="large"
+                  style={{textTransform: 'none', fontSize: '16px'}}
                   href={`mailto:${teamEmail}`} target="_blank"
                   onClick={sendReportProblemGaEvent}>Email us to report a problem
           </Button>

From aea6e0c0554d81664802e1212cd484dfa5410bc6 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Fri, 22 Nov 2024 14:56:53 +0000
Subject: [PATCH 6/7] adding drt theme

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../Accessibility/AccessibilityStatement.tsx  | 370 +++++++++---------
 src/components/Footer/BottomBar.tsx           |  37 +-
 2 files changed, 209 insertions(+), 198 deletions(-)

diff --git a/src/components/Accessibility/AccessibilityStatement.tsx b/src/components/Accessibility/AccessibilityStatement.tsx
index 2d2b0aa..97098bc 100644
--- a/src/components/Accessibility/AccessibilityStatement.tsx
+++ b/src/components/Accessibility/AccessibilityStatement.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect} from 'react';
-import {Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
+import {Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, ThemeProvider, Typography} from '@mui/material';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import {drtTheme} from "../../index";
 
 export interface IAccessibilityStatementProps {
   teamEmail: string;
@@ -23,255 +24,262 @@ export const AccessibilityStatement = ({
   }, [scrollSection]);
 
   return (
-    <Box sx={{maxWidth: '70%', fontSize: '16px'}}>
-      <Box sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: '10px',
-      }}>
-        <Typography variant="h1">Accessibility statement for Dynamic Response Tool (DRT)</Typography>
-      </Box>
-      <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-        <Typography variant="h2" sx={{paddingBottom: '10px'}}>In this page:</Typography>
-        <List sx={{border: '1px solid #B4B5BE'}}>
-          <ListItem component={Link} href="#accessibility/introduction" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="Introduction"/>
-          </ListItem>
-          <ListItem component={Link} href="#accessibility/how-accessible" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="How accessible this service is"/>
-          </ListItem>
-          <ListItem component={Link} href="#accessibility/feedback" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="Feedback and contact information"/>
-          </ListItem>
-          <ListItem component={Link} href="#accessibility/enforcement" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="Enforcement procedure"/>
-          </ListItem>
-          <ListItem component={Link} href="#accessibility/technical-info" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="Technical information about this website’s accessibility"/>
-          </ListItem>
-          <ListItem component={Link} href="#accessibility/improve-accessibility" sx={{textDecoration: 'underline'}}>
-            <ListItemIcon sx={{minWidth: '20px'}}>
-              <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-            </ListItemIcon>
-            <ListItemText primary="What we’re doing to improve accessibility"/>
-          </ListItem>
-        </List>
-      </Box>
-      <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+    <ThemeProvider theme={drtTheme}>
+      <Box sx={{maxWidth: '70%', fontSize: '16px'}}>
+        <Box sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          padding: '10px',
+        }}>
+          <Typography variant="h1">Accessibility statement for Dynamic Response Tool (DRT)</Typography>
+        </Box>
         <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="introduction">Introduction</Typography>
-          <Typography sx={{paddingTop: '10px'}}>This accessibility statement applies to <a
-            href="https://drt.homeoffice.gov.uk/" target="_blank"
-            rel="noopener noreferrer">https://drt.homeoffice.gov.uk/</a>.
-            This website is run by Technology Delivery Centre, part of Home Office Digital, Data and Technology
-            Directorate’s Migration and Borders Technology Portfolio, on behalf of Border Force. We want as many people
-            as possible to be able to use this website. For example, that means you should be able to:</Typography>
-          <List>
-            <ListItem>
-              <ListItemIcon sx={{minWidth: '20px'}}>
-                <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-              </ListItemIcon>
-              <ListItemText primary="change colours, contrast levels and fonts using browser or device settings"/>
-            </ListItem>
-            <ListItem>
+          <Typography variant="h2" sx={{paddingBottom: '10px'}}>In this page:</Typography>
+          <List sx={{border: '1px solid #B4B5BE'}}>
+            <ListItem component={Link} href="#accessibility/introduction" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText primary="zoom in up to 400% without the text spilling off the screen"/>
+              <ListItemText primary="Introduction"/>
             </ListItem>
-            <ListItem>
+            <ListItem component={Link} href="#accessibility/how-accessible" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText primary="navigate most of the website using a keyboard or speech recognition software"/>
+              <ListItemText primary="How accessible this service is"/>
             </ListItem>
-            <ListItem>
+            <ListItem component={Link} href="#accessibility/feedback" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText
-                primary="listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)"/>
+              <ListItemText primary="Feedback and contact information"/>
             </ListItem>
-          </List>
-          <Typography>We’ve also made the website text as simple as possible to understand.</Typography>
-          <Typography sx={{paddingTop: '10px'}}><a href="https://mcmw.abilitynet.org.uk/" target="_blank"
-                                                   rel="noopener noreferrer">AbilityNet</a> has
-            advice on making your device easier to use if you have a disability.</Typography>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="how-accessible">How accessible this service is</Typography>
-          <Typography sx={{paddingTop: '10px'}}>We know some parts of this website are not fully
-            accessible:</Typography>
-          <List>
-            <ListItem>
+            <ListItem component={Link} href="#accessibility/enforcement" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText primary="you cannot easily navigate content by tabbing through it on some pages"/>
+              <ListItemText primary="Enforcement procedure"/>
             </ListItem>
-            <ListItem>
+            <ListItem component={Link} href="#accessibility/technical-info" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText primary="some words in tables have been shortened"/>
+              <ListItemText primary="Technical information about this website’s accessibility"/>
             </ListItem>
-            <ListItem>
+            <ListItem component={Link} href="#accessibility/improve-accessibility" sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>
-              <ListItemText primary="some elements are problematic for screen reader users"/>
+              <ListItemText primary="What we’re doing to improve accessibility"/>
             </ListItem>
           </List>
         </Box>
         <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="feedback">Feedback and contact information</Typography>
-          <Typography sx={{paddingTop: '10px', paddingBottom: '10px',}}>The Dynamic Response Tool (DRT) team, which
-            works within Technology Delivery Centre, is responsible for the accessibility of this service. We’re always
-            looking to improve the accessibility of
-            this website. If you find any problems not listed on this page or think we’re not meeting other
-            accessibility requirements, contact us:
-          </Typography>
-          <Button color="primary" variant="contained" size="large"
-                  style={{textTransform: 'none', fontSize: '16px'}}
-                  href={`mailto:${teamEmail}`} target="_blank"
-                  onClick={sendReportProblemGaEvent}>Email us to report a problem
-          </Button>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="enforcement">Enforcement procedure</Typography>
-          <Typography sx={{paddingTop: '10px'}}>The Equality and Human Rights Commission (EHRC) is responsible for
-            enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018
-            (the ‘accessibility regulations’).
-            If you’re not happy with how we respond to your complaint, contact the <a
-              href="https://www.equalityadvisoryservice.com/" target="_blank" rel="noopener noreferrer">Equality
-              Advisory and Support Service (EASS)</a>.
-          </Typography>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="technical-info">Technical information about this website’s
-            accessibility</Typography>
-          <Typography sx={{paddingTop: '10px'}}>Border Force is committed to making its websites accessible, in
-            accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility
-            Regulations 2018.</Typography>
-          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-            <Typography variant="h3" id="compliance-status">Compliance status</Typography>
-            <Typography sx={{paddingTop: '10px'}}>The website has been tested against the Web Content Accessibility
-              Guidelines (WCAG) 2.1 AA standard.</Typography>
-            <Typography sx={{paddingTop: '10px'}}>This website is partially compliant with the Web Content Accessibility
-              Guidelines (WCAG) 2.1 AA standard <a href="https://www.w3.org/TR/WCAG21/" target="_blank"
-                                                   rel="noopener noreferrer">(https://www.w3.org/TR/WCAG21/)</a>. The
-              non-compliances are listed below.</Typography>
-          </Box>
           <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-            <Typography variant="h3" id="non-compliant-content">Non-compliant content within the accessibility
-              regulations</Typography>
+            <Typography variant="h2" id="introduction">Introduction</Typography>
+            <Typography sx={{paddingTop: '10px'}}>This accessibility statement applies to <a
+              href="https://drt.homeoffice.gov.uk/" target="_blank"
+              rel="noopener noreferrer">https://drt.homeoffice.gov.uk/</a>.
+              This website is run by Technology Delivery Centre, part of Home Office Digital, Data and Technology
+              Directorate’s Migration and Borders Technology Portfolio, on behalf of Border Force. We want as many
+              people
+              as possible to be able to use this website. For example, that means you should be able to:</Typography>
             <List>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="Landmarks are not used fully. On some pages there are no main headings, multiple h1s, incorrectly labelled sub-headings, empty table headers, missing captions, and no skip links which make it difficult for users to determine where the main content is. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 2.4.1 (Bypass Blocks, Level A)."/>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon sx={{minWidth: '20px'}}>
-                  <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-                </ListItemIcon>
-                <ListItemText
-                  primary="Table header descriptions have been shortened, which may not be understandable for all users. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A)."/>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon sx={{minWidth: '20px'}}>
-                  <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-                </ListItemIcon>
-                <ListItemText
-                  primary="Table markup used is confusing for screen reader users. When browsing in context using table shortcuts, the relationship between the table and its contents is not clear. This fails WCAG 2.1 criteria 1.3.1 (Info and Relationships, Level A)."/>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon sx={{minWidth: '20px'}}>
-                  <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-                </ListItemIcon>
-                <ListItemText
-                  primary="There are unlabelled elements (form, select and text), which are problematic for screen reader users. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 4.1.2 (Name, Role, Value, Level A)."/>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon sx={{minWidth: '20px'}}>
-                  <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
-                </ListItemIcon>
-                <ListItemText
-                  primary="There are radio buttons whose context is not clear and that are ambiguous for screen reader users browsing out of context as they have not been grouped together appropriately. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 3.2.2 (On Input, Level A)."/>
+                <ListItemText primary="change colours, contrast levels and fonts using browser or device settings"/>
               </ListItem>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="Illogical focus order of radio buttons and select elements will affect keyboard-only users using the tab key to navigate. This fails WCAG 2.1 success criteria 3.2.2 (On Input, Level A) and 2.4.3 (Focus Order, Level A)."/>
+                <ListItemText primary="zoom in up to 400% without the text spilling off the screen"/>
               </ListItem>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="Screen reader users aren’t made aware of modals, and keyboard-only users will experience a loss of focus and must tab through content before gaining focus in a modal. This fails WCAG 2.1 success criteria 2.4.3 (Focus Order, Level A)."/>
+                <ListItemText primary="navigate most of the website using a keyboard or speech recognition software"/>
               </ListItem>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
                 <ListItemText
-                  primary="There is no indication that several data export links present download CSV files. This fails WCAG 2.1 success criteria 2.4.4 (Link Purpose - in context, Level A) and 2.4.9 (Link Purpose - Link Only, Level AAA)."/>
+                  primary="listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)"/>
               </ListItem>
+            </List>
+            <Typography>We’ve also made the website text as simple as possible to understand.</Typography>
+            <Typography sx={{paddingTop: '10px'}}><a href="https://mcmw.abilitynet.org.uk/" target="_blank"
+                                                     rel="noopener noreferrer">AbilityNet</a> has
+              advice on making your device easier to use if you have a disability.</Typography>
+          </Box>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2" id="how-accessible">How accessible this service is</Typography>
+            <Typography sx={{paddingTop: '10px'}}>We know some parts of this website are not fully
+              accessible:</Typography>
+            <List>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="There are custom elements that are not accessible to users of assistive technology. “Plus” and “dash” are announced to screen reader users as the controls, but there is no indication that these are selectable. This fails WCAG 2.1 success criteria (2.1.1 Keyboard, Level A), 4.1.2 (Name, Role, Value, Level A), 1.3.1 (Info and Relationships, Level A) and 2.1.3 (Keyboard - No Exception, Level AAA)."/>
+                <ListItemText primary="you cannot easily navigate content by tabbing through it on some pages"/>
               </ListItem>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="The Planning page has multiple accessibility problems affecting both keyboard-only and screen reader users, which fail WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 4.1.2 (Name, Role, Value, Level A)."/>
+                <ListItemText primary="some words in tables have been shortened"/>
               </ListItem>
               <ListItem>
                 <ListItemIcon sx={{minWidth: '20px'}}>
                   <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
                 </ListItemIcon>
-                <ListItemText
-                  primary="The ‘Close’ link is ambiguous for screen reader users browsing both in and out of context. This element is much more difficult to understand due to focus not being locked within the modal, so some users may feel that ‘Close’ relates to something different on the page. This fails WCAG 2.1 success criteria 2.4.4 (Link Purpose - in context, Level A) and 2.4.9 (Link Purpose - Link Only, Level AAA)."/>
+                <ListItemText primary="some elements are problematic for screen reader users"/>
               </ListItem>
             </List>
           </Box>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2" id="improve-accessibility">What we’re doing to improve accessibility</Typography>
-          <Typography sx={{paddingTop: '10px'}}>We plan to address the above areas of non-compliance with accessibility
-            regulations on this website by <strong>February 2025</strong>.
-          </Typography>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-          <Typography variant="h2">Preparation of this accessibility statement</Typography>
-          <Typography sx={{paddingTop: '10px'}}>This statement was prepared on 15 November 2021.</Typography>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2" id="feedback">Feedback and contact information</Typography>
+            <Typography sx={{paddingTop: '10px', paddingBottom: '10px',}}>The Dynamic Response Tool (DRT) team, which
+              works within Technology Delivery Centre, is responsible for the accessibility of this service. We’re
+              always
+              looking to improve the accessibility of
+              this website. If you find any problems not listed on this page or think we’re not meeting other
+              accessibility requirements, contact us:
+            </Typography>
+            <Button color="primary" variant="contained" size="large"
+                    style={{textTransform: 'none', fontSize: '16px'}}
+                    href={`mailto:${teamEmail}`} target="_blank"
+                    onClick={sendReportProblemGaEvent}>Email us to report a problem
+            </Button>
+          </Box>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2" id="enforcement">Enforcement procedure</Typography>
+            <Typography sx={{paddingTop: '10px'}}>The Equality and Human Rights Commission (EHRC) is responsible for
+              enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations
+              2018
+              (the ‘accessibility regulations’).
+              If you’re not happy with how we respond to your complaint, contact the <a
+                href="https://www.equalityadvisoryservice.com/" target="_blank" rel="noopener noreferrer">Equality
+                Advisory and Support Service (EASS)</a>.
+            </Typography>
+          </Box>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2" id="technical-info">Technical information about this website’s
+              accessibility</Typography>
+            <Typography sx={{paddingTop: '10px'}}>Border Force is committed to making its websites accessible, in
+              accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility
+              Regulations 2018.</Typography>
+            <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+              <Typography variant="h3" id="compliance-status">Compliance status</Typography>
+              <Typography sx={{paddingTop: '10px'}}>The website has been tested against the Web Content Accessibility
+                Guidelines (WCAG) 2.1 AA standard.</Typography>
+              <Typography sx={{paddingTop: '10px'}}>This website is partially compliant with the Web Content
+                Accessibility
+                Guidelines (WCAG) 2.1 AA standard <a href="https://www.w3.org/TR/WCAG21/" target="_blank"
+                                                     rel="noopener noreferrer">(https://www.w3.org/TR/WCAG21/)</a>. The
+                non-compliances are listed below.</Typography>
+            </Box>
+            <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+              <Typography variant="h3" id="non-compliant-content">Non-compliant content within the accessibility
+                regulations</Typography>
+              <List>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Landmarks are not used fully. On some pages there are no main headings, multiple h1s, incorrectly labelled sub-headings, empty table headers, missing captions, and no skip links which make it difficult for users to determine where the main content is. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 2.4.1 (Bypass Blocks, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Table header descriptions have been shortened, which may not be understandable for all users. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Table markup used is confusing for screen reader users. When browsing in context using table shortcuts, the relationship between the table and its contents is not clear. This fails WCAG 2.1 criteria 1.3.1 (Info and Relationships, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="There are unlabelled elements (form, select and text), which are problematic for screen reader users. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 4.1.2 (Name, Role, Value, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="There are radio buttons whose context is not clear and that are ambiguous for screen reader users browsing out of context as they have not been grouped together appropriately. This fails WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 3.2.2 (On Input, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Illogical focus order of radio buttons and select elements will affect keyboard-only users using the tab key to navigate. This fails WCAG 2.1 success criteria 3.2.2 (On Input, Level A) and 2.4.3 (Focus Order, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Screen reader users aren’t made aware of modals, and keyboard-only users will experience a loss of focus and must tab through content before gaining focus in a modal. This fails WCAG 2.1 success criteria 2.4.3 (Focus Order, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="There is no indication that several data export links present download CSV files. This fails WCAG 2.1 success criteria 2.4.4 (Link Purpose - in context, Level A) and 2.4.9 (Link Purpose - Link Only, Level AAA)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="There are custom elements that are not accessible to users of assistive technology. “Plus” and “dash” are announced to screen reader users as the controls, but there is no indication that these are selectable. This fails WCAG 2.1 success criteria (2.1.1 Keyboard, Level A), 4.1.2 (Name, Role, Value, Level A), 1.3.1 (Info and Relationships, Level A) and 2.1.3 (Keyboard - No Exception, Level AAA)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="The Planning page has multiple accessibility problems affecting both keyboard-only and screen reader users, which fail WCAG 2.1 success criteria 1.3.1 (Info and Relationships, Level A) and 4.1.2 (Name, Role, Value, Level A)."/>
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon sx={{minWidth: '20px'}}>
+                    <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="The ‘Close’ link is ambiguous for screen reader users browsing both in and out of context. This element is much more difficult to understand due to focus not being locked within the modal, so some users may feel that ‘Close’ relates to something different on the page. This fails WCAG 2.1 success criteria 2.4.4 (Link Purpose - in context, Level A) and 2.4.9 (Link Purpose - Link Only, Level AAA)."/>
+                </ListItem>
+              </List>
+            </Box>
+          </Box>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2" id="improve-accessibility">What we’re doing to improve accessibility</Typography>
+            <Typography sx={{paddingTop: '10px'}}>We plan to address the above areas of non-compliance with
+              accessibility
+              regulations on this website by <strong>February 2025</strong>.
+            </Typography>
+          </Box>
+          <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+            <Typography variant="h2">Preparation of this accessibility statement</Typography>
+            <Typography sx={{paddingTop: '10px'}}>This statement was prepared on 15 November 2021.</Typography>
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </ThemeProvider>
   );
 };
\ No newline at end of file
diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index f7fd1a4..5283218 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {AppBar, Link, Toolbar, Typography} from "@mui/material";
+import {AppBar, Link, ThemeProvider, Toolbar, Typography} from "@mui/material";
+import {drtTheme} from "../../index";
 
 export interface BottomBarProps {
   email: string;
@@ -9,23 +10,25 @@ export interface BottomBarProps {
 
 export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBarProps) => {
   return (
-    <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
-      <Toolbar sx={{
-        display: 'flex',
-        gap: '12px',
-        flexDirection: {xs: 'column', sm: 'row'},
-        alignItems: {xs: 'flex-start', sm: 'center'}
-      }}>
-        <Typography variant="body1">Support links:</Typography>
-        <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
-        <Link underline="always" href="#accessibility/" onClick={() => {
-          onClickAccessibilityStatement();
+    <ThemeProvider theme={drtTheme}>
+      <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
+        <Toolbar sx={{
+          display: 'flex',
+          gap: '12px',
+          flexDirection: {xs: 'column', sm: 'row'},
+          alignItems: {xs: 'flex-start', sm: 'center'}
         }}>
-          Accessibility statement
-        </Link>
-        <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>
-      </Toolbar>
-    </AppBar>
+          <Typography variant="body1">Support links:</Typography>
+          <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
+          <Link underline="always" href="#accessibility/" onClick={() => {
+            onClickAccessibilityStatement();
+          }}>
+            Accessibility statement
+          </Link>
+          <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>
+        </Toolbar>
+      </AppBar>
+    </ThemeProvider>
   );
 };
 

From 4b4c6172a422330df25882cfbdaae7f6883b293b Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Mon, 25 Nov 2024 10:14:20 +0000
Subject: [PATCH 7/7] remove the explicit theme provider for bottom bar

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Footer/BottomBar.tsx | 37 +++++++++++++----------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
index 5283218..f7fd1a4 100644
--- a/src/components/Footer/BottomBar.tsx
+++ b/src/components/Footer/BottomBar.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {AppBar, Link, ThemeProvider, Toolbar, Typography} from "@mui/material";
-import {drtTheme} from "../../index";
+import {AppBar, Link, Toolbar, Typography} from "@mui/material";
 
 export interface BottomBarProps {
   email: string;
@@ -10,25 +9,23 @@ export interface BottomBarProps {
 
 export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBarProps) => {
   return (
-    <ThemeProvider theme={drtTheme}>
-      <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
-        <Toolbar sx={{
-          display: 'flex',
-          gap: '12px',
-          flexDirection: {xs: 'column', sm: 'row'},
-          alignItems: {xs: 'flex-start', sm: 'center'}
+    <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
+      <Toolbar sx={{
+        display: 'flex',
+        gap: '12px',
+        flexDirection: {xs: 'column', sm: 'row'},
+        alignItems: {xs: 'flex-start', sm: 'center'}
+      }}>
+        <Typography variant="body1">Support links:</Typography>
+        <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
+        <Link underline="always" href="#accessibility/" onClick={() => {
+          onClickAccessibilityStatement();
         }}>
-          <Typography variant="body1">Support links:</Typography>
-          <Link href={`mailto:${email}`} target="_blank" underline="always">Email us</Link>
-          <Link underline="always" href="#accessibility/" onClick={() => {
-            onClickAccessibilityStatement();
-          }}>
-            Accessibility statement
-          </Link>
-          <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>
-        </Toolbar>
-      </AppBar>
-    </ThemeProvider>
+          Accessibility statement
+        </Link>
+        <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>
+      </Toolbar>
+    </AppBar>
   );
 };