GitLab steht aufgrund wichtiger Wartungsarbeiten am Montag, den 8. März, zwischen 17:00 und 19:00 Uhr nicht zur Verfügung.

Commit 872d0bfd authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Alejandro Rodríguez

Merge branch '24057-a11y-content-shortcut' into 'master'

Resolve "Create a tab shortcut to jump directly to content"

## What does this MR do?
Adds accessibility shortcut to page, i.e. if user hits `tab` key right after the page is loaded and user has not interacted to any part of the page, the shortcut appears at top left corner of the page. Then, pressing `enter` (`spacebar` support is WIP) scrolls page to focus on content.

## Are there points in the code the reviewer needs to double check?
See if `id` attribute added to `.content` element (present in [_page.html.haml]( needs to be reviewed if it is correct approach or we already have an ID that shortcut can refer to.

## Why was this MR needed?
This feature is particularly useful for screen readers where user doesn't have to go through entire nav to reach content of page.

## Screenshots (if relevant)

## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry]( added
- [ ] [Documentation created/updated](
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](
- [ ] Conform by the [style guides](
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](

## What are the relevant issue numbers?

Closes #24057

See merge request !7533
parent 5713e3dd
......@@ -376,3 +376,19 @@ table {
.hide-bottom-border { border-bottom: none !important; }
.gl-accessibility {
&:focus {
top: 1px;
left: 1px;
width: auto;
height: 100%;
line-height: 50px;
padding: 0 10px;
clip: auto;
text-decoration: none;
color: $gl-title-color;
background: $gray-light;
z-index: 1;
......@@ -26,5 +26,5 @@
= render "layouts/flash"
= yield :flash_message
%div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
.content{ id: "content-body" }
= yield
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
%a{ href: "#content-body", tabindex: "1", class: "sr-only gl-accessibility" } Skip to content
%div{ class: "container-fluid" }
%button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment