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 @@
  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 @@
  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 @@
  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 2 <div class="container-fluid">
3 3 <div class="navbar-header">
4 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 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 73 contrast = !contrast;
56 74 $cookies.put('dialoga_contraste', contrast);
57 75 adjustContrast(contrast);
... ...
src/app/index.scss
  Diff comments   View file @7cd9870
... ... @@ -44,21 +44,9 @@ body {
44 44 color: #fff;
45 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 50 // Commons
63 51 .button--themed {
64 52 padding: 20px;
... ...
src/app/pages/header/header.html
  Diff comments   View file @7cd9870
... ... @@ -4,9 +4,6 @@
4 4 <div class="col-sm-12">
5 5  
6 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 8 <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
12 9 <span class="icon icon-user"></span>
... ...
src/index.html
  Diff comments   View file @7cd9870
... ... @@ -23,9 +23,6 @@
23 23 </head>
24 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 27 <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
31 28 <ul id="menu-barra-temp" style="list-style:none;">
... ... @@ -34,6 +31,8 @@
34 31 </ul>
35 32 </div>
36 33  
  34 + <a11y-bar></a11y-bar>
  35 +
37 36 <!--[if lt IE 9]>
38 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 38 <![endif]-->
... ...