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](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
parent 5713e3dd
...@@ -376,3 +376,19 @@ table { ...@@ -376,3 +376,19 @@ table {
} }
.hide-bottom-border { border-bottom: none !important; } .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 @@ ...@@ -26,5 +26,5 @@
= render "layouts/flash" = render "layouts/flash"
= yield :flash_message = yield :flash_message
%div{ class: "#{(container_class unless @no_container)} #{@content_class}" } %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
.content .content{ id: "content-body" }
= yield = yield
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } %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" } %div{ class: "container-fluid" }
.header-content .header-content
%button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" } %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