From: rabuzarus <>
Date: Wed, 5 Apr 2017 09:46:42 +0000 (+0200)
Subject: add aria attributes + restructure some js to change the aria attributes
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=0542cd6a14735e0a4dd7270ad5b6986c5f5dff55;p=friendica.git
add aria attributes + restructure some js to change the aria attributes
---
diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js
index 468188b356..77e9e50881 100644
--- a/view/theme/frio/js/filebrowser.js
+++ b/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');
diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js
index b77f621617..1fd03ddfac 100644
--- a/view/theme/frio/js/modal.js
+++ b/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
- $(".jot-nav li").removeClass("active");
- // add the active class to the parent of the link which was selected
+ // Get the ID of the tab panel which should be activated
+ var tabpanel = elm.getAttribute("aria-controls");
+ 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
diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 8a3bd41109..00f9691016 100644
--- a/view/theme/frio/js/theme.js
+++ b/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(){
- $(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
- $(this).closest(".dropdown").find('.btn').val($(this).data('value'));
- $(this).closest("ul").children("li").show();
- $(this).parent("li").hide();
+ $("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
+ toggleDropdownText(this);
});
/* 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;
+}
diff --git a/view/theme/frio/templates/jot-header.tpl b/view/theme/frio/templates/jot-header.tpl
index 6aad9889d1..d52f4b98de 100644
--- a/view/theme/frio/templates/jot-header.tpl
+++ b/view/theme/frio/templates/jot-header.tpl
@@ -280,39 +280,14 @@
.modal.show;
}
- // the following functions show/hide the specific jot content
- // 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");
- }
- }
-
+ // Activate the jot text section in the jot modal
function jotActive() {
- $(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize");
- $(".modal-body #profile-jot-wrapper").removeClass("minimize");
-
- //make sure jot text does have really the active class (we do this because there are some
- // other events which trigger jot text
- toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk"));
+ // Make sure jot text does have really the active class (we do this because there are some
+ // other events which trigger jot text (we need to do this for the desktop and mobile
+ // jot nav
+ var elem = $("#jot-modal .jot-nav #jot-text-lnk");
+ var elemMobile = $("#jot-modal .jot-nav #jot-text-lnk-mobile")
+ 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>
-
diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl
index 36e0f77972..2ebd1c1ddc 100644
--- a/view/theme/frio/templates/jot.tpl
+++ b/view/theme/frio/templates/jot.tpl
@@ -12,48 +12,48 @@
<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">×</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">
- <a href="#profile-jot-wrapper" class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
+ <li class="active" role="presentation">
+ <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">
- <a href="#profile-jot-acl-wrapper" class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
+ <li role="presentation">
+ <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">
- <a href="#jot-preview-content" class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
+ <li role="presentation">
+ <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">
- <a href="#jot-fbrowser-wrapper" class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
+ <li role="presentation">
+ <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}} <span class="caret"></span></button>
- <ul class="dropdown-menu nav nav-pills">
+ <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}} <span class="caret"></span></button>
+ <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;">
- <button class="jot-text-lnk btn-link" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</button>
+ <li role="presentation" style="display: none;">
+ <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">
- <button class="jot-perms-lnk btn-link" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</button>
+ <li role="presentation">
+ <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">
- <button class="jot-preview-lnk btn-link" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</button>
+ <li role="presentation">
+ <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">
- <button class="jot-browser-lnk-mobile btn-link" id="jot-browser-lnk-mobile" onclick="fbrowserActive(); return false;">{{$browser}}</button>
+ <li role="presentation">
+ <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"> </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>