ECL-252: Fix accessibility report issues (#72)

* Fix all accesibility issues - move the `h1` (header) and `p` (paragraph) elements to the above and outside of the form element * Add labels styled as hidden headings With the intent to pass the accessibility tests, we agreed upon adding the `label` element with the same text content as the heading. We are also styling it as hidden (so to put it out of sight) * Tweak empty select item This commit attempts a workaround for the issue filed at hmrc/play-frontend-hmrc#223 Resolves: ECL-252 --------- Co-authored-by: peter-hazell <18005888+peter-hazell@users.noreply.github.com>
hmrc · Feb 21, 2023 · 30887d1 · 30887d1
1 parent 4dcc999
commit 30887d1
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 29 deletions.
diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/models/AmlSupervisorType.scala b/app/uk/gov/hmrc/economiccrimelevyregistration/models/AmlSupervisorType.scala
@@ -53,7 +53,7 @@ object AmlSupervisorType {
   ): Seq[RadioItem] = {
     val amlProfessionalBodySupervisorOptions: Seq[SelectItem] =
       SelectItem(
-        text = ""
+        text = "&nbsp;"
       ) +: appConfig.amlProfessionalBodySupervisors.map { opb =>
         SelectItem(
           value = Some(opb),

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/viewmodels/govuk/FieldsetFluency.scala b/app/uk/gov/hmrc/economiccrimelevyregistration/viewmodels/govuk/FieldsetFluency.scala
@@ -64,5 +64,8 @@ trait FieldsetFluency {
 
     def withCssClass(newClass: String): Legend =
       legend.copy(classes = s"${legend.classes} $newClass")
+
+    def asHiddenPageHeading(size: LegendSize = LegendSize.ExtraLarge): Legend =
+      asPageHeading(size).withCssClass("govuk-visually-hidden")
   }
 }
diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/viewmodels/govuk/LabelFluency.scala b/app/uk/gov/hmrc/economiccrimelevyregistration/viewmodels/govuk/LabelFluency.scala
@@ -45,5 +45,8 @@ trait LabelFluency {
 
     def forAttr(attr: String): Label =
       label.copy(forAttr = Some(attr))
+
+    def asHiddenPageHeading(size: LabelSize = LabelSize.ExtraLarge): Label =
+      asPageHeading(size).withCssClass("govuk-visually-hidden")
   }
 }
diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/AmlSupervisorView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/AmlSupervisorView.scala.html
@@ -15,6 +15,7 @@
  *@
 
 @import uk.gov.hmrc.economiccrimelevyregistration.config.AppConfig
+@import uk.gov.hmrc.economiccrimelevyregistration.viewmodels.LegendSize
 
 @this(
         layout: templates.Layout,
@@ -29,15 +30,16 @@
 @(form: Form[AmlSupervisor], mode: Mode)(implicit request: Request[_], messages: Messages)
 
 @legendHtml = {
-    <h1 class="govuk-heading-l">@messages("amlSupervisor.heading")</h1>
-    <p class="govuk-body">@messages("amlSupervisor.p1")</p>
-    <p class="govuk-body">@messages("amlSupervisor.p2")</p>
 }
 
 @layout(
     pageTitle = titleWithForm(form, messages("amlSupervisor.title")),
     autoCompleteEnabled = true
 ) {
+    <h1 class="govuk-heading-l">@messages("amlSupervisor.heading")</h1>
+    <p class="govuk-body">@messages("amlSupervisor.p1")</p>
+    <p class="govuk-body">@messages("amlSupervisor.p2")</p>
+
     @formHelper(action = AmlSupervisorController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @errorSummary(ErrorSummaryViewModel(form, errorLinkOverrides = Map("value" -> "value_0", "otherProfessionalBody" -> "otherProfessionalBody")))
@@ -46,7 +48,7 @@ <h1 class="govuk-heading-l">@messages("amlSupervisor.heading")</h1>
         @radios(
             RadiosViewModel(
                 field = form("value"),
-                legend = LegendViewModel(HtmlContent(legendHtml)),
+                legend = LegendViewModel(Text(messages("amlSupervisor.heading"))).asHiddenPageHeading(),
                 items = AmlSupervisorType.options(appConfig, select, form)
             )
         )

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactNameView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactNameView.scala.html
@@ -26,13 +26,11 @@
 
 @(form: Form[String], mode: Mode)(implicit request: Request[_], messages: Messages)
 
-    @labelHtml = {
+    @layout(pageTitle = titleWithForm(form, messages("firstContactName.title"))) {
         <h1 class="govuk-heading-l">@messages("firstContactName.heading")</h1>
         <p class="govuk-body">@messages("firstContactName.legend.p1")</p>
         <p class="govuk-body">@messages("firstContactName.legend.p2")</p>
-    }
 
-    @layout(pageTitle = titleWithForm(form, messages("firstContactName.title"))) {
         @formHelper(action = FirstContactNameController.onSubmit(mode)) {
             @if(form.errors.nonEmpty) {
                 @govukErrorSummary(ErrorSummaryViewModel(form))
@@ -41,7 +39,7 @@ <h1 class="govuk-heading-l">@messages("firstContactName.heading")</h1>
             @govukInput(
                 InputViewModel(
                     field = form("value"),
-                    label = LabelViewModel(HtmlContent(labelHtml))
+                    label = LabelViewModel(Text(messages("firstContactName.heading"))).asHiddenPageHeading()
                 ).withWidth(Fixed20).withHint(Hint(content = Text(messages("firstContactName.hint"))))
             )
 

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactNumberView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactNumberView.scala.html
@@ -27,12 +27,10 @@
 
 @(form: Form[String], name: String, mode: Mode)(implicit request: Request[_], messages: Messages)
 
-@labelHtml = {
+@layout(pageTitle = titleWithForm(form, messages("firstContactNumber.title", name))) {
     <h1 class="govuk-heading-l">@HtmlFormat.escape(messages("firstContactNumber.heading", name))</h1>
     <p class="govuk-body">@messages("firstContactNumber.legend")</p>
-}
 
-@layout(pageTitle = titleWithForm(form, messages("firstContactNumber.title", name))) {
     @formHelper(action = FirstContactNumberController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @govukErrorSummary(ErrorSummaryViewModel(form))
@@ -41,7 +39,7 @@ <h1 class="govuk-heading-l">@HtmlFormat.escape(messages("firstContactNumber.head
         @govukInput(
             InputViewModel(
                 field = form("value"),
-                label = LabelViewModel(HtmlContent(labelHtml))
+                label = LabelViewModel(Text(messages("firstContactNumber.heading"))).asHiddenPageHeading()
             ).withWidth(Fixed20)
         )
 

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactRoleView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/FirstContactRoleView.scala.html
@@ -27,12 +27,11 @@
 
 @(form: Form[String], name: String, mode: Mode)(implicit request: Request[_], messages: Messages)
 
-@labelHtml = {
+@layout(pageTitle = titleWithForm(form, messages("firstContactRole.title", name))) {
+
     <h1 class="govuk-heading-l">@HtmlFormat.escape(messages("firstContactRole.heading", name))</h1>
     <p class="govuk-body">@messages("firstContactRole.legend")</p>
-}
 
-@layout(pageTitle = titleWithForm(form, messages("firstContactRole.title", name))) {
     @formHelper(action = FirstContactRoleController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @govukErrorSummary(ErrorSummaryViewModel(form))
@@ -41,7 +40,7 @@ <h1 class="govuk-heading-l">@HtmlFormat.escape(messages("firstContactRole.headin
         @govukInput(
             InputViewModel(
                 field = form("value"),
-                label = LabelViewModel(HtmlContent(labelHtml))
+                label = LabelViewModel(Text("firstContactRole.heading")).asHiddenPageHeading()
             ).withWidth(Fixed20).withHint(Hint(content = Text(messages("firstContactRole.hint"))))
         )
 

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/RelevantAp12MonthsView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/RelevantAp12MonthsView.scala.html
@@ -24,13 +24,12 @@
 
 @(form: Form[Boolean], mode: Mode)(implicit request: Request[_], messages: Messages)
 
-@legendHtml = {
+@layout(pageTitle = titleWithForm(form, messages("relevantAp12Months.title"))) {
+
     <h1 class="govuk-heading-l">@messages("relevantAp12Months.heading")</h1>
     <p class="govuk-body">@messages("relevantAp12Months.p1")</p>
     <p class="govuk-body">@messages("relevantAp12Months.p2")</p>
-}
 
-@layout(pageTitle = titleWithForm(form, messages("relevantAp12Months.title"))) {
     @formHelper(action = RelevantAp12MonthsController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @errorSummary(ErrorSummaryViewModel(form, errorLinkOverrides = Map("value" -> "yes")))
@@ -39,7 +38,7 @@ <h1 class="govuk-heading-l">@messages("relevantAp12Months.heading")</h1>
         @radios(
             RadiosViewModel(
                 field = form("value"),
-                legend = LegendViewModel(HtmlContent(legendHtml)),
+                legend = LegendViewModel(Text("relevantAp12Months.heading")).asHiddenPageHeading(),
                 items = Seq(
                     RadioItem(
                         id = Some("yes"),

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/RelevantApLengthView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/RelevantApLengthView.scala.html
@@ -26,13 +26,11 @@
 
 @(form: Form[Int], mode: Mode)(implicit request: Request[_], messages: Messages)
 
-@labelHtml = {
+@layout(pageTitle = titleWithForm(form, messages("relevantApLength.title"))) {
     <h1 class="govuk-heading-l">@messages("relevantApLength.heading")</h1>
     <p class="govuk-body">@messages("relevantApLength.p1")</p>
     <p class="govuk-body">@messages("relevantApLength.p2")</p>
-}
 
-@layout(pageTitle = titleWithForm(form, messages("relevantApLength.title"))) {
     @formHelper(action = RelevantApLengthController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @govukErrorSummary(ErrorSummaryViewModel(form))
@@ -41,7 +39,7 @@ <h1 class="govuk-heading-l">@messages("relevantApLength.heading")</h1>
         @govukInput(
             InputViewModel(
                 field = form("value"),
-                label = LabelViewModel(HtmlContent(labelHtml)).asPageHeading()
+                label = LabelViewModel(Text(messages("relevantApLength.heading"))).asHiddenPageHeading()
             )
                     .asNumeric()
                     .withWidth(Fixed5)

diff --git a/app/uk/gov/hmrc/economiccrimelevyregistration/views/UkRevenueView.scala.html b/app/uk/gov/hmrc/economiccrimelevyregistration/views/UkRevenueView.scala.html
@@ -26,16 +26,16 @@
 
 @(form: Form[Long], mode: Mode)(implicit request: Request[_], messages: Messages)
 
-@labelHtml = {
+
+@layout(pageTitle = titleWithForm(form, messages("ukRevenue.title"))) {
+
     <h1 class="govuk-heading-l">@messages("ukRevenue.heading")</h1>
     <p class="govuk-body">@messages("ukRevenue.p1")</p>
     <ul class="govuk-list govuk-list--bullet">
         <li>@messages("ukRevenue.b1")</li>
         <li>@messages("ukRevenue.b2")</li>
     </ul>
-}
 
-@layout(pageTitle = titleWithForm(form, messages("ukRevenue.title"))) {
     @formHelper(action = UkRevenueController.onSubmit(mode)) {
         @if(form.errors.nonEmpty) {
             @govukErrorSummary(ErrorSummaryViewModel(form))
@@ -44,7 +44,7 @@ <h1 class="govuk-heading-l">@messages("ukRevenue.heading")</h1>
         @govukInput(
             InputViewModel(
                 field = form("value"),
-                label = LabelViewModel(HtmlContent(labelHtml)).asPageHeading(),
+                label = LabelViewModel(Text("ukRevenue.heading")).asHiddenPageHeading(),
                 prefix = Some(PrefixOrSuffix(content = "£"))
             )
                     .asNumeric()