Merge branch 'a11y'

Leonardo Merlin
2 parents a05c0468 5fb24668
Showing 7 changed files with 55 additions and 41 deletions Show diff stats
src/app/index.run.js
src/app/index.scss
src/app/partials/header/header.controller.js
src/app/partials/header/header.html
src/app/partials/header/header.scss
src/app/partials/inicio/inicio.html
src/index.html
+/* globals document:true*/
 (function() {
   'use strict';
   angular
     .module('dialoga')
+    .run(handleAccessibility)
     .run(runBlock);
   /** @ngInject */
-  function runBlock($log) {
+  function handleAccessibility($rootScope, $timeout, $cookies, $log) {
+    $log.debug('handleAccessibility');
+
+    var contrast = $cookies.get('dialoga_contraste');
+    adjustContrast(contrast);
+
+    function adjustContrast(state){
+      var bodyEl = angular.element(document).find('body');
+      angular.element(bodyEl).toggleClass('contraste', !!state);
+    }
+
+    $rootScope.toggleContrast = function () {
+      contrast = !contrast;
+      $cookies.put('dialoga_contraste', contrast);
+      adjustContrast(contrast);
+    };
+
+    $rootScope.focusMainContent = function ($event) {
+
+      // prevent skip link from redirecting
+      if ($event) { $event.preventDefault(); }
-    $log.debug('runBlock end');
+      var mainContentArea = document.querySelector('[role="main"]');
+
+      if ( mainContentArea ) {
+        $timeout(function(){
+          mainContentArea.focus();
+        },90);
+      }else{
+        $log.warn('role="main" not found.');
+      }
+    };
+  }
+
+  /** @ngInject */
+  function runBlock($log) {
+    $log.debug('runBlock');
   }
 })();
@@ -12,6 +12,12 @@ $icon-font-path: &quot;../../bower_components/bootstrap-sass-official/assets/fonts/bo
 // bower:scss
 // endbower
+.skip-links a:focus {
+  background-color: #fff !important;
+  opacity: 1;
+  z-index: 2;
+}
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;
-/* globals document:true*/
 (function() {
   'use strict';
@@ -7,34 +6,11 @@
     .controller('HeaderController', HeaderController);
   /** @ngInject */
-  function HeaderController($timeout, $log) {
-    $log.debug('HeaderController');
+  function HeaderController($log) {
+    var vm = this;
-    this.$timeout = $timeout;
-    this.$log = $log;
-
-    this.contrast = false;
+    vm.$log = $log;
+    vm.$log.debug('HeaderController');
   }
-  HeaderController.prototype.toggleContrast = function () {
-    this.contrast = !this.contrast;
-    this.$log.debug('contrast', this.contrast);
-  };
-
-  HeaderController.prototype.focusMainContent = function ($event) {
-
-    // prevent skip link from redirecting
-    if ($event) { $event.preventDefault(); }
-
-    var mainContentArea = document.querySelector("[role='main']");
-
-    if ( mainContentArea ) {
-      this.$timeout(function(){
-        mainContentArea.focus();
-      },90);
-    }else{
-      this.$log.warn('role="main" not found.');
-    }
-  };
-
 })();
 <header class="container" ng-controller="HeaderController as header">
-  <div class="skip-links">
-    <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo principal</a>
-  </div>
-
   <div class="row">
     <div class="accessibility-wrapper">
-      <button type="button" id="display-contrast" class="btn btn-link" ng-click="header.toggleContrast()">
+      <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>
     </div>
@@ -1,5 +0,0 @@
-.skip-links a:focus {
-  background-color: #fff !important;
-  opacity: 1;
-  z-index: 2;
-}
-<section class="container video-wrapper">
+<section class="container video-wrapper" role="main">
   <div class="video-player js-youtube">
     <div class="embed-responsive embed-responsive-16by9">
       <div class="js-iframe" ng-show="inicio.content" ng-bind-html="inicio.content"></div>
@@ -23,6 +23,11 @@
     <!-- endbuild -->
   </head>
   <body ng-cloak>
+
+    <div class="skip-links">
+      <a href="#content" class="sr-only sr-only-focusable" 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;">
         <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>
		1	+/* globals document:true*/
1	(function() {	2	(function() {
2	'use strict';	3	'use strict';
3		4
4	angular	5	angular
5	.module('dialoga')	6	.module('dialoga')
		7	+ .run(handleAccessibility)
6	.run(runBlock);	8	.run(runBlock);
7		9
8	/** @ngInject */	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	})();
	@@ -12,6 +12,12 @@ $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bo		@@ -12,6 +12,12 @@ $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bo
12	// bower:scss	12	// bower:scss
13	// endbower	13	// endbower
14		14
		15	+.skip-links a:focus {
		16	+ background-color: #fff !important;
		17	+ opacity: 1;
		18	+ z-index: 2;
		19	+}
		20	+
15	.browsehappy {	21	.browsehappy {
16	margin: 0.2em 0;	22	margin: 0.2em 0;
17	background: #ccc;	23	background: #ccc;
1	-/* globals document:true*/
2	(function() {	1	(function() {
3	'use strict';	2	'use strict';
4		3
	@@ -7,34 +6,11 @@		@@ -7,34 +6,11 @@
7	.controller('HeaderController', HeaderController);	6	.controller('HeaderController', HeaderController);
8		7
9	/** @ngInject */	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	})();
	@@ -1,5 +0,0 @@	@@ -1,5 +0,0 @@
1	-.skip-links a:focus {
2	- background-color: #fff !important;
3	- opacity: 1;
4	- z-index: 2;
5	-}
1	-<section class="container video-wrapper">	1	+<section class="container video-wrapper" role="main">
2	<div class="video-player js-youtube">	2	<div class="video-player js-youtube">
3	<div class="embed-responsive embed-responsive-16by9">	3	<div class="embed-responsive embed-responsive-16by9">
4	<div class="js-iframe" ng-show="inicio.content" ng-bind-html="inicio.content"></div>	4	<div class="js-iframe" ng-show="inicio.content" ng-bind-html="inicio.content"></div>