From b94c216a6a7cefdee9d0a3d78c9974cd22d2dc56 Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Thu, 17 Nov 2016 19:33:23 +0530 Subject: Add a11y class for top-level shortcut for Screen Readers --- app/assets/stylesheets/framework/common.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index ad5ac589d0f..33c53a2bdd1 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -376,3 +376,20 @@ 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; + } +} -- cgit v1.2.1 From d3a64b1759ee1d61d81d8d371f4a267f60f99ea7 Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Thu, 17 Nov 2016 19:41:51 +0530 Subject: Add shortcut for SRs to `Skip to content` for a11y --- app/views/layouts/header/_default.html.haml | 1 + 1 file changed, 1 insertion(+) 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" } -- cgit v1.2.1 From 4edc0f19b08febc54635ecadfd73e348b08a2320 Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Thu, 17 Nov 2016 19:42:20 +0530 Subject: Add ID for a11y shortcut href --- app/views/layouts/_page.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 -- cgit v1.2.1 From 6db289ab137f8c5d8c07599a77d1fe5bca18eb61 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 17 Nov 2016 15:07:13 -0700 Subject: Fix indentation --- app/assets/stylesheets/framework/common.scss | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 33c53a2bdd1..7f5583c917a 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -378,18 +378,17 @@ 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; - } + &: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; + } } -- cgit v1.2.1