Bypass blocks (#3779)

* work in progress

now working for signup registration wizard

* Fix rubocop error

* back link updates to events

* add skip-links javascript

* Update skip_links.js

fix linting issues

* Add 1x1 image to back link

Ensure voiceover reads the title from main section

* Update back_component.html.erb

add empty alt text

app/components/back_component.html.erb

@@ -0,0 +1,6 @@
+<div class="back-link">
+  <%= link_to text, path, **options %>
+</div>
+<!-- This 1x1 blank image ensures that iOS VoiceOver reads the title in the main
+section below the back link, rather than the back link above -->
+<%= image_pack_tag('static/1x1.png', size: '1x1', aria: { hidden: true }, role: 'none', alt: '') %>

app/components/back_component.rb

@@ -0,0 +1,11 @@
+class BackComponent < ViewComponent::Base
+  attr_reader :path, :text, :options
+
+  def initialize(path: :back, text: "Back", **options)
+    super
+    @path = path
+    @text = text
+    @options = options
+    @options[:class] = "govuk-back-link #{options[:class]}".strip
+  end
+end

app/helpers/application_helper.rb

@@ -69,12 +69,6 @@ def govuk_form_for(*args, **options, &block)
     form_for(*args, **merged, &block)
   end
 
-  def back_link(path = :back, text: "Back", **options)
-    options[:class] = "govuk-back-link #{options[:class]}".strip
-
-    link_to text, path, **options
-  end
-
   def internal_referer
     referer = request.referer
 

app/views/event_steps/_form_first_page.html.erb

@@ -1,8 +1,8 @@
-<section class="registration__event registration__event--first-page">
-  <p>
-    <%= back_link step_path(wizard.previous_key) if wizard.previous_key %>
-  </p>
+<% content_for(:back_link) do %>
+  <%= render BackComponent.new(path: step_path(wizard.previous_key)) if wizard.previous_key %>
+<% end %>
 
+<section class="registration__event registration__event--first-page">
   <%= tag.h1("Sign up for this event", class: "heading-l") %>
 
   <%= govuk_form_for current_step, url: step_path do |f| %>

app/views/form/_sign_up.html.erb

@@ -1,10 +1,10 @@
+<% content_for(:back_link) do %>
+  <%= render BackComponent.new(path: step_path(wizard.previous_key)) if wizard.previous_key %>
+<% end %>
+
 <% complete_button_text ||= "Complete sign up" %>
 
 <%= tag.section(class: "registration__#{section_class}") do %>
-  <p>
-    <%= back_link step_path(wizard.previous_key) if wizard.previous_key %>
-  </p>
-
   <%= tag.div(class: "registration__#{section_class}--container") do %>
     <%= govuk_form_for current_step, url: step_path do |f| %>
       <%= f.govuk_error_summary %>

app/views/layouts/registration.html.erb

@@ -8,11 +8,14 @@
   <%= body_tag do %>
     <%= render HeaderComponent.new %>
 
-    <%= main_tag(class: "main-section") do %>
+    <section class="main-section">
       <section class="feature registration container">
-        <%= yield %>
+        <%= yield(:back_link) %>
+        <%= main_tag(class: "within-section") do %>
+          <%= yield %>
+        <% end %>
       </section>
-    <% end %>
+    </section>
 
     <%= render FooterComponent.new(talk_to_us: false, feedback: false) %>
   <% end %>

app/views/layouts/registration_with_image_above.html.erb

@@ -7,6 +7,7 @@
   <%= render "sections/head" %>
   <%= body_tag do %>
     <%= render HeaderComponent.new %>
+    <%= yield(:back_link) %>
 
     <%= main_tag(class: "main-section registration-with-image-above") do %>
       <% if @event.is_online %>

app/views/layouts/registration_with_side_images.html.erb

@@ -8,18 +8,18 @@
   <%= body_tag do %>
     <%= render HeaderComponent.new %>
 
-    <%= main_tag do %>
-      <div class="main-section registration-with-side-images">
-        <section class="signup-container">
-          <%= image_pack_tag(content_for?(:left_image) ? yield(:left_image) : 'content/mailing-list-signup/left.jpg', class: 'left-img hide-on-mobile hide-on-tablet', alt: "") %>
-          <div class="signup-form">
-            <%= image_pack_tag(content_for?(:mobile_image) ? yield(:mobile_image) : 'content/mailing-list-signup/mobile.jpg', class: 'hide-on-desktop', alt: "") %>
+    <div class="main-section registration-with-side-images">
+      <section class="signup-container">
+        <%= image_pack_tag(content_for?(:left_image) ? yield(:left_image) : 'content/mailing-list-signup/left.jpg', class: 'left-img hide-on-mobile hide-on-tablet', alt: "") %>
+        <div class="signup-form">
+          <%= image_pack_tag(content_for?(:mobile_image) ? yield(:mobile_image) : 'content/mailing-list-signup/mobile.jpg', class: 'hide-on-desktop', alt: "") %>
+          <%= main_tag do %>
             <%= yield %>
-          </div>
-          <%= image_pack_tag(content_for?(:right_image) ? yield(:right_image) : 'content/mailing-list-signup/right.jpg', class: 'right-img hide-on-mobile hide-on-tablet', alt: "") %>
-        </section>
-      </div>
-    <% end %>
+          <% end %>
+        </div>
+        <%= image_pack_tag(content_for?(:right_image) ? yield(:right_image) : 'content/mailing-list-signup/right.jpg', class: 'right-img hide-on-mobile hide-on-tablet', alt: "") %>
+      </section>
+    </div>
 
     <%= render FooterComponent.new(talk_to_us: false, feedback: false) %>
   <% end %>

app/webpacker/styles/layout.scss

@@ -72,6 +72,15 @@ section.container {
   flex-direction: column;
   margin: 1em 0;
 
+  > main.within-section, > .back-link {
+    margin: auto $indent-amount;
+
+    @include mq($from: tablet) {
+      margin: 0 0;
+      width: 100%;
+    }
+  }
+
   &.centered {
     justify-content: center;
   }

app/webpacker/styles/registration.scss

@@ -11,6 +11,7 @@ section.registration {
   }
 
   @include mq($from: tablet) {
+    main.within-section, .back-link,
     .registration__mailing-list,
     .registration__teacher-training-adviser,
     .registration__callback {