From 45c1f9356237d7217de82c76a068407c640b839b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 29 Sep 2023 22:30:34 +0200 Subject: [PATCH] Add a link to skip to the main content While people using screen readers already have keyboard shortcuts to jump to the
tag, there are people who navigate the page with the keyboard using just the tab key, and for them, this link provides a way to save time and start reading the main content instead of having to manually go through all the navigation links every time a new page is loaded. Note that we had to add an additional `width: 0` rule because Foundation's `element-invisible` would apply `1px` and the test checking for `visible: :hidden` would faile. --- .../layout/skip_to_main_content.scss | 22 +++++++++++++++++++ .../skip_to_main_content_component.html.erb | 3 +++ .../layout/skip_to_main_content_component.rb | 2 ++ app/views/layouts/admin.html.erb | 3 ++- app/views/layouts/application.html.erb | 3 ++- app/views/layouts/dashboard.html.erb | 3 ++- app/views/layouts/devise.html.erb | 3 ++- app/views/layouts/management.html.erb | 3 ++- config/locales/en/general.yml | 1 + config/locales/es/general.yml | 1 + public/403.html | 2 +- public/404.html | 2 +- public/422.html | 2 +- public/500.html | 2 +- spec/rails_helper.rb | 2 ++ spec/system/home_spec.rb | 16 ++++++++++++++ 16 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 app/assets/stylesheets/layout/skip_to_main_content.scss create mode 100644 app/components/layout/skip_to_main_content_component.html.erb create mode 100644 app/components/layout/skip_to_main_content_component.rb diff --git a/app/assets/stylesheets/layout/skip_to_main_content.scss b/app/assets/stylesheets/layout/skip_to_main_content.scss new file mode 100644 index 000000000..dcfc3db78 --- /dev/null +++ b/app/assets/stylesheets/layout/skip_to_main_content.scss @@ -0,0 +1,22 @@ +.skip-to-main-content { + @include grid-column-gutter; + + a { + &:not(:focus) { + @include element-invisible; + width: 0 !important; + } + + &:focus { + @include body-colors; + + $outline-size: $focus-inner-width + $focus-middle-width + $focus-outer-width; + + padding: 0.4rem; + position: absolute; + $global-left: $outline-size; + top: $outline-size; + z-index: 1000; + } + } +} diff --git a/app/components/layout/skip_to_main_content_component.html.erb b/app/components/layout/skip_to_main_content_component.html.erb new file mode 100644 index 000000000..e22492693 --- /dev/null +++ b/app/components/layout/skip_to_main_content_component.html.erb @@ -0,0 +1,3 @@ + diff --git a/app/components/layout/skip_to_main_content_component.rb b/app/components/layout/skip_to_main_content_component.rb new file mode 100644 index 000000000..2cd600df3 --- /dev/null +++ b/app/components/layout/skip_to_main_content_component.rb @@ -0,0 +1,2 @@ +class Layout::SkipToMainContentComponent < ApplicationComponent +end diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index c84b71711..182fabd69 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -7,6 +7,7 @@ + <%= render Layout::SkipToMainContentComponent.new %> <%= render Layout::AdminHeaderComponent.new(current_user) %>
@@ -22,7 +23,7 @@ <% end %> -
+
<%= label_tag :show_menu, t("admin.menu.admin"), "aria-hidden": true, class: "button hollow expanded" %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 4d3711b6a..585e4567d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,12 +13,13 @@ <%= raw setting["html.per_page_code_head"] %> + <%= render Layout::SkipToMainContentComponent.new %> <%= raw setting["html.per_page_code_body"] %>
<%= render "layouts/header", with_subnavigation: true %> -
+
<%= render "layouts/flash" %> <%= yield %>
diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb index 5d95537e8..ef35fbfcb 100644 --- a/app/views/layouts/dashboard.html.erb +++ b/app/views/layouts/dashboard.html.erb @@ -13,6 +13,7 @@ <%= raw setting["per_page_code_head"] %> + <%= render Layout::SkipToMainContentComponent.new %> <%= raw setting["per_page_code_body"] %>

<%= setting["org_name"] %>

@@ -26,7 +27,7 @@ <%= render "dashboard/menu" %> -
+
<%= label_tag :show_menu, t("admin.menu.admin"), "aria-hidden": true, class: "button hollow expanded" %> diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index daf933f52..357a3ee34 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -7,6 +7,7 @@ + <%= render Layout::SkipToMainContentComponent.new %> <%= raw setting["html.per_page_code_body"] %>
-
+
<%= render "layouts/flash" %> <%= yield %> diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb index 921d91b2b..4c01900d2 100644 --- a/app/views/layouts/management.html.erb +++ b/app/views/layouts/management.html.erb @@ -7,6 +7,7 @@ + <%= render Layout::SkipToMainContentComponent.new %> <%= render Layout::AdminHeaderComponent.new(manager_logged_in) %>
@@ -16,7 +17,7 @@ <%= render "/management/menu" %> -
+
<%= label_tag :show_menu, t("admin.menu.admin"), "aria-hidden": true, class: "button hollow expanded" %> diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 3fb976b1d..f8c76bb55 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -228,6 +228,7 @@ en: zero: "You don't have new notifications" notifications: Notifications sdg: "SDG" + skip_to_main_content: "Skip to main content" notifications: index: empty_notifications: You don't have new notifications. diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 821c85f5d..507ee7701 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -228,6 +228,7 @@ es: zero: "No tienes notificaciones nuevas" notifications: Notificaciones sdg: "ODS" + skip_to_main_content: "Saltar al contenido principal" notifications: index: empty_notifications: No tienes notificaciones nuevas. diff --git a/public/403.html b/public/403.html index da449d613..5ce743d62 100644 --- a/public/403.html +++ b/public/403.html @@ -33,7 +33,7 @@ -
+

403

Access to this page has been disabled by the administrators.

diff --git a/public/404.html b/public/404.html index 82a7fdc35..665f464cd 100644 --- a/public/404.html +++ b/public/404.html @@ -33,7 +33,7 @@ -
+

404

Not found.

diff --git a/public/422.html b/public/422.html index 3e118553d..941362f53 100644 --- a/public/422.html +++ b/public/422.html @@ -33,7 +33,7 @@ -
+

422

The change you wanted was rejected.

diff --git a/public/500.html b/public/500.html index 3084a5e2c..bfdba1ecd 100644 --- a/public/500.html +++ b/public/500.html @@ -33,7 +33,7 @@ -
+

500

Internal server error.

diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb index a0309ef8a..16a958e38 100644 --- a/spec/rails_helper.rb +++ b/spec/rails_helper.rb @@ -62,6 +62,8 @@ module Capybara unless url.match?("robots.txt") || url.match?("active_storage/representations") expect(page).to have_css "main", count: 1 + expect(page).to have_css "#main", count: 1 + expect(page).to have_css "main#main" end end end diff --git a/spec/system/home_spec.rb b/spec/system/home_spec.rb index 2efff1af1..82db40218 100644 --- a/spec/system/home_spec.rb +++ b/spec/system/home_spec.rb @@ -183,4 +183,20 @@ describe "Home" do within(".header-card") { expect(page).not_to have_link } end end + + describe "Link to skip to main content" do + it "is visible on focus" do + visit root_path + + expect(page).to have_link "Skip to main content", visible: :hidden + expect(page).to have_css "main" + expect(page).not_to have_css "main:target" + + page.execute_script("$('.skip-to-main-content a').focus()") + sleep 0.01 until page.has_link?("Skip to main content", visible: :visible) + click_link "Skip to main content" + + expect(page).to have_css "main:target" + end + end end