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

fix(a11y): Replace Collapse and Button with Accordion components in PlanningConstraints #2966

Merged
merged 3 commits into from
Apr 2, 2024
Merged

fix(a11y): Replace Collapse and Button with Accordion components in PlanningConstraints #2966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74593cc
feat: Replace collapse and button with accordion
DafyddLlyr Apr 2, 2024
5a6f3f9
chore: Refactor some styles to theme
DafyddLlyr Apr 2, 2024
11c24aa
fix: PR suggestions
DafyddLlyr Apr 2, 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
176 changes: 79 additions & 97 deletions editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import Box, { BoxProps } from "@mui/material/Box";
import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
Expand All @@ -13,7 +14,7 @@ import type {
Metadata,
} from "@opensystemslab/planx-core/types";
import groupBy from "lodash/groupBy";
import React, { ReactNode, useState } from "react";
import React, { ReactNode } from "react";
import ReactHtmlParser from "react-html-parser";
import Caret from "ui/icons/Caret";
import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
Expand All @@ -26,17 +27,22 @@ const CATEGORY_COLORS: Record<string, string> = {
Flooding: "#ECECEC",
};

interface StyledConstraintProps extends BoxProps {
const PREFIX = "ConstraintsList";

const classes = {
content: `${PREFIX}-content`
}

interface StyledAccordionProps extends BoxProps {
category: string;
}

const StyledConstraint = styled(Box, {
shouldForwardProp: (prop) => prop !== "category",
})<StyledConstraintProps>(({ theme, category }) => ({
const StyledAccordion = styled(Accordion, {
shouldForwardProp: (prop) => !["category", "metadata", "content", "data"].includes(prop as string),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verbose, but it resolves this issue -

image

})<StyledAccordionProps>(({ theme, category }) => ({
borderLeft: `5px solid ${CATEGORY_COLORS[category]}`,
paddingRight: 0,
width: "100%",
color: theme.palette.text.primary,
position: "relative",
"&::after": {
content: "''",
Expand All @@ -47,6 +53,9 @@ const StyledConstraint = styled(Box, {
height: "1px",
background: theme.palette.border.main,
},
[`&.${classes.content}`]: {
margin: [1.5, 0]
},
}));

interface ConstraintsListProps {
Expand Down Expand Up @@ -123,100 +132,73 @@ interface ConstraintListItemProps {
}

function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
const [showConstraintData, setShowConstraintData] = useState<boolean>(false);
const item = props.metadata?.name.replaceAll(" ", "-");

return (
<ListItem disablePadding sx={{ backgroundColor: "white" }}>
<StyledConstraint {...props}>
<Box
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
<StyledAccordion {...props} disableGutters>
<AccordionSummary
id={`${item}-header`}
aria-controls={`${item}-panel`}
classes={{ content: classes.content }}
expandIcon={<Caret />}
DafyddLlyr marked this conversation as resolved.
Show resolved Hide resolved
sx={{ pr: 1.5 }}
>
<Button
disableRipple
onClick={() =>
setShowConstraintData((showConstraintData) => !showConstraintData)
}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
boxShadow: "none",
color: "#0B0C0C",
fontWeight: "400",
padding: 15,
paddingLeft: 20,
}}
>
<Box>{children}</Box>
<Caret
expanded={showConstraintData}
color="primary"
titleAccess={
showConstraintData ? "Less Information" : "More Information"
}
/>
</Button>
</Box>
<Collapse in={showConstraintData}>
<Box py={1.5} px={2}>
<>
<Typography variant="h3" component="h4" gutterBottom>
{`This property ${props?.content}`}
</Typography>
{Boolean(props.data?.length) && (
<List
dense
disablePadding
sx={{ listStyleType: "disc", pl: 4, pt: 1 }}
>
{props.data &&
props.data.map(
(record: any) =>
record.name && (
<ListItem
key={record.entity}
dense
disableGutters
sx={{ display: "list-item" }}
>
<Typography variant="body2">
{record.name}{" "}
{record.name && record["documentation-url"] && (
<span>
(
<Link
href={record["documentation-url"]}
target="_blank"
>
source
</Link>
)
</span>
)}
</Typography>
</ListItem>
),
)}
</List>
)}
</>
<Typography variant="body2">
<ReactMarkdownOrHtml
source={props.metadata?.text?.replaceAll(
"(/",
"(https://www.planning.data.gov.uk/",
)}
openLinksOnNewTab
/>
<Typography variant="body2" pr={1.5}>{children}</Typography>
</AccordionSummary>
<AccordionDetails sx={{ px: 1.5, py: 2 }}>
<>
<Typography variant="h3" component="h4" gutterBottom>
{`This property ${props?.content}`}
</Typography>
</Box>
</Collapse>
</StyledConstraint>
{Boolean(props.data?.length) && (
<List
dense
disablePadding
sx={{ listStyleType: "disc", pl: 4, pt: 1 }}
>
{props.data &&
props.data.map(
(record: any) =>
record.name && (
<ListItem
key={record.entity}
dense
disableGutters
sx={{ display: "list-item" }}
>
<Typography variant="body2">
{record.name}{" "}
{record.name && record["documentation-url"] && (
<span>
(
<Link
href={record["documentation-url"]}
target="_blank"
>
source
</Link>
)
</span>
)}
</Typography>
</ListItem>
),
)}
</List>
)}
</>
<Typography variant="body2">
<ReactMarkdownOrHtml
source={props.metadata?.text?.replaceAll(
"(/",
"(https://www.planning.data.gov.uk/",
)}
openLinksOnNewTab
/>
</Typography>
</AccordionDetails>
</StyledAccordion>
</ListItem>
);
}
6 changes: 2 additions & 4 deletions editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,10 @@ const ResultReason: React.FC<IResultReason> = ({
const hasMoreInfo = question.data.info ?? question.data.policyRef;
const toggleAdditionalInfo = () => setExpanded(!expanded);

const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${
hasMoreInfo
const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${hasMoreInfo
? "Click to expand for more information about this question."
: ""
}`;
}`;

const { trackBackwardsNavigation } = useAnalyticsTracking();

Expand All @@ -155,7 +154,6 @@ const ResultReason: React.FC<IResultReason> = ({
onChange={() => hasMoreInfo && toggleAdditionalInfo()}
expanded={expanded}
elevation={0}
square
>
<Box sx={{ position: "relative" }}>
<StyledAccordionSummary
Expand Down
23 changes: 22 additions & 1 deletion editor.planx.uk/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,27 @@ const getThemeOptions = ({
},
},
components: {
MuiAccordion: {
styleOverrides: {
root: {
color: palette.text.primary,
backgroundColor: palette.background.default,
fontSize: "1rem",
},
},
defaultProps: {
square: true,
},
},
MuiAccordionSummary: {
styleOverrides: {
root: {
"&:hover": {
backgroundColor: palette.background.paper,
},
},
},
},
MuiContainer: {
styleOverrides: {
root: {
Expand Down Expand Up @@ -463,7 +484,7 @@ const generateTeamTheme = (
linkColour: DEFAULT_PRIMARY_COLOR,
logo: null,
favicon: null,
},
}
): MUITheme => {
const themeOptions = getThemeOptions(teamTheme);
const theme = responsiveFontSizes(createTheme(themeOptions), { factor: 3 });
Expand Down
Loading