BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 694b55c8 by Annabel Dunstone Gray
Options

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
parents 1d976ec2 6db289ab
Showing with 18 additions and 1 deletion
app/assets/stylesheets/framework/common.scss
...@@ -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;
}
}
app/views/layouts/_page.html.haml
...@@ -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
app/views/layouts/header/_default.html.haml
%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