[Bug 750268] The content inside of #tabzilla-contents should not recieve focus when tabzilla is closed #23

Merged
merged 18 commits into from May 18, 2012
View
@@ -91,6 +91,9 @@
overflow: hidden;
direction: ltr;
}
+#tabzilla-panel:focus{
+ outline:none;
+}
#tabzilla-panel.tabzilla-opened {
height: 200px;
@@ -105,6 +108,12 @@
left: 50%;
margin-left: -486px;
right: 0;
+ display:none;
+}
+
+.tabzilla-opened #tabzilla-contents,
+#tabzilla-panel.open #tabzilla-contents{
+ display:block;
}
* html #tabzilla-contents { zoom: 1; } /* IE6 */
@@ -250,6 +259,19 @@
border-color: #999;
}
+#tabzilla-search label{
+ position:absolute;
+ left:-10000px;
+ top:auto;
+ width:1px;
+ height:1px;
+ overflow:hidden;
+}
+.html-rtl #tabzilla-search label{
+ left:auto;
+ right:-10000px;
+}
+
#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input::-webkit-input-placeholder { color: #ddd; }
#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:-moz-placeholder { color: #ddd; }
View
@@ -86,6 +86,10 @@ Tabzilla.READY_POLL_INTERVAL = 40;
Tabzilla.readyInterval = null;
Tabzilla.jQueryCDNSrc =
'//www.mozilla.org/media/js/libs/jquery-1.7.1.min.js';
+Tabzilla.LINK_TITLE = {
+ CLOSED: "Click to open up a section with even more interesting mozilla links",
+ OPENED: "Click again or press the escape key to close"
+}
Tabzilla.hasCSSTransitions = (function() {
var div = document.createElement('div');
@@ -253,7 +257,33 @@ Tabzilla.init = function()
Tabzilla.$panel.removeClass('tabzilla-opened');
Tabzilla.$link.removeClass('tabzilla-opened');
+ Tabzilla.$panel.attr("tabindex","-1");
+ Tabzilla.$link.attr({
+ "role": "button",
+ "aria-expanded": "false",
+ "aria-controls": Tabzilla.$panel.attr("id"),
+ "title": Tabzilla.LINK_TITLE.CLOSED
+ });
+
Tabzilla.opened = false;
+
+ jQuery(document).keydown(function(e) {
+ if (e.which === 27 && Tabzilla.opened) {
+ Tabzilla.toggle();
+ }
+ });
+ Tabzilla.$link.keypress(function(e) {
+ if (e.which === 32) {
+ Tabzilla.toggle();
+ Tabzilla.preventDefault(e);
+ }
+ });
+ Tabzilla.$panel.keypress(function(e) {
+ if (e.which === 13) {
+ Tabzilla.toggle();
+ Tabzilla.$link.focus();
+ }
+ });
};
Tabzilla.buildPanel = function()
@@ -304,9 +334,14 @@ Tabzilla.open = function()
Tabzilla.$link.removeClass('tabzilla-closed');
} else {
// jQuery animation fallback
- jQuery(Tabzilla.panel).animate({ height: 200 }, 200, 'easeInOut');
+ jQuery(Tabzilla.panel).animate({ height: 200 }, 200, 'easeInOut').toggleClass("open");;
}
-
+
+ Tabzilla.$link.attr({
+ "aria-expanded": "true",
+ "title": Tabzilla.LINK_TITLE.OPENED
+ });
+ Tabzilla.$panel.focus();
Tabzilla.opened = true;
};
@@ -323,9 +358,16 @@ Tabzilla.close = function()
Tabzilla.$link.addClass('tabzilla-closed');
} else {
// jQuery animation fallback
- jQuery(Tabzilla.panel).animate({ height: 0 }, 200, 'easeInOut');
+ jQuery(Tabzilla.panel).animate({ height: 0 }, 200, 'easeInOut', function(){
+ $(this).toggleClass("open");
+ });
+
}
+ Tabzilla.$link.attr({
+ "aria-expanded": "false",
+ "title": Tabzilla.LINK_TITLE.CLOSED
+ });
Tabzilla.opened = false;
};
@@ -382,6 +424,7 @@ Tabzilla.content =
+ ' <form title="Search Mozilla sites" action="http://www.google.com/cse">'
+ ' <input type="hidden" value="002443141534113389537:ysdmevkkknw" name="cx">'
+ ' <input type="hidden" value="FORID:0" name="cof">'
+ + ' <label for="q">Search</label>'
+ ' <input type="search" placeholder="Search" id="q" name="q">'
+ ' </form>'
+ ' </li>'