Add a link to skip to the main content

While people using screen readers already have keyboard shortcuts to
jump to the <main> 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.
This commit is contained in:
Javi Martín
2023-09-29 22:30:34 +02:00
parent 2b962f2789
commit 45c1f93562
16 changed files with 61 additions and 9 deletions

View File

@@ -7,6 +7,7 @@
</head>
<body class="auth-page">
<%= render Layout::SkipToMainContentComponent.new %>
<%= raw setting["html.per_page_code_body"] %>
<div class="wrapper">
<div class="auth-image small-12 medium-3 column"
@@ -21,7 +22,7 @@
<div class="small-12 medium-9 column">
<div class="row">
<div class="small-12 medium-9 large-7 small-centered column">
<main class="auth-form margin <%= yield(:main_class) %>">
<main id="main" class="auth-form margin <%= yield(:main_class) %>">
<%= render "layouts/flash" %>
<%= yield %>