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](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/views/layouts/_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)
![Screenshot_from_2016-11-17_17-59-22](/uploads/0eb0149f46bd35e9ce629e7a6533be53/Screenshot_from_2016-11-17_17-59-22.png)

## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #24057

See merge request !7533

3 files changed, 18 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ad5ac589d0f..7f5583c917a 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -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;
+  }
+}
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 8aefdcb3d9b..a9a0b149049 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -26,5 +26,5 @@
     = render "layouts/flash"
     = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
-      .content
+      .content{ id: "content-body" }
         = yield
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 7a9859262f7..5456be77aab 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,4 +1,5 @@
 %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" }
     .header-content
       %button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" }