From 114f57aa5d76ef5877582eb5eb78c898e221b290 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Mon, 19 Feb 2024 16:53:58 +0000
Subject: [PATCH] Accessibility amends for new appeal

---
 components/newappeal/aboutyou.js      | 25 +++++--------------------
 components/newappeal/buildprogress.js | 17 +++++++++++++----
 components/newappeal/createCase.js    |  8 ++++----
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/components/newappeal/aboutyou.js b/components/newappeal/aboutyou.js
index 09bb488e..d4a1d078 100644
--- a/components/newappeal/aboutyou.js
+++ b/components/newappeal/aboutyou.js
@@ -95,6 +95,7 @@ const RenderMultiline = ({
                     </span>
                 )}
                 <textarea
+                    id={id}
                     {...input}
                     rows={rows}
                     className={className}
@@ -124,17 +125,9 @@ const RenderYesNo = ({
                         : "govuk-form-group "
                 }
             >
-                <fieldset
-                    className="govuk-fieldset"
-                    aria-describedby={name + "-hint"}
-                >
+                <fieldset className="govuk-fieldset">
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading govuk-body-m"
-                            id={id + "_label"}
-                        >
-                            {label}
-                        </label>
+                        {label}
                     </legend>
                     {touched && error && (
                         <span
@@ -200,17 +193,9 @@ const RenderRadio = ({
                         : "govuk-form-group "
                 }
             >
-                <fieldset
-                    className="govuk-fieldset"
-                    aria-describedby={datafieldname + "-hint"}
-                >
+                <fieldset className="govuk-fieldset">
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading govuk-body-m"
-                            id={id + "_label"}
-                        >
-                            {label}
-                        </label>
+                        {label}
                     </legend>
                     {touched && error && (
                         <span
diff --git a/components/newappeal/buildprogress.js b/components/newappeal/buildprogress.js
index 5732b2d8..12d24eaa 100644
--- a/components/newappeal/buildprogress.js
+++ b/components/newappeal/buildprogress.js
@@ -37,7 +37,7 @@ const BuildProgress = (props) => {
         <>
             <nav
                 role="navigation"
-                aria-labelledby="progress-list"
+                aria-label="progress-list"
                 className="at-nav"
             >
                 <h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
@@ -71,7 +71,9 @@ const BuildProgress = (props) => {
                                 }
                                 aria-current="step"
                                 data-show=""
-                                id="check-youre-allowed-to-drive"
+                                id={FieldsTranslations(progObj[index].title)
+                                    .replace(/\s+/g, "-")
+                                    .toLowerCase()}
                             >
                                 <div
                                     className="app-step-nav__header js-toggle-panel "
@@ -105,12 +107,19 @@ const BuildProgress = (props) => {
                                                 }}
                                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                                 aria-expanded="false"
-                                                aria-controls="step-panel-check-youre-allowed-to-drive-1"
+                                                aria-controls={
+                                                    "step-panel-" +
+                                                    FieldsTranslations(
+                                                        progObj[index].title
+                                                    )
+                                                        .replace(/\s+/g, "-")
+                                                        .toLowerCase()
+                                                }
                                             >
                                                 <span className="js-step-title-text govuk-!-font-size-16">
                                                     {FieldsTranslations(
                                                         progObj[index].title
-                                                    )}
+                                                    )}{" "}
                                                 </span>
                                             </a>
                                         </span>
diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js
index 669ad80b..838f6fb9 100644
--- a/components/newappeal/createCase.js
+++ b/components/newappeal/createCase.js
@@ -67,12 +67,12 @@ let CreateCase = (props) => {
                     }
                 >
                     {" "}
-                    <label className="govuk-label" htmlFor="sort">
+                    <label className="govuk-label" htmlFor="lpatypes">
                         {label}
                     </label>
                     {touched && error && (
                         <span
-                            id="passport-issued-error"
+                            id={name + "-error"}
                             className="govuk-error-message"
                         >
                             <span className="govuk-visually-hidden">
@@ -136,12 +136,12 @@ let CreateCase = (props) => {
                             : "govuk-form-group "
                     }
                 >
-                    <label className="govuk-label" htmlFor="sort">
+                    <label className="govuk-label" htmlFor="appealTypes">
                         {label}
                     </label>
                     {touched && error && (
                         <span
-                            id="passport-issued-error"
+                            id={name + "-error"}
                             className="govuk-error-message"
                         >
                             <span className="govuk-visually-hidden">