Toggle the highlight styling when the skip to next incomplete section is clicked

app/javascript/packs/application.js

@@ -17,3 +17,5 @@ ActiveStorage.start()
 initAll()
 
 import "controllers"
+import './tasklist'
+

app/javascript/packs/tasklist.js

@@ -0,0 +1,3 @@
+window.addHighlight = function(elementId) {
+  document.getElementById(elementId).classList.add('tasklist_item_highligh');
+}

app/javascript/styles/_task-list.scss

@@ -85,3 +85,9 @@
 //   display: block;
 //   border: 1px solid blue
 // }
+
+.app-task-list__item:target,
+.tasklist_item_highligh{
+  background-color: $govuk-focus-colour;
+  box-shadow: 0 -2px  $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+}

app/views/case_logs/edit.html.erb

@@ -8,11 +8,12 @@
         <%= @case_log.status %></h2>
       <p class="govuk-body govuk-!-margin-bottom-7">You've completed <%= get_sections_count(@form, @case_log, :completed) %> of <%= get_sections_count(@form, @case_log, :all) %> sections.</p>
       <p class="govuk-body govuk-!-margin-bottom-7">
-        <a href="#<%= get_next_incomplete_section(@form, @case_log) %>">Skip to next incomplete section</a>
+        <% next_incomplete_section=get_next_incomplete_section(@form, @case_log) %>
+        <a href="#<%= next_incomplete_section %>" onclick="addHighlight('<%= next_incomplete_section %>')">
+          Skip to next incomplete section
+        </a>
       </p>
-
       <%= render "tasklist", locals: { form: @form } %>
-
     </div>
   </div>
 <% end %>