Update task list focus state

alphagov · Jul 22, 2019 · 4191d90 · 4191d90
1 parent 417b7e3
commit 4191d90
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
@@ -50,7 +50,6 @@
   display: block;
   @include govuk-media-query($from: 450px) {
     float: left;
-    width: 75%;
   }
 }
 

diff --git a/docs/views/templates/task-list.html b/docs/views/templates/task-list.html
@@ -22,15 +22,19 @@ <h2 class="app-task-list__section">
           </h2>
           <ul class="app-task-list__items">
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#" aria-describedby="eligibility-completed">
-                Check eligibility
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#" aria-describedby="eligibility-completed">
+                  Check eligibility
+                </a>
+              </span>
               <strong class="govuk-tag app-task-list__task-completed" id="eligibility-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#" aria-describedby="read-declaration-completed">
-                Read declaration
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#" aria-describedby="read-declaration-completed">
+                  Read declaration
+                </a>
+              </span>
               <strong class="govuk-tag app-task-list__task-completed" id="read-declaration-completed">Completed</strong>
             </li>
           </ul>
@@ -41,31 +45,41 @@ <h2 class="app-task-list__section">
           </h2>
           <ul class="app-task-list__items">
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#" aria-describedby="company-information-completed">
-                Company information
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#" aria-describedby="company-information-completed">
+                  Company information
+                </a>
+              </span>
               <strong class="govuk-tag app-task-list__task-completed" id="company-information-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#" aria-describedby="contact-details-completed">
-                Your contact details
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#" aria-describedby="contact-details-completed">
+                  Your contact details
+                </a>
+              </span>
               <strong class="govuk-tag app-task-list__task-completed" id="contact-details-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#">
-                List convictions
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#">
+                  List convictions
+                </a>
+              </span>
             </li>
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#">
-                Provide financial evidence
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#">
+                  Provide financial evidence
+                </a>
+              </span>
             </li>
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#" aria-describedby="medical-information-completed">
-                Give medical information
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#" aria-describedby="medical-information-completed">
+                  Give medical information
+                </a>
+              </span>
               <strong class="govuk-tag app-task-list__task-completed" id="medical-information-completed">Completed</strong>
             </li>
           </ul>
@@ -76,9 +90,11 @@ <h2 class="app-task-list__section">
           </h2>
           <ul class="app-task-list__items">
             <li class="app-task-list__item">
-              <a class="app-task-list__task-name" href="#">
-                Submit and pay
-              </a>
+              <span class="app-task-list__task-name">
+                <a href="#">
+                  Submit and pay
+                </a>
+              </span>
             </li>
           </ul>
         </li>