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