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:
Olli.Pettay%helsinki.fi
2007-01-23 08:27:00 +00:00
parent 506d091582
commit 5cf7b7c2d2
8 changed files with 94 additions and 10 deletions

View File

@@ -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>

View File

@@ -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();

View File

@@ -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();

View File

@@ -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>

View File

@@ -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;"/>

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -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 {