Download as
Browse Code »

Commit c89da34976b008a8218258b198ba3072ea717b27

Authored by Leonardo Merlin
1 parent a05c0468
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

Improve 'go-to-content' link

Showing 7 changed files with 44 additions and 31 deletions   Show diff stats
src/app/index.run.js
  Diff comments   View file @c89da34
  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 */
  11 + function handleAccessibility($rootScope, $timeout, $log) {
  12 +
  13 + $log.debug('handleAccessibility');
  14 +
  15 + $rootScope.focusMainContent = function ($event) {
  16 +
  17 + // prevent skip link from redirecting
  18 + if ($event) { $event.preventDefault(); }
  19 +
  20 + var mainContentArea = document.querySelector('[role="main"]');
  21 +
  22 + if ( mainContentArea ) {
  23 + $timeout(function(){
  24 + mainContentArea.focus();
  25 + },90);
  26 + }else{
  27 + $log.warn('role="main" not found.');
  28 + }
  29 + };
  30 + }
  31 +
  32 + /** @ngInject */
9 33 function runBlock($log) {
10 34  
11 35 $log.debug('runBlock end');
... ...
src/app/index.scss
  Diff comments   View file @c89da34
... ... @@ -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 @c89da34
1   -/* globals document:true*/
2 1 (function() {
3 2 'use strict';
4 3  
... ... @@ -10,31 +9,19 @@
10 9 function HeaderController($timeout, $log) {
11 10 $log.debug('HeaderController');
12 11  
13   - this.$timeout = $timeout;
14   - this.$log = $log;
  12 + var vm = this;
15 13  
16   - this.contrast = false;
  14 + vm.$timeout = $timeout;
  15 + vm.$log = $log;
  16 +
  17 + vm.contrast = false;
17 18 }
18 19  
19 20 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']");
  21 + var vm = this;
30 22  
31   - if ( mainContentArea ) {
32   - this.$timeout(function(){
33   - mainContentArea.focus();
34   - },90);
35   - }else{
36   - this.$log.warn('role="main" not found.');
37   - }
  23 + vm.contrast = !vm.contrast;
  24 + vm.$log.debug('contrast', vm.contrast);
38 25 };
39 26  
40 27 })();
... ...
src/app/partials/header/header.html
  Diff comments   View file @c89da34
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 5 <button type="button" id="display-contrast" class="btn btn-link" ng-click="header.toggleContrast()">
... ...
src/app/partials/header/header.scss
  Diff comments   View file @c89da34
... ... @@ -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 @c89da34
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 @c89da34
... ... @@ -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>
... ...