Accessibility amends for new appeal

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>