Merge pull request #1681 from ministryofjustice/MLPAB-2464-button-focus

MLPAB-2464 Fix styling of button links so they focus correctly
ministryofjustice · Dec 12, 2024 · 67d71c6 · 67d71c6
2 parents 104aff2 + 637b3bb
commit 67d71c6
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 26 deletions.
diff --git a/cypress/e2e/donor/payment.cy.js b/cypress/e2e/donor/payment.cy.js
@@ -277,7 +277,7 @@ describe('Pay for LPA', { pageLoadTimeout: 8000 }, () => {
         cy.url().should('contain', '/upload-evidence');
 
         cy.get('#uploaded .govuk-summary-list').within(() => {
-            cy.contains('supporting-evidence.png').parent().contains('button span', 'Delete').click();
+            cy.contains('supporting-evidence.png').parent().contains('button', 'Delete').click();
         });
 
         cy.url().should('contain', '/upload-evidence');

diff --git a/lang/cy.json b/lang/cy.json
@@ -901,9 +901,9 @@
     "beforeYouCanProvideYourCertificateForThisLpa": "Cyn y gallwch chi ddarparu tystysgrif ar gyfer LPA {{.DonorFullName}}, rhaid i chi gadarnhau pwy ydych chi.",
     "confirmYourCertificateProviderIsNotRelated": "Cadarnhau nad yw’ch darparwr tystysgrif yn perthyn i chi neu i’ch atwrneiod",
     "confirmYourCertificateProviderIsNotRelatedContent": "<p class=\"govuk-body\">Mae’r manylion rydych wedi’u rhoi yn dangos y gallai’ch darparwr tystysgrif fod yn perthyn i chi neu i un o’ch atwrneiod.</p><p class=\"govuk-body\">Ni all eich darparwr tystysgrif fod yn perthyn i chi neu i unrhyw un o’ch atwrneiod (ar gyfer yr LPA hon neu unrhyw un arall sydd gennych).</p><p class=\"govuk-body\">Os nad yw’n perthyn i chi, gallwch roi tic yn y blwch i gadarnhau hyn a pharhau.</p>",
-    "ifYourCertificateProviderIsRelated": "Os yw’ch darparwr tystysgrif yn perthyn i chi neu’n un o’ch atwrneiod, rhaid i chi",
-    "deleteYourCurrentCertificateProvider": "dileu darparwr tystysgrif cyfredol a dewis un newydd",
+    "chooseNewCertificateProvider": "Welsh",
     "iConfirmThatMyCertificateProviderIsNotRelated": "Rwyf yn cadarnhau nad yw fy narparwr tystysgrif yn perthyn i mi nac i unrhyw un o’m hatwrneiod",
+    "tickTheBoxToConfirmCertificateProviderNotRelated": "Welsh",
     "theBoxToConfirmYourCertificateProviderIsNotRelated": "y blwch i gadarnhau nad yw’ch darparwr tystysgrif yn perthyn i chi nac i unrhyw un o’ch atwrneiod",
     "youMustReviewTheInformationYouHaveEntered": "Rhaid i chi adolygu’r wybodaeth rydych wedi’i rhoi.",
     "viewAndUseYourRegisteredLpas": "Welsh",

diff --git a/lang/en.json b/lang/en.json
@@ -820,10 +820,10 @@
     "beforeYouSignYourLpa": "Before you sign your LPA, you must confirm your identity.",
     "beforeYouCanProvideYourCertificateForThisLpa": "Before you can provide a certificate for {{possessive .DonorFullName}} LPA, you must confirm your identity.",
     "confirmYourCertificateProviderIsNotRelated": "Confirm your certificate provider is not related to you or your attorneys",
-    "confirmYourCertificateProviderIsNotRelatedContent": "<p class=\"govuk-body\">The details you have given indicate that your certificate provider may be related to you or one of your attorneys.</p><p class=\"govuk-body\">Your certificate provider cannot be related to you or any of your attorneys (on this LPA or any other LPA you have).</p><p class=\"govuk-body\">If they are not related, you can tick the box to confirm this and continue.</p>",
-    "ifYourCertificateProviderIsRelated": "If your certificate provider is related to you or one of your attorneys, you must",
-    "deleteYourCurrentCertificateProvider": "delete your current certificate provider and choose a new one",
+    "confirmYourCertificateProviderIsNotRelatedContent": "<p class=\"govuk-body\">The details you have given indicate that your certificate provider may be related to you or one of your attorneys.</p><p class=\"govuk-body\">If this is the case, you must choose another certificate provider.</p>",
+    "chooseNewCertificateProvider": "Choose a new certificate provider",
     "iConfirmThatMyCertificateProviderIsNotRelated": "I confirm that my certificate provider is not related to me or any of my attorneys",
+    "tickTheBoxToConfirmCertificateProviderNotRelated": "Tick the box to confirm your certificate provider is not related to you or your attorneys",
     "theBoxToConfirmYourCertificateProviderIsNotRelated": "the box to confirm your certificate provider is not related to you or your attorneys, or choose another certificate provider",
     "youMustReviewTheInformationYouHaveEntered": "You must review the information you have entered.",
     "viewAndUseYourRegisteredLpas": "View and use your registered LPAs",

diff --git a/web/assets/scss/main.scss b/web/assets/scss/main.scss
@@ -83,19 +83,13 @@ body:not(.js-enabled) .govuk-back-link {
     background: none;
     border: none;
     padding: 0;
-    font: inherit;
     cursor: pointer;
-    outline: inherit;
+    font-size: inherit;
     color: $govuk-link-colour;
-    display: contents;
-
-    // introduce styling on a nested span as 'display: contents' removes some from the button
-    > span {
-        @include govuk-link-common;
-        @include govuk-link-style-default;
-        @include govuk-link-print-friendly;
-        @include govuk-link-style-no-visited-state;
-    }
+}
+
+.app-button-link:focus {
+    outline: inherit;
 }
 
 .app-tabs-no-border .govuk-tabs__panel {

diff --git a/web/template/donor/confirm_your_certificate_provider_is_not_related.gohtml b/web/template/donor/confirm_your_certificate_provider_is_not_related.gohtml
@@ -23,6 +23,8 @@
                 {{ $hasError := .Errors.Has .Form.FieldName }}
                 <div class="govuk-form-group {{ if $hasError }}govuk-form-group--error{{ end }}">
                     <fieldset class="govuk-fieldset" {{ if $hasError }}aria-describedby="{{.Form.FieldName}}-error"{{ end }}>
+                        <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">{{ tr .App "tickTheBoxToConfirmCertificateProviderNotRelated" }}</legend>
+
                         {{ template "error-message" (errorMessage . .Form.FieldName) }}
 
                         {{ template "checkboxes" (items . .Form.FieldName nil
@@ -31,9 +33,11 @@
                     </fieldset>
                 </div>
 
-                <p class="govuk-body">{{ tr .App "ifYourCertificateProviderIsRelated" }} <button name="action" value="choose-new" class="app-button-link"><span>{{ tr .App "deleteYourCurrentCertificateProvider" }}</span></button>.</p>
-
-                {{ template "buttons" (button .App "continue") }}
+                <div class="govuk-button-group">
+                    <button type="submit" class="govuk-button" data-module="govuk-button">{{ tr .App "continue" }}</button>
+                    <a id="return-to-tasklist-btn" href="{{ link .App (global.Paths.TaskList.Format .App.LpaID) }}" class="govuk-button govuk-button--secondary">{{ tr .App "returnToTaskList" }}</a>
+                    <button name="action" value="choose-new" class="app-button-link govuk-link">{{ tr .App "chooseNewCertificateProvider" }}</button>
+                </div>
                 {{ template "csrf-field" . }}
             </form>
         </div>

diff --git a/web/template/donor/upload_evidence.gohtml b/web/template/donor/upload_evidence.gohtml
@@ -24,8 +24,8 @@
                     </dt>
                     <dd class="govuk-summary-list__actions">
                         <input type="hidden" id="f-delete-evidence-{{ $i }}" name="delete" value="{{ $d.Key }}" />
-                        <button class="app-button-link">
-                            <span>{{ tr $.App "delete" }}<span class="govuk-visually-hidden"> {{ $d.Filename }}</span></span>
+                        <button class="app-button-link govuk-link">
+                            {{ tr $.App "delete" }}<span class="govuk-visually-hidden"> {{ $d.Filename }}</span>
                         </button>
                     </dd>
                 </div>

diff --git a/web/template/supporter/manage_team_members.gohtml b/web/template/supporter/manage_team_members.gohtml
@@ -25,7 +25,7 @@
           {{ $statusUpdatedTitle = "teamMemberSuspended" }}
           {{ $statusUpdatedContent = "emailHasBeenSuspended" }}
         {{ end }}
-        
+
         {{ template "notification-banner" (notificationBanner .App $statusUpdatedTitle (trFormatHtml .App $statusUpdatedContent "Email" (.App.Query.Get "statusEmail"))) }}
       {{ end}}
 
@@ -86,9 +86,8 @@
                           <input type="hidden" id="f-email-{{ .Email }}" name="email" value="{{ .Email }}" />
                           <input type="hidden" id="f-permission-{{ .Email }}" name="permission" value="{{ .Permission }}" />
 
-                          <button name="resend-invite" value="{{ .Email }}" class="app-button-link">
-                            <span>{{ tr $.App "resendInvite" }} <span class="govuk-visually-hidden"> {{ trFormat $.App "toMemberName" "MemberName" .FullName }} </span>
-                            </span>
+                          <button name="resend-invite" value="{{ .Email }}" class="app-button-link govuk-link">
+                            {{ tr $.App "resendInvite" }} <span class="govuk-visually-hidden"> {{ trFormat $.App "toMemberName" "MemberName" .FullName }}</span>
                           </button>
 
                           {{ template "csrf-field" $ }}