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/representationProgress/representationProgress_enforcement.js
+100 -23
View File
@@ -38,11 +38,7 @@ const RepresentationProgress_enforcement = (props) => {
} = props;
return (
<nav
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<nav role="navigation" aria-label="progress-list" className="at-nav">
<div
id="step-by-step-navigation"
data-module="gemstepnav"
@@ -63,7 +59,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-one")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -116,7 +121,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-two")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -169,7 +183,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-three")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -222,7 +245,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-four")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -275,7 +307,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-five")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -328,7 +369,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-six")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -381,7 +431,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-seven")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -434,7 +493,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:add-files-label")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -487,7 +555,9 @@ const RepresentationProgress_enforcement = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:enf-section-heading-eight")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
components/case/representation/representationProgress/representationProgress_s78.js
+80 -21
View File
@@ -39,11 +39,7 @@ const RepresentationProgress_s78 = (props) => {
} = props;
return (
<nav
role="navigation"
aria-labelledby="progress-list"
className="at-nav"
>
<nav role="navigation" aria-label="progress-list" className="at-nav">
<div
id="step-by-step-navigation"
data-module="gemstepnav"
@@ -64,7 +60,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-one")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -117,7 +122,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-two")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -170,7 +184,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-three")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -223,7 +246,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-four")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
@@ -276,7 +308,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-five")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
"myrepresentations:s78-section-heading-five"
"myrepresentations:s78-section-heading-three"
)}
</span>
</a>
@@ -329,7 +370,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-six")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(
"myrepresentations:add-files-label"
"myrepresentations:s78-section-heading-six"
)}
</span>
</a>
@@ -382,7 +432,9 @@ const RepresentationProgress_s78 = (props) => {
}
aria-current="step"
data-show=""
id="check-youre-allowed-to-drive"
id={t("myrepresentations:s78-section-heading-seven")
.replace(/\s+/g, "-")
.toLowerCase()}
>
<div
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"
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">
{t(