From 7cd9870b5d1670998d47fbb1060465e56977bae3 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@gmail.com>
Date: Tue, 25 Aug 2015 15:53:14 -0300
Subject: [PATCH] Add a11y component (a11y-bar)

---
 src/app/components/a11y-bar/a11y-bar.html        | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/components/a11y-bar/a11y-bar.scss        |  8 ++++++++
 src/app/components/a11y-bar/a11yBar.directive.js | 19 +++++++++++++++++++
 src/app/components/navbar/navbar.html            |  2 +-
 src/app/index.run.js                             | 20 +++++++++++++++++++-
 src/app/index.scss                               | 12 ------------
 src/app/pages/header/header.html                 |  3 ---
 src/index.html                                   |  5 ++---
 8 files changed, 97 insertions(+), 20 deletions(-)
 create mode 100644 src/app/components/a11y-bar/a11y-bar.html
 create mode 100644 src/app/components/a11y-bar/a11y-bar.scss
 create mode 100644 src/app/components/a11y-bar/a11yBar.directive.js

diff --git a/src/app/components/a11y-bar/a11y-bar.html b/src/app/components/a11y-bar/a11y-bar.html
new file mode 100644
index 0000000..3cc550a
--- /dev/null
+++ b/src/app/components/a11y-bar/a11y-bar.html
@@ -0,0 +1,48 @@
+<div class="a11y-bar">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-6">
+        <ul class="skip-links list-inline list-unstyled">
+          <li>
+            <a accesskey="1" href="#content" id="skip-to-content" ng-click="skipToContent($event)">
+              Ir para o conteúdo
+              <span>1</span>
+            </a>
+          </li>
+          <li>
+            <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="skipToNavigation($event)">
+              Ir para o menu
+              <span>2</span>
+            </a>
+          </li>
+          <li>
+            <a accesskey="3" href="#search" id="skip-to-search" ng-click="skipToSearch($event)">
+              Ir para a busca
+              <span>3</span>
+            </a>
+          </li>
+          <li class="last-item">
+            <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="skipToFooter($event)">
+              Ir para o rodapé
+              <span>4</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-sm-6">
+        <ul class="action-links list-inline list-unstyled pull-right">
+          <li id="siteaction-accessibility">
+            <a href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
+          </li>
+          <li id="siteaction-contraste">
+            <a href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
+          </li>
+          <li id="siteaction-mapadosite" class="last-item">
+            <a ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/a11y-bar/a11y-bar.scss b/src/app/components/a11y-bar/a11y-bar.scss
new file mode 100644
index 0000000..37c3705
--- /dev/null
+++ b/src/app/components/a11y-bar/a11y-bar.scss
@@ -0,0 +1,8 @@
+.a11y-bar {
+    font-size: 12px;
+    padding: 5px 0;
+    span {
+        background-color: #eee;
+        padding: 0 3px;
+    }
+}
diff --git a/src/app/components/a11y-bar/a11yBar.directive.js b/src/app/components/a11y-bar/a11yBar.directive.js
new file mode 100644
index 0000000..9ffd9bb
--- /dev/null
+++ b/src/app/components/a11y-bar/a11yBar.directive.js
@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('a11yBar', a11yBar);
+
+  /** @ngInject */
+  function a11yBar() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/a11y-bar/a11y-bar.html'
+    };
+
+    return directive;
+
+  }
+
+})();
diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index 97dea1d..478ee57 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -1,4 +1,4 @@
-<nav class="header-navbar navbar navbar-static-top">
+<nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
diff --git a/src/app/index.run.js b/src/app/index.run.js
index 93826b2..aee6218 100644
--- a/src/app/index.run.js
+++ b/src/app/index.run.js
@@ -51,7 +51,25 @@
       angular.element(bodyEl).toggleClass('contraste', !!state);
     }
 
-    $rootScope.toggleContrast = function() {
+    $rootScope.skipToContent = function() {
+      angular.element('#content').attr('tabIndex', -1).focus();
+    };
+
+    $rootScope.skipToNavigation = function() {
+      angular.element('#navigation').attr('tabIndex', -1).focus();
+    };
+
+    $rootScope.skipToSearch = function() {
+      // angular.element('#search').attr('tabIndex', -1).focus();
+      angular.element('#articleQueryFilter').attr('tabIndex', -1).focus();
+    };
+
+    $rootScope.skipToFooter = function() {
+      angular.element('#footer').attr('tabIndex', -1).focus();
+    };
+
+    $rootScope.actionContrast = function() {
+      // toggle contrast
       contrast = !contrast;
       $cookies.put('dialoga_contraste', contrast);
       adjustContrast(contrast);
diff --git a/src/app/index.scss b/src/app/index.scss
index f52e45b..e4bf1ea 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -44,21 +44,9 @@ body {
             color: #fff;
             background-color: #000;
         }
-
-        .skip-links a:focus {
-            background-color: #000 !important;
-            border-color: #fff;
-        }
     }
 }
 
-
-.skip-links a:focus {
-  background-color: #fff !important;
-  opacity: 1;
-  z-index: 2;
-}
-
 // Commons
 .button--themed {
     padding: 20px;
diff --git a/src/app/pages/header/header.html b/src/app/pages/header/header.html
index 890c502..185609e 100644
--- a/src/app/pages/header/header.html
+++ b/src/app/pages/header/header.html
@@ -4,9 +4,6 @@
     <div class="col-sm-12">
 
       <div class="accessibility-wrapper">
-        <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
-          <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
-        </button>
 
         <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
           <span class="icon icon-user"></span>
diff --git a/src/index.html b/src/index.html
index 5185555..4b781ef 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,9 +23,6 @@
   </head>
   <body ng-cloak>
 
-    <div class="skip-links">
-      <a href="#content" class="sr-only sr-only-focusable btn btn-link" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
-    </div>
 
     <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
       <ul id="menu-barra-temp" style="list-style:none;">
@@ -34,6 +31,8 @@
       </ul>
     </div>
 
+    <a11y-bar></a11y-bar>
+
     <!--[if lt IE 9]>
       <p class="browsehappy">Você está usando um navegador <strong>antigo</strong>. Por favor, <a href="http://browsehappy.com/">atualize o navegador</a> para melhorar a experiência de uso.</p>
     <![endif]-->
--
libgit2 0.21.2