consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a link to skip to the main content

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

3
app/views/layouts/admin.html.erb
View File

@@ -7,6 +7,7 @@
</head>
<body class="admin">
<%= render Layout::SkipToMainContentComponent.new %>
<%= render Layout::AdminHeaderComponent.new(current_user) %>
<div class="menu-and-content">
@@ -22,7 +23,7 @@
<% end %>
</nav>
<main class="admin-content <%= yield(:main_class) %>">
<main id="main" class="admin-content <%= yield(:main_class) %>">
<%= label_tag :show_menu, t("admin.menu.admin"),
"aria-hidden": true, class: "button hollow expanded" %>