Download as
Browse Code »

Commit 7cd9870b5d1670998d47fbb1060465e56977bae3

Authored by Leonardo Merlin
1 parent 5a1e77d6
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Add a11y component (a11y-bar)

Showing 8 changed files with 97 additions and 20 deletions   Show diff stats
src/app/components/a11y-bar/a11y-bar.html 0 → 100644
  Diff comments   View file @7cd9870
@@ -0,0 +1,48 @@ @@ -0,0 +1,48 @@
  1 +<div class="a11y-bar">
  2 + <div class="container">
  3 + <div class="row">
  4 + <div class="col-sm-6">
  5 + <ul class="skip-links list-inline list-unstyled">
  6 + <li>
  7 + <a accesskey="1" href="#content" id="skip-to-content" ng-click="skipToContent($event)">
  8 + Ir para o conteúdo
  9 + <span>1</span>
  10 + </a>
  11 + </li>
  12 + <li>
  13 + <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="skipToNavigation($event)">
  14 + Ir para o menu
  15 + <span>2</span>
  16 + </a>
  17 + </li>
  18 + <li>
  19 + <a accesskey="3" href="#search" id="skip-to-search" ng-click="skipToSearch($event)">
  20 + Ir para a busca
  21 + <span>3</span>
  22 + </a>
  23 + </li>
  24 + <li class="last-item">
  25 + <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="skipToFooter($event)">
  26 + Ir para o rodapé
  27 + <span>4</span>
  28 + </a>
  29 + </li>
  30 + </ul>
  31 + </div>
  32 +
  33 + <div class="col-sm-6">
  34 + <ul class="action-links list-inline list-unstyled pull-right">
  35 + <li id="siteaction-accessibility">
  36 + <a href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
  37 + </li>
  38 + <li id="siteaction-contraste">
  39 + <a href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
  40 + </li>
  41 + <li id="siteaction-mapadosite" class="last-item">
  42 + <a ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
  43 + </li>
  44 + </ul>
  45 + </div>
  46 + </div>
  47 + </div>
  48 +</div>
src/app/components/a11y-bar/a11y-bar.scss 0 → 100644
  Diff comments   View file @7cd9870
@@ -0,0 +1,8 @@ @@ -0,0 +1,8 @@
  1 +.a11y-bar {
  2 + font-size: 12px;
  3 + padding: 5px 0;
  4 + span {
  5 + background-color: #eee;
  6 + padding: 0 3px;
  7 + }
  8 +}
src/app/components/a11y-bar/a11yBar.directive.js 0 → 100644
  Diff comments   View file @7cd9870
@@ -0,0 +1,19 @@ @@ -0,0 +1,19 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('a11yBar', a11yBar);
  7 +
  8 + /** @ngInject */
  9 + function a11yBar() {
  10 + var directive = {
  11 + restrict: 'E',
  12 + templateUrl: 'app/components/a11y-bar/a11y-bar.html'
  13 + };
  14 +
  15 + return directive;
  16 +
  17 + }
  18 +
  19 +})();
src/app/components/navbar/navbar.html
  Diff comments   View file @7cd9870
1 -<nav class="header-navbar navbar navbar-static-top"> 1 +<nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
2 <div class="container-fluid"> 2 <div class="container-fluid">
3 <div class="navbar-header"> 3 <div class="navbar-header">
4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
src/app/index.run.js
  Diff comments   View file @7cd9870
@@ -51,7 +51,25 @@ @@ -51,7 +51,25 @@
51 angular.element(bodyEl).toggleClass('contraste', !!state); 51 angular.element(bodyEl).toggleClass('contraste', !!state);
52 } 52 }
53 53
54 - $rootScope.toggleContrast = function() { 54 + $rootScope.skipToContent = function() {
  55 + angular.element('#content').attr('tabIndex', -1).focus();
  56 + };
  57 +
  58 + $rootScope.skipToNavigation = function() {
  59 + angular.element('#navigation').attr('tabIndex', -1).focus();
  60 + };
  61 +
  62 + $rootScope.skipToSearch = function() {
  63 + // angular.element('#search').attr('tabIndex', -1).focus();
  64 + angular.element('#articleQueryFilter').attr('tabIndex', -1).focus();
  65 + };
  66 +
  67 + $rootScope.skipToFooter = function() {
  68 + angular.element('#footer').attr('tabIndex', -1).focus();
  69 + };
  70 +
  71 + $rootScope.actionContrast = function() {
  72 + // toggle contrast
55 contrast = !contrast; 73 contrast = !contrast;
56 $cookies.put('dialoga_contraste', contrast); 74 $cookies.put('dialoga_contraste', contrast);
57 adjustContrast(contrast); 75 adjustContrast(contrast);
src/app/index.scss
  Diff comments   View file @7cd9870
@@ -44,21 +44,9 @@ body { @@ -44,21 +44,9 @@ body {
44 color: #fff; 44 color: #fff;
45 background-color: #000; 45 background-color: #000;
46 } 46 }
47 -  
48 - .skip-links a:focus {  
49 - background-color: #000 !important;  
50 - border-color: #fff;  
51 - }  
52 } 47 }
53 } 48 }
54 49
55 -  
56 -.skip-links a:focus {  
57 - background-color: #fff !important;  
58 - opacity: 1;  
59 - z-index: 2;  
60 -}  
61 -  
62 // Commons 50 // Commons
63 .button--themed { 51 .button--themed {
64 padding: 20px; 52 padding: 20px;
src/app/pages/header/header.html
  Diff comments   View file @7cd9870
@@ -4,9 +4,6 @@ @@ -4,9 +4,6 @@
4 <div class="col-sm-12"> 4 <div class="col-sm-12">
5 5
6 <div class="accessibility-wrapper"> 6 <div class="accessibility-wrapper">
7 - <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">  
8 - <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste  
9 - </button>  
10 7
11 <button type="button" class="btn btn-link pull-right" ui-sref="entrar"> 8 <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
12 <span class="icon icon-user"></span> 9 <span class="icon icon-user"></span>
src/index.html
  Diff comments   View file @7cd9870
@@ -23,9 +23,6 @@ @@ -23,9 +23,6 @@
23 </head> 23 </head>
24 <body ng-cloak> 24 <body ng-cloak>
25 25
26 - <div class="skip-links">  
27 - <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>  
28 - </div>  
29 26
30 <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;"> 27 <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
31 <ul id="menu-barra-temp" style="list-style:none;"> 28 <ul id="menu-barra-temp" style="list-style:none;">
@@ -34,6 +31,8 @@ @@ -34,6 +31,8 @@
34 </ul> 31 </ul>
35 </div> 32 </div>
36 33
  34 + <a11y-bar></a11y-bar>
  35 +
37 <!--[if lt IE 9]> 36 <!--[if lt IE 9]>
38 <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> 37 <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>
39 <![endif]--> 38 <![endif]-->