Repository: hmrc/income-tax-view-change-frontend
Pull request #2850: MISUV-9599:  Frontend changes for "What is your business name" page
Author: login: IoannisLazaridis-oc
Created: 2025-04-16T08:17:33Z | Merged: 2025-04-23T14:01:23Z



Diff:
diff --git a/app/views/manageBusinesses/add/AddBusinessName.scala.html b/app/views/manageBusinesses/add/AddBusinessName.scala.html
index c0c0c9fcfc..8d5a986e41 100644
--- a/app/views/manageBusinesses/add/AddBusinessName.scala.html
+++ b/app/views/manageBusinesses/add/AddBusinessName.scala.html
@@ -53,17 +53,8 @@
     businessNameForm("business-name")
 }
 
-@hintContent = {
-    @p(classes="govuk-hint"){
-        @messages("add-business-name.p1")
-    }
-    @p(classes="govuk-hint"){
-        @messages("add-business-name.p2", "'")
-    }
-}
-
 @mainTemplate(
-pageTitle = messages("add-business-name.heading"),
+pageTitle = messages("add-business-name.heading1"),
 form = Some(businessNameForm),
 isAgent = isAgent,
 backUrl = Some(backUrl),
@@ -77,19 +68,28 @@
 
         <span class="govuk-caption-l">@messages("incomeSources.add.sole-trader")</span>
 
+        @h1(messages("add-business-name.heading1"))
+
+        @p(classes="govuk-body") {
+            @messages("add-business-name.p1")
+        }
+
+        @h2(messages("add-business-name.heading2"))
+
+        @p(classes="govuk-body") {
+            @messages("add-business-name.p2", "'")
+        }
+
         @govukInput(
             Input(
                 id = businessName,
                 name = businessName,
                 classes = "govuk-!-width-three-quarters",
-                    label = Label(
-                        isPageHeading = true,
-                        classes = "govuk-label--l",
-                        content = Text(messages("add-business-name.heading"))
-                    ),
-                    hint = Some(Hint(content = HtmlContent(
-                        hintContent
-                    )))
+                label = Label(
+                    isPageHeading = false,
+                    classes = "govuk-visually-hidden",
+                    content = Text(messages("add-business-name.heading1"))
+                )
             ).withFormField(field)
         )
 
diff --git a/conf/messages b/conf/messages
index 3cfeaac1f6..e3f08efd3a 100644
--- a/conf/messages
+++ b/conf/messages
@@ -1649,7 +1649,8 @@ incomeSources.ceaseUKProperty.checkDetails.confirm               = Confirm and c
 incomeSources.ceaseUKProperty.checkDetails.change                = Change
 
 # add Business page
-add-business-name.heading                                         = What is the name of your business?
+add-business-name.heading1                                        = Business name
+add-business-name.heading2                                        = What is your business name?
 add-business-name.p1                                              = This is the business name you used to register for Self Assessment. If your sole trader business does not have a separate name, enter your own first and last name.
 add-business-name.p2                                              = The business name you enter can only include upper or lower case letters, full stops, commas, digits, &, {0}, \, /, -.
 add-business-name.form.error.required                             = Enter your name or the name of your business
diff --git a/conf/messages.cy b/conf/messages.cy
index 2453ed3b1f..9a1ea4140a 100644
--- a/conf/messages.cy
+++ b/conf/messages.cy
@@ -1647,7 +1647,8 @@ incomeSources.ceaseUKProperty.checkDetails.confirm               = Cadarnhau ac
 incomeSources.ceaseUKProperty.checkDetails.change                = Newid
 
 # add Business page
-add-business-name.heading                                         = Beth yw enw’ch busnes?
+add-business-name.heading1                                        = Enw’r busnes
+add-business-name.heading2                                        = Beth yw enw’ch busnes?
 add-business-name.p1                                              = Dyma enw’r busnes a ddefnyddioch i gofrestru ar gyfer Hunanasesiad. Os nad oes enw gwahanol ar eich busnes unig fasnachwr, nodwch eich enw cyntaf ac enw olaf.
 add-business-name.p2                                              = Gall enw’r busnes rydych yn ei nodi gynnwys llythrennau mawr neu fach, atalnodau llawn, comas, digidau, &, {0}, \, /, - yn unig.
 add-business-name.form.error.required                             = Nodwch eich enw neu enw’ch busnes
diff --git a/it/test/controllers/manageBusinesses/add/AddBusinessNameControllerISpec.scala b/it/test/controllers/manageBusinesses/add/AddBusinessNameControllerISpec.scala
index 65b6f6d401..287afd2f47 100644
--- a/it/test/controllers/manageBusinesses/add/AddBusinessNameControllerISpec.scala
+++ b/it/test/controllers/manageBusinesses/add/AddBusinessNameControllerISpec.scala
@@ -80,8 +80,7 @@ class AddBusinessNameControllerISpec extends ControllerISpecHelper {
 
               result should have(
                 httpStatus(OK),
-                pageTitle(mtdUserRole, "add-business-name.heading"),
-                elementTextByID("business-name-hint > p")(formHint),
+                pageTitle(mtdUserRole, "add-business-name.heading1"),
                 elementTextByID("continue-button")(continueButtonText)
               )
             }
@@ -123,8 +122,7 @@ class AddBusinessNameControllerISpec extends ControllerISpecHelper {
 
               result should have(
                 httpStatus(OK),
-                pageTitle(mtdUserRole, "add-business-name.heading"),
-                elementTextByID("business-name-hint > p")(formHint),
+                pageTitle(mtdUserRole, "add-business-name.heading1"),
                 elementTextByID("continue-button")(continueButtonText)
               )
             }
diff --git a/test/controllers/manageBusinesses/add/AddBusinessNameControllerSpec.scala b/test/controllers/manageBusinesses/add/AddBusinessNameControllerSpec.scala
index 1381ed85bc..74caf70aa8 100644
--- a/test/controllers/manageBusinesses/add/AddBusinessNameControllerSpec.scala
+++ b/test/controllers/manageBusinesses/add/AddBusinessNameControllerSpec.scala
@@ -53,7 +53,7 @@ class AddBusinessNameControllerSpec extends MockAuthActions
   val journeyType: IncomeSourceJourneyType = IncomeSourceJourneyType(Add, SelfEmployment)
 
   def getValidationErrorTabTitle(): String = {
-    s"${messages("htmlTitle.invalidInput", messages("add-business-name.heading"))}"
+    s"${messages("htmlTitle.invalidInput", messages("add-business-name.heading1"))}"
   }
 
   def getAction(mtdRole: MTDUserRole, isChange: Boolean, isPost: Boolean = false) = mtdRole match {
diff --git a/test/views/manageBusinesses/add/AddBusinessNameViewSpec.scala b/test/views/manageBusinesses/add/AddBusinessNameViewSpec.scala
index b13b2433f2..6d492fb8e8 100644
--- a/test/views/manageBusinesses/add/AddBusinessNameViewSpec.scala
+++ b/test/views/manageBusinesses/add/AddBusinessNameViewSpec.scala
@@ -113,7 +113,8 @@ class AddBusinessNameViewSpec extends ViewSpec {
   }
 
   object AddBusinessNameMessages {
-    val heading: String = messages("add-business-name.heading")
+    val heading1: String = messages("add-business-name.heading1")
+    val heading2: String = messages("add-business-name.heading2")
     val paragraph1: String = messages("add-business-name.p1")
     val paragraph2: String = messages("add-business-name.p2")
     val errorBusinessNameEmpty: String = messages("add-business-name.form.error.required")
@@ -125,29 +126,25 @@ class AddBusinessNameViewSpec extends ViewSpec {
 
   "AddBusinessNameView - ADD - Individual" when {
     "there is no error on the add page" should {
-      "have the correct heading" in new TestSetup(false, false, false) {
+      "have the correct title heading" in new TestSetup(false, false, false) {
         document.getElementsByClass("govuk-caption-l").text() shouldBe messages("incomeSources.add.sole-trader")
-        document hasPageHeading AddBusinessNameMessages.heading
+        document hasPageHeading AddBusinessNameMessages.heading1
       }
       "have a form with the correct attributes" in new TestSetup(false, false, false) {
         document.hasFormWith(testCall.method, postAction.url)
       }
-      "have an input with associated hint and label" in new TestSetup(false, false, false) {
-        val form: Element = document.selectHead("form")
-        val label: Element = form.selectHead("label")
-        val hint: Element = document.selectHead(".govuk-hint")
+      "render the question heading, paragraph text, and input field" in new TestSetup(false, false, false) {
+        val heading2: Element = document.selectFirst("h2.govuk-heading-m")
+        heading2.text shouldBe messages("add-business-name.heading2")
 
-        val input: Element = form.selectHead("input")
+        val paragraph1: Element = document.selectFirst("p.govuk-body")
+        paragraph1.text shouldBe AddBusinessNameMessages.paragraph1
 
-        label.text shouldBe AddBusinessNameMessages.heading
-        label.attr("for") shouldBe input.attr("id")
-        hint.text contains AddBusinessNameMessages.paragraph1
+        val form: Element = document.selectHead("form")
+        val input: Element = form.selectHead("input")
         input.attr("id") shouldBe BusinessNameForm.businessName
         input.attr("name") shouldBe BusinessNameForm.businessName
         input.attr("type") shouldBe "text"
-        input.attr("aria-describedby") shouldBe s"${BusinessNameForm.businessName}-hint"
-        input.attr("value") shouldBe ("")
-
       }
       "have a continue button" in new TestSetup(false, false, false) {
         val button: Element = document.selectHead("form").selectHead("button")
@@ -170,25 +167,19 @@ class AddBusinessNameViewSpec extends ViewSpec {
     "there is no error on the change page" should {
       "have the correct heading" in new TestSetup(false, false, true) {
         document.getElementsByClass("govuk-caption-l").text() shouldBe messages("incomeSources.add.sole-trader")
-        document hasPageHeading AddBusinessNameMessages.heading
+        document hasPageHeading AddBusinessNameMessages.heading1
       }
       "have a form with the correct attributes" in new TestSetup(false, false, true) {
         document.hasFormWith(testChangeCall.method, postAction.url)
       }
-      "have an input with associated hint and label" in new TestSetup(false, false, true) {
+      "render the question heading and input field with pre-filled value" in new TestSetup(false, false, true) {
         val form: Element = document.selectHead("form")
-        val label: Element = form.selectHead("label")
-        val hint: Element = document.selectHead(".govuk-hint")
         val input: Element = form.selectHead("input")
 
-        label.text shouldBe AddBusinessNameMessages.heading
-        label.attr("for") shouldBe input.attr("id")
-        hint.text contains AddBusinessNameMessages.paragraph1
         input.attr("id") shouldBe BusinessNameForm.businessName
         input.attr("name") shouldBe BusinessNameForm.businessName
         input.attr("type") shouldBe "text"
-        input.attr("aria-describedby") shouldBe s"${BusinessNameForm.businessName}-hint"
-        input.attr("value") shouldBe (testBusinessName)
+        input.attr("value") shouldBe testBusinessName
       }
       "have a continue button" in new TestSetup(false, false, true) {
         val button: Element = document.selectHead("form").selectHead("button")
@@ -211,26 +202,19 @@ class AddBusinessNameViewSpec extends ViewSpec {
     "there is no error on the add page" should {
       "have the correct heading" in new TestSetup(true, false, false) {
         document.getElementsByClass("govuk-caption-l").text() shouldBe messages("incomeSources.add.sole-trader")
-        document hasPageHeading AddBusinessNameMessages.heading
+        document hasPageHeading AddBusinessNameMessages.heading1
       }
       "have a form with the correct attributes" in new TestSetup(true, false, false) {
         document.hasFormWith(testCall.method, postAction.url)
       }
-      "have an input with associated hint and label" in new TestSetup(true, false, false) {
+      "render the question heading and input field" in new TestSetup(true, false, false) {
         val form: Element = document.selectHead("form")
-        val label: Element = form.selectHead("label")
-        val hint: Element = document.selectHead(".govuk-hint")
-
         val input: Element = form.selectHead("input")
 
-        label.text shouldBe AddBusinessNameMessages.heading
-        label.attr("for") shouldBe input.attr("id")
-        hint.text contains AddBusinessNameMessages.paragraph1
         input.attr("id") shouldBe BusinessNameForm.businessName
         input.attr("name") shouldBe BusinessNameForm.businessName
         input.attr("type") shouldBe "text"
-        input.attr("aria-describedby") shouldBe s"${BusinessNameForm.businessName}-hint"
-        input.attr("value") shouldBe ("")
+        input.attr("value") shouldBe ""
 
       }
       "have a continue button" in new TestSetup(true, false, false) {
@@ -254,25 +238,19 @@ class AddBusinessNameViewSpec extends ViewSpec {
     "there is no error on the change page" should {
       "have the correct heading" in new TestSetup(true, false, true) {
         document.getElementsByClass("govuk-caption-l").text() shouldBe messages("incomeSources.add.sole-trader")
-        document hasPageHeading AddBusinessNameMessages.heading
+        document hasPageHeading AddBusinessNameMessages.heading1
       }
       "have a form with the correct attributes" in new TestSetup(true, false, true) {
         document.hasFormWith(testChangeCall.method, postAction.url)
       }
-      "have an input with associated hint and label" in new TestSetup(true, false, true) {
+      "render the input field with pre-filled value" in new TestSetup(true, false, true) {
         val form: Element = document.selectHead("form")
-        val label: Element = form.selectHead("label")
-        val hint: Element = document.selectHead(".govuk-hint")
         val input: Element = form.selectHead("input")
 
-        label.text shouldBe AddBusinessNameMessages.heading
-        label.attr("for") shouldBe input.attr("id")
-        hint.text contains AddBusinessNameMessages.paragraph1
         input.attr("id") shouldBe BusinessNameForm.businessName
         input.attr("name") shouldBe BusinessNameForm.businessName
         input.attr("type") shouldBe "text"
-        input.attr("aria-describedby") shouldBe s"${BusinessNameForm.businessName}-hint"
-        input.attr("value") shouldBe (testBusinessName)
+        input.attr("value") shouldBe testBusinessName
       }
       "have a continue button" in new TestSetup(true, false, true) {
         val button: Element = document.selectHead("form").selectHead("button")


Reviews:
user: login: jmountain-hmrc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:38:32Z
user: login: IoannisLazaridis-oc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T10:55:42Z
user: login: jmountain-hmrc
body: Looks good, waiting on ATs
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T13:12:45Z
user: login: TomRafferty
body: LGTM
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T11:52:36Z

Review comments:
diff_hunk: @@ -77,19 +68,28 @@
 
         <span class="govuk-caption-l">@messages("incomeSources.add.sole-trader")</span>
 
+        <h1 class="govuk-heading-l">@messages("add-business-name.heading1")</h1>
path: app/views/manageBusinesses/add/AddBusinessName.scala.html
user: login: jmountain-hmrc
body: Are you able to use the h1 component instead?
created_at: 2025-04-16T09:38:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -77,19 +68,28 @@
 
         <span class="govuk-caption-l">@messages("incomeSources.add.sole-trader")</span>
 
+        <h1 class="govuk-heading-l">@messages("add-business-name.heading1")</h1>
path: app/views/manageBusinesses/add/AddBusinessName.scala.html
user: login: IoannisLazaridis-oc
body: Done, thank you!
created_at: 2025-04-16T10:55:42Z
author_association: CONTRIBUTOR

PR comments:
user: login: platops-pr-bot
created_at: 2025-04-16T08:21:28Z
body: - `SBT` can be updated to `1.10.10` in [project/build.properties](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/project/build.properties#L1)
- `Scala` can be updated from `2.13.12` to `2.13.16` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L87)
- `uk.gov.hmrc.sbt-distributables` can be updated to `2.6.0` in [project/plugins.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/project/plugins.sbt#L11)
- `uk.gov.hmrc:bootstrap-frontend-play-30` can be updated to `9.11.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:crypto-json-play-30` can be updated to `8.2.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:play-frontend-hmrc-play-30` can be updated to `11.13.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc.mongo:hmrc-mongo-play-30` can be updated to `2.6.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:bootstrap-test-play-30` can be updated to `9.11.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc.mongo:hmrc-mongo-test-play-30` can be updated to `2.6.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
author_association: NONE
user: login: platops-pr-bot
created_at: 2025-04-22T11:00:13Z
body: - ~~`SBT` can be updated to `1.10.10` in [project/build.properties](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/project/build.properties#L1)~~
- ~~`Scala` can be updated from `2.13.12` to `2.13.16` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L87)~~
- ~~`uk.gov.hmrc.sbt-distributables` can be updated to `2.6.0` in [project/plugins.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/project/plugins.sbt#L11)~~
- `uk.gov.hmrc:bootstrap-frontend-play-30` can be updated to `9.11.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:crypto-json-play-30` can be updated to `8.2.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:play-frontend-hmrc-play-30` can be updated to `11.13.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc.mongo:hmrc-mongo-play-30` can be updated to `2.6.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc:bootstrap-test-play-30` can be updated to `9.11.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
- `uk.gov.hmrc.mongo:hmrc-mongo-test-play-30` can be updated to `2.6.0` in [build.sbt](https://github.com/hmrc/income-tax-view-change-frontend/blob/MISUV-9599/build.sbt#L1).
author_association: NONE