add aria attributes + restructure some js to change the aria attributes

view/theme/frio/js/filebrowser.js

@@ -81,13 +81,13 @@ var FileBrowser = {
 			var destination = h.split("-")[0];
 			FileBrowser.id = h.split("-")[1];
 			FileBrowser.event = FileBrowser.event + "." + destination;
-			if (destination == "comment") {
+			if (destination === "comment") {
 				// Get the comment textimput field
 				var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
 			}
 		};
 
-		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id);
+		console.log("FileBrowser: " + nickname,  type, FileBrowser.event, FileBrowser.id);
 
 		FileBrowser.postLoad();
 
@@ -110,10 +110,10 @@ var FileBrowser = {
 			e.preventDefault();
 
 			var embed = "";
-			if (FileBrowser.type == "image") {
+			if (FileBrowser.type === "image") {
 				embed = "[url=" + this.dataset.link + "][img]" + this.dataset.img + "[/img][/url]";
 			}
-			if (FileBrowser.type == "file") {
+			if (FileBrowser.type === "file") {
 				// attachment links are "baseurl/attach/id"; we need id
 				embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/attachment]";
 			}
@@ -123,7 +123,7 @@ var FileBrowser = {
 			// work as expected (we need a way to wait until commentOpenUI would be finished).
 			// As for now we insert pieces of this function here
 			if ((commentElm !== null) && (typeof commentElm !== "undefined")) {
-				if (commentElm.value == "") {
+				if (commentElm.value === "") {
 					$("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
 					$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
 					$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');

view/theme/frio/js/modal.js

@@ -59,7 +59,7 @@ $(document).ready(function(){
 	});
 
 	// Jot nav menu.
-	$("body").on("click", "#jot-modal .jot-nav li a", function(e){
+	$("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function(e){
 		e.preventDefault();
 		toggleJotNav(this);
 	});
@@ -306,10 +306,37 @@ function jotreset() {
 
 // Give the active "jot-nav" list element the class "active"
 function toggleJotNav (elm) {
-	// select all li of jot-nav and remove the active class
+	// Get the ID of the tab panel which should be activated
-	$(".jot-nav li").removeClass("active");
+	var tabpanel = elm.getAttribute("aria-controls");
-	// add the active class to the parent of the link which was selected
+	var cls = hasClass(elm, "jot-nav-lnk-mobile");
+
+	// Select all li of jot-nav and remove the active class
+	$(elm).parent("li").siblings("li").removeClass("active");
+	// Add the active class to the parent of the link which was selected
 	$(elm).parent("li").addClass("active");
+
+	// Minimize all tab content wrapper and activate only the selected
+	// tab panel
+	$('#jot-modal [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
+	$('#jot-modal #' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
+
+	// Set the aria-selected states
+	$("#jot-modal .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
+	elm.setAttribute("aria-selected", "true");
+
+	// For some some tab panels we need to execute other js functions
+	if (tabpanel === "jot-preview-content") {
+		preview_post();
+	} else if (tabpanel === "jot-fbrowser-wrapper") {
+		$(function() {
+			Dialog.showJot();
+		});
+	}
+
+	// If element is a mobile dropdown nav menu we need to change the botton text
+	if (cls) {
+		toggleDropdownText(elm);
+	}
 }
 
 // Wall Message needs a special handling because in some cases

view/theme/frio/js/theme.js

@@ -208,11 +208,8 @@ $(document).ready(function(){
 
 	// Dropdown menus with the class "dropdown-head" will display the active tab
 	// as button text
-	$("body").on('click', '.dropdown-head .dropdown-menu li a', function(){
+	$("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
-		$(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
+		toggleDropdownText(this);
-		$(this).closest(".dropdown").find('.btn').val($(this).data('value'));
-		$(this).closest("ul").children("li").show();
-		$(this).parent("li").hide();
 	});
 
 	/* setup onoff widgets */
@@ -688,3 +685,17 @@ function bin2hex (s) {
 
 	return o;
 }
+
+// Dropdown menus with the class "dropdown-head" will display the active tab
+// as button text
+function toggleDropdownText(elm) {
+		$(elm).closest(".dropdown").find('.btn').html($(elm).text() + ' <span class="caret"></span>');
+		$(elm).closest(".dropdown").find('.btn').val($(elm).data('value'));
+		$(elm).closest("ul").children("li").show();
+		$(elm).parent("li").hide();
+}
+
+// Check if element does have a specific class
+function hasClass(elem, cls) {
+	return (" " + elem.className + " " ).indexOf( " "+cls+" " ) > -1;
+}

view/theme/frio/templates/jot-header.tpl

@@ -280,39 +280,14 @@
 			.modal.show;
 	}
 
-	// the following functions show/hide the specific jot content
+	// Activate the jot text section in the jot modal
-	// in dependence of the selected nav
-	function aclActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize");
-		$(".modal-body #profile-jot-acl-wrapper").removeClass("minimize");
-	}
-
-
-	function previewActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper,.modal-body #jot-fbrowser-wrapper").addClass("minimize");
-		var postPreview = preview_post();
-		if (postPreview && typeof postPreview !== "undefined") {
-			$(".modal-body #jot-preview-content").removeClass("minimize");
-		}
-	}
-
 	function jotActive() {
-		$(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize");
+		// Make sure jot text does have really the active class (we do this because there are some
-		$(".modal-body #profile-jot-wrapper").removeClass("minimize");
+		// other events which trigger jot text (we need to do this for the desktop and mobile
-
+		// jot nav
-		//make sure jot text does have really the active class (we do this because there are some
+		var elem = $("#jot-modal .jot-nav #jot-text-lnk");
-		// other events which trigger jot text
+		var elemMobile = $("#jot-modal .jot-nav #jot-text-lnk-mobile")
-		toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk"));
+		toggleJotNav(elem[0]);
+		toggleJotNav(elemMobile[0]);
 	}
-
-	function fbrowserActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #profile-jot-acl-wrapper").addClass("minimize");
-
-		$(".modal-body #jot-fbrowser-wrapper").removeClass("minimize");
-
-		$(function() {Dialog.showJot();});
-	}
-
-
 </script>
-

view/theme/frio/templates/jot.tpl

@@ -12,48 +12,48 @@
 			<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">&times;</button>
 
 			{{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
-			<ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
+			<ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">
 				{{* Mark the first list entry as active because it is the first which is active after opening
 					the modal. Changing of the activity status is done by js in jot.tpl-header *}}
-				<li class="active" role="menuitem">
+				<li class="active" role="presentation">
-					<a href="#profile-jot-wrapper" class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
+					<a href="#profile-jot-wrapper" class="jot-text-lnk jot-nav-lnk" id="jot-text-lnk" role="tab" aria-controls="profile-jot-wrapper" aria-selected="true">{{$message}}</a>
 				</li>
 				{{if $acl}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
+					<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk jot-nav-lnk" id="jot-perms-lnk" role="tab" aria-controls="profile-jot-acl-wrapper" aria-selected="false">{{$shortpermset}}</a>
 				</li>
 				{{/if}}
 				{{if $preview}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a href="#jot-preview-content" class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
+					<a href="#jot-preview-content" class="jot-preview-lnk jot-nav-lnk" id="jot-preview-lnk" role="tab" aria-controls="jot-preview-content" aria-selected="false">{{$preview}}</a>
 				</li>
 				{{/if}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
+					<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk jot-nav-lnk" id="jot-browser-link" role="tab" aria-controls="jot-fbrowser-wrapper" aria-selected="false">{{$browser}}</a>
 				</li>
 			</ul>
 
 			{{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
 			<div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
-				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{$message}}&nbsp;<span class="caret"></span></button>
+				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}}&nbsp;<span class="caret"></span></button>
-				<ul class="dropdown-menu nav nav-pills">
+				<ul class="dropdown-menu nav nav-pills" aria-label="submenu">
 					{{* mark the first list entry as active because it is the first which is active after opening
 					the modal. Changing of the activity status is done by js in jot.tpl-header *}}
-					<li role="menuitem" style="display: none;">
+					<li role="presentation" style="display: none;">
-						<button class="jot-text-lnk btn-link" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</button>
+						<button class="jot-text-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-text-lnk-mobile" aria-controls="profile-jot-wrapper" role="menuitem" aria-selected="true">{{$message}}</button>
 					</li>
 					{{if $acl}}
-					<li role="menuitem">
+					<li role="presentation">
-						<button class="jot-perms-lnk btn-link" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</button>
+						<button class="jot-perms-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-perms-lnk-mobile" aria-controls="profile-jot-acl-wrapper" role="menuitem" aria-selected="false">{{$shortpermset}}</button>
 					</li>
 					{{/if}}
 					{{if $preview}}
-					<li role="menuitem">
+					<li role="presentation">
-						<button class="jot-preview-lnk btn-link" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</button>
+						<button class="jot-preview-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-preview-lnk-mobile" aria-controls="jot-preview-content" role="menuitem" aria-selected="false">{{$preview}}</button>
 					</li>
 					{{/if}}
-					<li role="menuitem">
+					<li role="presentation">
-						<button class="jot-browser-lnk-mobile btn-link" id="jot-browser-lnk-mobile" onclick="fbrowserActive(); return false;">{{$browser}}</button>
+						<button class="jot-browser-lnk-mobile btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-browser-lnk-mobile" aria-controls="jot-fbrowser-wrapper" role="menuitem" aria-selected="false">{{$browser}}</button>
 					</li>
 				</ul>
 			</div>
@@ -62,7 +62,7 @@
 
 		<div id="jot-modal-body" class="modal-body">
 			<form id="profile-jot-form" action="{{$action}}" method="post">
-				<div id="profile-jot-wrapper">
+				<div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
 					<div>
 						<!--<div id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
 					</div>
@@ -112,14 +112,14 @@
 
 				</div>
 
-				<div id="profile-jot-acl-wrapper" class="minimize">
+				<div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
 					{{$acl}}
 				</div>
 
-				<div id="jot-preview-content" class="minimize"></div>
+				<div id="jot-preview-content" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true"></div>
 			</form>
 
-			<div id="jot-fbrowser-wrapper" class="minimize"></div>
+			<div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
 
 			{{if $content}}<script>initEditor();</script>{{/if}}
 		</div>