From df305573f2a309ce6db39e2218f3df8e52b0253f Mon Sep 17 00:00:00 2001 From: Martyn Whitwell Date: Mon, 15 Jan 2024 13:37:07 +0000 Subject: [PATCH] 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 | 6 +++++ app/components/back_component.rb | 11 +++++++++ app/helpers/application_helper.rb | 6 ----- .../event_steps/_form_first_page.html.erb | 8 +++---- app/views/form/_sign_up.html.erb | 8 +++---- app/views/layouts/registration.html.erb | 9 ++++--- .../registration_with_image_above.html.erb | 1 + .../registration_with_side_images.html.erb | 22 +++++++++--------- app/webpacker/images/1x1.png | Bin 0 -> 95 bytes app/webpacker/styles/layout.scss | 9 +++++++ app/webpacker/styles/registration.scss | 1 + 11 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 app/components/back_component.html.erb create mode 100644 app/components/back_component.rb create mode 100644 app/webpacker/images/1x1.png diff --git a/app/components/back_component.html.erb b/app/components/back_component.html.erb new file mode 100644 index 0000000000..fc64134eb4 --- /dev/null +++ b/app/components/back_component.html.erb @@ -0,0 +1,6 @@ +
+ <%= link_to text, path, **options %> +
+ +<%= image_pack_tag('static/1x1.png', size: '1x1', aria: { hidden: true }, role: 'none', alt: '') %> diff --git a/app/components/back_component.rb b/app/components/back_component.rb new file mode 100644 index 0000000000..0ab3e61dae --- /dev/null +++ b/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 diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index a866174c63..56490572bf 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/app/views/event_steps/_form_first_page.html.erb b/app/views/event_steps/_form_first_page.html.erb index 8167f2772d..e55150a009 100644 --- a/app/views/event_steps/_form_first_page.html.erb +++ b/app/views/event_steps/_form_first_page.html.erb @@ -1,8 +1,8 @@ -
-

- <%= back_link step_path(wizard.previous_key) if wizard.previous_key %> -

+<% content_for(:back_link) do %> + <%= render BackComponent.new(path: step_path(wizard.previous_key)) if wizard.previous_key %> +<% end %> +
<%= tag.h1("Sign up for this event", class: "heading-l") %> <%= govuk_form_for current_step, url: step_path do |f| %> diff --git a/app/views/form/_sign_up.html.erb b/app/views/form/_sign_up.html.erb index 0c5a14d8cc..29afb354a6 100644 --- a/app/views/form/_sign_up.html.erb +++ b/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 %> -

- <%= back_link step_path(wizard.previous_key) if wizard.previous_key %> -

- <%= tag.div(class: "registration__#{section_class}--container") do %> <%= govuk_form_for current_step, url: step_path do |f| %> <%= f.govuk_error_summary %> diff --git a/app/views/layouts/registration.html.erb b/app/views/layouts/registration.html.erb index db7f7260fd..662e98f870 100644 --- a/app/views/layouts/registration.html.erb +++ b/app/views/layouts/registration.html.erb @@ -8,11 +8,14 @@ <%= body_tag do %> <%= render HeaderComponent.new %> - <%= main_tag(class: "main-section") do %> +
- <%= yield %> + <%= yield(:back_link) %> + <%= main_tag(class: "within-section") do %> + <%= yield %> + <% end %>
- <% end %> +
<%= render FooterComponent.new(talk_to_us: false, feedback: false) %> <% end %> diff --git a/app/views/layouts/registration_with_image_above.html.erb b/app/views/layouts/registration_with_image_above.html.erb index 2b1cc43163..8abd7e057b 100644 --- a/app/views/layouts/registration_with_image_above.html.erb +++ b/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 %> diff --git a/app/views/layouts/registration_with_side_images.html.erb b/app/views/layouts/registration_with_side_images.html.erb index e2aae6175c..b7269dda4d 100644 --- a/app/views/layouts/registration_with_side_images.html.erb +++ b/app/views/layouts/registration_with_side_images.html.erb @@ -8,18 +8,18 @@ <%= body_tag do %> <%= render HeaderComponent.new %> - <%= main_tag do %> -
- +
<%= render FooterComponent.new(talk_to_us: false, feedback: false) %> <% end %> diff --git a/app/webpacker/images/1x1.png b/app/webpacker/images/1x1.png new file mode 100644 index 0000000000000000000000000000000000000000..1914264c08781d1f30ee0b8482bccf44586f2dc1 GIT binary patch literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^j3CU&3?x-=hn)ga%mF?ju0VQumF+E%TuG2$FoVOh l8)-lem#2$k2*>s01R$Gz9%CSj!PC{xWt~$(697H@6ZHT9 literal 0 HcmV?d00001 diff --git a/app/webpacker/styles/layout.scss b/app/webpacker/styles/layout.scss index d3005ad210..3c55b52a30 100644 --- a/app/webpacker/styles/layout.scss +++ b/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; } diff --git a/app/webpacker/styles/registration.scss b/app/webpacker/styles/registration.scss index 3c3be84b8c..0c797b64dd 100644 --- a/app/webpacker/styles/registration.scss +++ b/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 {