Download as
Browse Code »

Commit d4f5cd96b6297c1b5c67fc9f057ef594fc3dcbcd

Authored by Leonardo Merlin
2 parents a05c0468 5fb24668
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

Merge branch 'a11y'

Showing 7 changed files with 55 additions and 41 deletions   Show diff stats
src/app/index.run.js
  Diff comments   View file @d4f5cd9
  1 +/* globals document:true*/
1 2 (function() {
2 3 'use strict';
3 4  
4 5 angular
5 6 .module('dialoga')
  7 + .run(handleAccessibility)
6 8 .run(runBlock);
7 9  
8 10 /** @ngInject */
9   - function runBlock($log) {
  11 + function handleAccessibility($rootScope, $timeout, $cookies, $log) {
  12 + $log.debug('handleAccessibility');
  13 +
  14 + var contrast = $cookies.get('dialoga_contraste');
  15 + adjustContrast(contrast);
  16 +
  17 + function adjustContrast(state){
  18 + var bodyEl = angular.element(document).find('body');
  19 + angular.element(bodyEl).toggleClass('contraste', !!state);
  20 + }
  21 +
  22 + $rootScope.toggleContrast = function () {
  23 + contrast = !contrast;
  24 + $cookies.put('dialoga_contraste', contrast);
  25 + adjustContrast(contrast);
  26 + };
  27 +
  28 + $rootScope.focusMainContent = function ($event) {
  29 +
  30 + // prevent skip link from redirecting
  31 + if ($event) { $event.preventDefault(); }
10 32  
11   - $log.debug('runBlock end');
  33 + var mainContentArea = document.querySelector('[role="main"]');
  34 +
  35 + if ( mainContentArea ) {
  36 + $timeout(function(){
  37 + mainContentArea.focus();
  38 + },90);
  39 + }else{
  40 + $log.warn('role="main" not found.');
  41 + }
  42 + };
  43 + }
  44 +
  45 + /** @ngInject */
  46 + function runBlock($log) {
  47 + $log.debug('runBlock');
12 48 }
13 49  
14 50 })();
... ...
src/app/index.scss
  Diff comments   View file @d4f5cd9
... ... @@ -12,6 +12,12 @@ $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bo
12 12 // bower:scss
13 13 // endbower
14 14  
  15 +.skip-links a:focus {
  16 + background-color: #fff !important;
  17 + opacity: 1;
  18 + z-index: 2;
  19 +}
  20 +
15 21 .browsehappy {
16 22 margin: 0.2em 0;
17 23 background: #ccc;
... ...
src/app/partials/header/header.controller.js
  Diff comments   View file @d4f5cd9
1   -/* globals document:true*/
2 1 (function() {
3 2 'use strict';
4 3  
... ... @@ -7,34 +6,11 @@
7 6 .controller('HeaderController', HeaderController);
8 7  
9 8 /** @ngInject */
10   - function HeaderController($timeout, $log) {
11   - $log.debug('HeaderController');
  9 + function HeaderController($log) {
  10 + var vm = this;
12 11  
13   - this.$timeout = $timeout;
14   - this.$log = $log;
15   -
16   - this.contrast = false;
  12 + vm.$log = $log;
  13 + vm.$log.debug('HeaderController');
17 14 }
18 15  
19   - HeaderController.prototype.toggleContrast = function () {
20   - this.contrast = !this.contrast;
21   - this.$log.debug('contrast', this.contrast);
22   - };
23   -
24   - HeaderController.prototype.focusMainContent = function ($event) {
25   -
26   - // prevent skip link from redirecting
27   - if ($event) { $event.preventDefault(); }
28   -
29   - var mainContentArea = document.querySelector("[role='main']");
30   -
31   - if ( mainContentArea ) {
32   - this.$timeout(function(){
33   - mainContentArea.focus();
34   - },90);
35   - }else{
36   - this.$log.warn('role="main" not found.');
37   - }
38   - };
39   -
40 16 })();
... ...
src/app/partials/header/header.html
  Diff comments   View file @d4f5cd9
1 1 <header class="container" ng-controller="HeaderController as header">
2 2  
3   - <div class="skip-links">
4   - <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo principal</a>
5   - </div>
6   -
7 3 <div class="row">
8 4 <div class="accessibility-wrapper">
9   - <button type="button" id="display-contrast" class="btn btn-link" ng-click="header.toggleContrast()">
  5 + <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
10 6 <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
11 7 </button>
12 8 </div>
... ...
src/app/partials/header/header.scss
  Diff comments   View file @d4f5cd9
... ... @@ -1,5 +0,0 @@
1   -.skip-links a:focus {
2   - background-color: #fff !important;
3   - opacity: 1;
4   - z-index: 2;
5   -}
src/app/partials/inicio/inicio.html
  Diff comments   View file @d4f5cd9
1   -<section class="container video-wrapper">
  1 +<section class="container video-wrapper" role="main">
2 2 <div class="video-player js-youtube">
3 3 <div class="embed-responsive embed-responsive-16by9">
4 4 <div class="js-iframe" ng-show="inicio.content" ng-bind-html="inicio.content"></div>
... ...
src/index.html
  Diff comments   View file @d4f5cd9
... ... @@ -23,6 +23,11 @@
23 23 <!-- endbuild -->
24 24 </head>
25 25 <body ng-cloak>
  26 +
  27 + <div class="skip-links">
  28 + <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
  29 + </div>
  30 +
26 31 <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
27 32 <ul id="menu-barra-temp" style="list-style:none;">
28 33 <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li>
... ...