Improve 'go-to-content' link

Leonardo Merlin
1 parent a05c0468
Showing 7 changed files with 44 additions and 31 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 handleAccessibility($rootScope, $timeout, $log) {
+
+    $log.debug('handleAccessibility');
+
+    $rootScope.focusMainContent = function ($event) {
+
+      // prevent skip link from redirecting
+      if ($event) { $event.preventDefault(); }
+
+      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 end');
@@ -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';
@@ -10,31 +9,19 @@
   function HeaderController($timeout, $log) {
     $log.debug('HeaderController');
-    this.$timeout = $timeout;
-    this.$log = $log;
+    var vm = this;
-    this.contrast = false;
+    vm.$timeout = $timeout;
+    vm.$log = $log;
+
+    vm.contrast = false;
   }
   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']");
+    var vm = this;
-    if ( mainContentArea ) {
-      this.$timeout(function(){
-        mainContentArea.focus();
-      },90);
-    }else{
-      this.$log.warn('role="main" not found.');
-    }
+    vm.contrast = !vm.contrast;
+    vm.$log.debug('contrast', vm.contrast);
   };
 })();
 <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()">
@@ -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 */
		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	function runBlock($log) {	33	function runBlock($log) {
10		34
11	$log.debug('runBlock end');	35	$log.debug('runBlock end');
	@@ -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,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>