Bug 361997, Keyboard navigation problems with date picker, p=surkov, r=aaronr,me
git-svn-id: svn://10.0.0.236/trunk@218796 18797224-902f-48f8-a5cc-f745e15eee43
This commit is contained in:
@@ -216,6 +216,7 @@
|
||||
title="&xforms.datepicker.title;"/>
|
||||
</html:span>
|
||||
<html:span mozType:calendar="true" anonid="picker"
|
||||
internaltabhandling="true"
|
||||
style="position:absolute; display:none;"/>
|
||||
<children/>
|
||||
</content>
|
||||
|
||||
@@ -255,6 +255,9 @@
|
||||
<body>
|
||||
this.popup.hidePopup();
|
||||
this._isPickerVisible = false;
|
||||
|
||||
this.ownerDocument.defaultView.setTimeout(
|
||||
function(control) { control.focus(); }, 0, this.control);
|
||||
</body>
|
||||
</method>
|
||||
|
||||
@@ -310,10 +313,17 @@
|
||||
this.picker.value = this.control.value;
|
||||
</handler>
|
||||
|
||||
<handler event="popupshown">
|
||||
this.ownerDocument.defaultView.setTimeout(
|
||||
function(picker) { picker.focus();} , 0, this.picker);
|
||||
</handler>
|
||||
|
||||
<handler event="keypress">
|
||||
<![CDATA[
|
||||
if (event.keyCode == event.DOM_VK_F4) {
|
||||
this.togglePicker();
|
||||
} else if (event.keyCode == event.DOM_VK_ESCAPE) {
|
||||
this.hidePicker();
|
||||
} else if (event.altKey && (event.keyCode == event.DOM_VK_DOWN ||
|
||||
event.keyCode == event.DOM_VK_UP)) {
|
||||
this.togglePicker();
|
||||
|
||||
@@ -65,7 +65,6 @@
|
||||
/><html:input mozType:dropmarker="true"
|
||||
type="button"
|
||||
anonid="dropmarker"
|
||||
tabindex="-1"
|
||||
onmousedown="this.parentNode.parentNode.shouldHandleBlur = false;"
|
||||
onmouseup="this.parentNode.parentNode.shouldHandleBlur = true;"
|
||||
onclick="this.parentNode.parentNode.togglePopup();
|
||||
|
||||
@@ -214,6 +214,28 @@
|
||||
</method>
|
||||
|
||||
<!-- private -->
|
||||
<method name="getFocusedElement">
|
||||
<body>
|
||||
var selection = this.ownerDocument.defaultView.getSelection();
|
||||
if (!selection)
|
||||
return null;
|
||||
|
||||
var focused = selection.focusNode;
|
||||
if (!focused)
|
||||
return null;
|
||||
|
||||
// focusNode returns html:td if focused element is inside table cell
|
||||
// (see bug 365900).
|
||||
if (focused.localName != "input") {
|
||||
input = focused.getElementsByTagNameNS(this.XHTML_NS, "input")[0];
|
||||
if (input)
|
||||
return input;
|
||||
}
|
||||
|
||||
return focused;
|
||||
</body>
|
||||
</method>
|
||||
|
||||
<property name="dateLabel" readonly="true">
|
||||
<getter>
|
||||
if (!this._dateLabel) {
|
||||
@@ -249,7 +271,7 @@
|
||||
</implementation>
|
||||
|
||||
<handlers>
|
||||
<handler event="keypress">
|
||||
<handler event="keypress" phase="capturing">
|
||||
<![CDATA[
|
||||
var target = event.originalTarget;
|
||||
|
||||
@@ -289,6 +311,44 @@
|
||||
break;
|
||||
}
|
||||
</handler>
|
||||
|
||||
<handler event="keypress" keycode="VK_TAB">
|
||||
if (!this.hasAttribute("internaltabhandling"))
|
||||
return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var focused = getFocusedElement();
|
||||
if (!focused)
|
||||
return;
|
||||
|
||||
if (focused == this.backButton) {
|
||||
this.fwdButton.focus();
|
||||
} else if (focused == this.fwdButton) {
|
||||
this.focus();
|
||||
} else {
|
||||
this.backButton.focus();
|
||||
}
|
||||
</handler>
|
||||
|
||||
<handler event="keypress" keycode="VK_TAB" modifiers="shift">
|
||||
if (!this.hasAttribute("internaltabhandling"))
|
||||
return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var focused = getFocusedElement();
|
||||
if (!focused)
|
||||
return;
|
||||
|
||||
if (focused == this.backButton) {
|
||||
this.focus();
|
||||
} else if (focused == this.fwdButton) {
|
||||
this.backButton.focus();
|
||||
} else {
|
||||
this.fwdButton.focus();
|
||||
}
|
||||
</handler>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
@@ -742,6 +802,8 @@
|
||||
|
||||
<!-- DROPMARKER -->
|
||||
<binding id="dropmarker">
|
||||
<content tabindex="-1"/>
|
||||
|
||||
<resources>
|
||||
<stylesheet src="chrome://xforms/skin/widgets-xhtml.css"/>
|
||||
</resources>
|
||||
|
||||
@@ -195,7 +195,8 @@
|
||||
|
||||
<handler event="keypress" phase="capturing">
|
||||
// Stop event propagation to prevent event processing of
|
||||
// xul:toolbarbutton.
|
||||
// button binding, i.e. to prevent default behaviour of button
|
||||
// that is to advance/rewind focus on arrow keys.
|
||||
switch (event.keyCode) {
|
||||
case event.DOM_VK_UP:
|
||||
case event.DOM_VK_DOWN:
|
||||
@@ -217,7 +218,7 @@
|
||||
<xul:hbox>
|
||||
<!-- month selection section -->
|
||||
<xul:hbox class="list" flex="1">
|
||||
<xul:description anonid="months-label" readonly="true" flex="1"/>
|
||||
<xul:description anonid="months-label" flex="1"/>
|
||||
<xul:vbox class="control-buttons-box">
|
||||
<xul:toolbarbutton anonid="prevmonth-btn" class="toolbarbutton-up"
|
||||
tooltiptext="&xforms.datepicker.prevMonth.title;"/>
|
||||
|
||||
@@ -385,7 +385,7 @@
|
||||
}
|
||||
|
||||
dayElm = this._dayElements[aIndex];
|
||||
dayElm.setAttribute("tabindex", "0");
|
||||
dayElm.setAttribute("tabindex", "1");
|
||||
|
||||
this._currentDayIndex = aIndex;
|
||||
</body>
|
||||
@@ -491,6 +491,13 @@
|
||||
}
|
||||
]]>
|
||||
</handler>
|
||||
|
||||
<handler event="keypress" keycode="VK_PAGE_UP">
|
||||
this.month++;
|
||||
</handler>
|
||||
<handler event="keypress" keycode="VK_PAGE_DOWN">
|
||||
this.month--;
|
||||
</handler>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
|
||||
@@ -76,6 +76,10 @@ span[mozType|calendar] td.currentMonth:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span[mozType|calendar] td:focus {
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
|
||||
span[mozType|calendar] td[selected] {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
@@ -47,12 +47,12 @@ box[mozType|calendar] {
|
||||
border: 1px outset black !important;
|
||||
}
|
||||
|
||||
box[mozType|calendar] toolbarbutton {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
box[mozType|calendar] toolbarbutton:focus {
|
||||
border: 1px dotted ThreeDDarkShadow !important;
|
||||
-moz-border-top-colors: none !important;
|
||||
-moz-border-right-colors: none !important;
|
||||
-moz-border-bottom-colors: none !important;
|
||||
-moz-border-left-colors: none !important;
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
|
||||
.prevMonth, .nextMonth {
|
||||
|
||||
Reference in New Issue
Block a user