Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drtii 1574 accessibility 1 #53

Merged
merged 5 commits into from
Nov 27, 2024
Merged

Drtii 1574 accessibility 1 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4361e5b
update parameter url
ngu04 Nov 26, 2024
7b73696
adding url for Accessibility Statement
ngu04 Nov 26, 2024
c74f5d7
remove title from bottom bar
ngu04 Nov 26, 2024
f76c166
remove quote in introduction
ngu04 Nov 26, 2024
e7a12f6
rename url to accessibilityStatementUrl
ngu04 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Accessibility/AccessibilityStatement.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: ""
Expand Down
14 changes: 8 additions & 6 deletions src/components/Accessibility/AccessibilityStatement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer/BottomBar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
};
11 changes: 5 additions & 6 deletions src/components/Footer/BottomBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand All @@ -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>
);
Expand Down