fix(a11y): Input grouping, fieldset and legend (#2976)

theopensystemslab · Apr 4, 2024 · 9f555d4 · 9f555d4
1 parent 5f0c122
commit 9f555d4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public.tsx
@@ -1,11 +1,13 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import { visuallyHidden } from "@mui/utils";
 import type { Checklist, Group } from "@planx/components/Checklist/model";
 import ImageButton from "@planx/components/shared/Buttons/ImageButton";
 import Card from "@planx/components/shared/Preview/Card";
 import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
 import { getIn, useFormik } from "formik";
 import React, { useState } from "react";
+import InputLegend from "ui/editor/InputLegend";
 import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
 import FormWrapper from "ui/public/FormWrapper";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
@@ -140,7 +142,13 @@ const ChecklistComponent: React.FC<Props> = ({
       />
       <FullWidthWrapper>
         <ErrorWrapper error={getIn(formik.errors, "checked")} id={id}>
-          <Grid container spacing={layout === ChecklistLayout.Images ? 2 : 0}>
+          <Grid
+            container
+            spacing={layout === ChecklistLayout.Images ? 2 : 0}
+            component="fieldset"
+            sx={{ border: "none", padding: 0 }}
+          >
+            <legend style={visuallyHidden}>{text}</legend>
             {options ? (
               options.map((option) =>
                 layout === ChecklistLayout.Basic ? (

diff --git a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
@@ -92,8 +92,9 @@ const Question: React.FC<IQuestion> = (props) => {
         img={props.img}
       />
       <FullWidthWrapper>
-        <FormControl sx={{ width: "100%" }}>
+        <FormControl sx={{ width: "100%" }} component="fieldset">
           <FormLabel
+            component="legend"
             style={visuallyHidden}
             id={`radio-buttons-group-label-${props.id}`}
           >

diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx
@@ -67,8 +67,12 @@ const MoreInfoFeedbackComponent: React.FC = () => {
   function FeedbackYesNo(): FCReturn {
     return (
       <MoreInfoFeedback>
-        <Container maxWidth={false}>
-          <Typography variant="h4" component="h3" gutterBottom>
+        <Container
+          maxWidth={false}
+          component="fieldset"
+          sx={{ border: "none" }}
+        >
+          <Typography variant="h4" component="legend" gutterBottom>
             Did this help to answer your question?
           </Typography>
           <Box>