Drtii 1574 accessibility 1 (#53)

* update parameter url Signed-off-by: Nilesh Gupta <[email protected]> * adding url for Accessibility Statement Signed-off-by: Nilesh Gupta <[email protected]> * remove title from bottom bar Signed-off-by: Nilesh Gupta <[email protected]> * remove quote in introduction Signed-off-by: Nilesh Gupta <[email protected]> * rename url to accessibilityStatementUrl Signed-off-by: Nilesh Gupta <[email protected]> --------- Signed-off-by: Nilesh Gupta <[email protected]>
UKHomeOffice · Nov 27, 2024 · 68ad37d · 68ad37d
1 parent 928d6d6
commit 68ad37d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/components/Accessibility/AccessibilityStatement.stories.tsx b/src/components/Accessibility/AccessibilityStatement.stories.tsx
@@ -11,6 +11,7 @@ type Story = StoryObj<typeof AccessibilityStatementComponent>;
 
 export const AccessibilityStatement: Story = {
   args: {
+    accessibilityStatementUrl: '#accessibility',
     teamEmail: '[email protected]',
     sendReportProblemGaEvent: () => console.log('Email us to report a problem'),
     scrollSection: ""

diff --git a/src/components/Accessibility/AccessibilityStatement.tsx b/src/components/Accessibility/AccessibilityStatement.tsx
@@ -4,12 +4,14 @@ import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import {drtTheme} from "../../index";
 
 export interface IAccessibilityStatementProps {
+  accessibilityStatementUrl: string
   teamEmail: string;
   sendReportProblemGaEvent: () => void;
   scrollSection: string;
 }
 
 export const AccessibilityStatement = ({
+                                         accessibilityStatementUrl,
                                          teamEmail,
                                          sendReportProblemGaEvent,
                                          scrollSection
@@ -36,37 +38,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="#accessibility/introduction" sx={{textDecoration: 'underline'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/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'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/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'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/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'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/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'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/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'}}>
+            <ListItem component={Link} href={`${accessibilityStatementUrl}/improve-accessibility`} sx={{textDecoration: 'underline'}}>
               <ListItemIcon sx={{minWidth: '20px'}}>
                 <FiberManualRecordIcon fontSize="inherit" sx={{fontSize: '10px'}}/>
               </ListItemIcon>

diff --git a/src/components/Footer/BottomBar.stories.tsx b/src/components/Footer/BottomBar.stories.tsx
@@ -11,9 +11,9 @@ type Story = StoryObj<typeof BottomBarComponent>;
 
 export const BottomBar: Story = {
   args: {
-    title: 'Accessibility Statement',
     email: '[email protected]',
     onClickAccessibilityStatement: () => console.log('Click Accessibility'),
-    url: 'http://localhost:6006'
+    accessibilityStatementUrl: '/#accessibility',
+    feedbackUrl: 'http://localhost:6006'
   }
 };
diff --git a/src/components/Footer/BottomBar.tsx b/src/components/Footer/BottomBar.tsx
@@ -4,10 +4,11 @@ import {AppBar, Link, Toolbar, Typography} from "@mui/material";
 export interface BottomBarProps {
   email: string;
   onClickAccessibilityStatement: () => void;
-  url: string;
+  accessibilityStatementUrl: string;
+  feedbackUrl: string;
 }
 
-export const BottomBar = ({email, onClickAccessibilityStatement, url}: BottomBarProps) => {
+export const BottomBar = ({email, onClickAccessibilityStatement, accessibilityStatementUrl ,feedbackUrl}: BottomBarProps) => {
   return (
     <AppBar position="static" color="default" sx={{top: 'auto', bottom: 0}}>
       <Toolbar sx={{
@@ -18,12 +19,10 @@ 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={() => {
-          onClickAccessibilityStatement();
-        }}>
+        <Link underline="always" href={accessibilityStatementUrl} onClick={onClickAccessibilityStatement}>
           Accessibility statement
         </Link>
-        <Link href={`${url}`} target="_blank" underline="always">Give feedback</Link>
+        <Link href={`${feedbackUrl}`} target="_blank" underline="always">Give feedback</Link>
       </Toolbar>
     </AppBar>
   );