robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility amends for reps

Browse Source
This commit is contained in:
robbond
2024-02-19 16:51:59 +00:00
parent 401dcbceac
commit d09782aa41
4 changed files with 202 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/index.js
+15 -428
View File
@@ -489,6 +489,8 @@ let MakeRepresentation = (props) => {
? router.query.state == "edit" ? router.query.state == "edit"
? props.props.myRepresentations.myRepresentations ? props.props.myRepresentations.myRepresentations
: props.props.searchResultsObj.searchDetailsObj : props.props.searchResultsObj.searchDetailsObj
: props.currentType == "watchedCases"
? props.props.watchedCases.watchedCasesDetails
: props.props.searchResultsObj.searchDetailsObj; : props.props.searchResultsObj.searchDetailsObj;
router.query.hasOwnProperty("state") && router.query.hasOwnProperty("state") &&
@@ -751,436 +753,21 @@ let MakeRepresentation = (props) => {
</div> </div>
</div> </div>
</div> </div>
{ {formObj.hasOwnProperty(
formObj.hasOwnProperty( "representationForm"
) &&
formObj[
"representationForm" "representationForm"
].hasOwnProperty("values") &&
formObj[
"representationForm"
].values.hasOwnProperty(
"representationType"
) && ) &&
formObj[ formObj["representationForm"].values
"representationForm" .representationType ==
].hasOwnProperty("values") && "Questionnaire" &&
formObj[ whichProgress()}
"representationForm"
].values.hasOwnProperty(
"representationType"
) &&
formObj["representationForm"]
.values
.representationType ==
"Questionnaire" &&
whichProgress()
// <nav
// role="navigation"
// aria-labelledby="progress-list"
// className="at-nav"
// >
// <div
// id="step-by-step-navigation"
// data-module="gemstepnav"
// className="app-step-nav app-step-nav--active"
// data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
// data-show-text="show"
// data-hide-text="hide"
// data-show-all-text="Show all"
// data-hide-all-text="Hide all"
// >
// <ol className="app-step-nav__steps">
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 1
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 1
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 1
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-one"
// )}
// aaa
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 2
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 2
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 2
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-two"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 3
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 3
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 3
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-three"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 4
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 4
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 4
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-four"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 5
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 5
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 5
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-five"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>{" "}
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 6
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 6
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 6
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:add-files-label"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// <li
// className={
// "app-step-nav__step js-step app-step-nav__step--active" +
// (showQuestionnaireSection >=
// 7
// ? " sectionComplete"
// : " sectionIncomplete")
// }
// aria-current="step"
// data-show=""
// id="check-youre-allowed-to-drive"
// >
// <div
// className="app-step-nav__header js-toggle-panel "
// data-position="1"
// >
// <h3 className="app-step-nav__title ">
// <span className="app-step-nav__circle app-step-nav__circle--number">
// <span className="app-step-nav__circle-inner">
// <span className="app-step-nav__circle-background">
// <span className="app-step-nav__circle-step-label govuk-visually-hidden">
// Step
// </span>{" "}
// 7
// <span
// className="app-step-nav__circle-step-colon govuk-visually-hidden"
// aria-hidden="true"
// >
// :
// </span>
// </span>
// </span>
// </span>
// <span className="js-step-title">
// <a
// href="#"
// onClick={() => {
// setShowQuestionnaireSection(
// 7
// );
// }}
// 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"
// >
// <span className="js-step-title-text govuk-!-font-size-16">
// {t(
// "myrepresentations:s78-section-heading-seven"
// )}
// </span>
// </a>
// </span>
// </h3>
// </div>
// </li>
// </ol>
// </div>
// </nav>
}
</div> </div>
</div> </div>
</> </>
components/case/representation/representationElements.js
+7 -12
View File
@@ -491,14 +491,11 @@ export const RenderPickList = ({
: "govuk-form-group " : "govuk-form-group "
} }
> >
<label className="govuk-label" htmlFor="sort"> <label className="govuk-label" htmlFor={datafieldname}>
{label} {label}
</label> </label>
{touched && error && ( {touched && error && (
<span <span id={name + "-error"} className="govuk-error-message">
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "} <span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg} {errorMsg}
</span> </span>
@@ -508,8 +505,8 @@ export const RenderPickList = ({
<select <select
{...input} {...input}
className="govuk-select " className="govuk-select "
id={name} id={datafieldname}
name={name} name={datafieldname}
> >
<option>Select...</option> <option>Select...</option>
{Object.keys(optionsArr).map((key, index) => { {Object.keys(optionsArr).map((key, index) => {
@@ -793,11 +790,9 @@ export function MultiLinefield(props) {
return ( return (
<div className="govuk-form-group"> <div className="govuk-form-group">
<h1 className="govuk-label-wrapper"> <label className="govuk-label" htmlFor={props.name}>
<label className="govuk-label" htmlFor={props.name}> {props.label}
{props.label} </label>
</label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
components/case/representation/representationProgress/representationProgress_enforcement.js
+100 -23
View File
@@ -38,11 +38,7 @@ const RepresentationProgress_enforcement = (props) => {
} = props; } = props;
return ( return (
<nav <nav role="navigation" aria-label="progress-list" className="at-nav">
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<div <div
id="step-by-step-navigation" id="step-by-step-navigation"
data-module="gemstepnav" data-module="gemstepnav"
@@ -63,7 +59,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-one")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -95,7 +93,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-one"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -116,7 +121,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-two")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -148,7 +155,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-two"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -169,7 +183,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-three")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -201,7 +217,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-three"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -222,7 +245,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-four")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -254,7 +279,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-four"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -275,7 +307,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-five")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -307,7 +341,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-five"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -328,7 +369,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-six")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -360,7 +403,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-six"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -381,7 +431,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-seven")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -413,7 +465,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-seven"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -434,7 +493,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:add-files-label")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -466,7 +527,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:add-files-label"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -487,7 +555,9 @@ const RepresentationProgress_enforcement = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:enf-section-heading-eight")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -519,7 +589,14 @@ const RepresentationProgress_enforcement = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:enf-section-heading-eight"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
components/case/representation/representationProgress/representationProgress_s78.js
+80 -21
View File
@@ -39,11 +39,7 @@ const RepresentationProgress_s78 = (props) => {
} = props; } = props;
return ( return (
<nav <nav role="navigation" aria-label="progress-list" className="at-nav">
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<div <div
id="step-by-step-navigation" id="step-by-step-navigation"
data-module="gemstepnav" data-module="gemstepnav"
@@ -64,7 +60,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-one")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -96,7 +94,14 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-one"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -117,7 +122,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-two")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -149,7 +156,14 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-two"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -170,7 +184,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-three")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -202,7 +218,14 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-three"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -223,7 +246,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-four")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -255,7 +280,14 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-four"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
@@ -276,7 +308,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-five")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -308,11 +342,18 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-five"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
"myrepresentations:s78-section-heading-five" "myrepresentations:s78-section-heading-three"
)} )}
</span> </span>
</a> </a>
@@ -329,7 +370,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-six")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -361,11 +404,18 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-six"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(
"myrepresentations:add-files-label" "myrepresentations:s78-section-heading-six"
)} )}
</span> </span>
</a> </a>
@@ -382,7 +432,9 @@ const RepresentationProgress_s78 = (props) => {
} }
aria-current="step" aria-current="step"
data-show="" data-show=""
id="check-youre-allowed-to-drive" id={t("myrepresentations:s78-section-heading-seven")
.replace(/\s+/g, "-")
.toLowerCase()}
> >
<div <div
className="app-step-nav__header js-toggle-panel " className="app-step-nav__header js-toggle-panel "
@@ -414,7 +466,14 @@ const RepresentationProgress_s78 = (props) => {
}} }}
className="app-step-nav__button app-step-nav__button--title js-step-title-button" className="app-step-nav__button app-step-nav__button--title js-step-title-button"
aria-expanded="false" aria-expanded="false"
aria-controls="step-panel-check-youre-allowed-to-drive-1" aria-controls={
"step-panel-" +
t(
"myrepresentations:s78-section-heading-seven"
)
.replace(/\s+/g, "-")
.toLowerCase()
}
> >
<span className="js-step-title-text govuk-!-font-size-16"> <span className="js-step-title-text govuk-!-font-size-16">
{t( {t(