WebCore/ChangeLog

 12010-10-01 Yael Aharon <yael.aharon@nokia.com>
 2
 3 Reviewed by NOBODY (OOPS!).
 4
 5 Spatial Navigation: Add support for <input type="radio">
 6 https://bugs.webkit.org/show_bug.cgi?id=46993
 7
 8 When using Spatial Navigation, every radio button should be focusable and
 9 users should be able to navigate from one button to the next without moving the selection.
 10
 11 Tests: fast/events/spatial-navigation/snav-radio-group.html
 12 fast/events/spatial-navigation/snav-radio.html
 13
 14 * html/HTMLInputElement.cpp:
 15 (WebCore::HTMLInputElement::isKeyboardFocusable):
 16 Every radio button should be keyboard focusable, if using Spatial Navigation.
 17 (WebCore::HTMLInputElement::defaultEventHandler):
 18 Disable the algorithm for selecting the next radio button within a group, if using Spatial Navigation.
 19
1202010-10-01 Dan Bernstein <mitz@apple.com>
221
322 Reviewed by Adele Peterson.
68912

WebCore/html/HTMLInputElement.cpp

6565#include "RenderTextControlSingleLine.h"
6666#include "RenderTheme.h"
6767#include "ScriptEventListener.h"
 68#include "Settings.h"
6869#include "StepRange.h"
6970#include "TextEvent.h"
7071#include "WheelEvent.h"

@@bool HTMLInputElement::isKeyboardFocusab
767768 return false;
768769
769770 if (deprecatedInputType() == RADIO) {
 771 // When using Spatial Navigation, every radio button should be focusable.
 772 if (document()->frame() && document()->frame()->settings() && document()->frame()->settings()->isSpatialNavigationEnabled())
 773 return true;
770774
771775 // Never allow keyboard tabbing to leave you in the same radio group. Always
772776 // skip any other elements in the group.

@@void HTMLInputElement::defaultEventHandl
23142318 // Right and down mean "next radio button".
23152319 // Tested in WinIE, and even for RTL, left still means previous radio button (and so moves
23162320 // to the right). Seems strange, but we'll match it.
2317  bool forward = (key == "Down" || key == "Right");
2318 
2319  // We can only stay within the form's children if the form hasn't been demoted to a leaf because
2320  // of malformed HTML.
2321  Node* n = this;
2322  while ((n = (forward ? n->traverseNextNode() : n->traversePreviousNode()))) {
2323  // Once we encounter a form element, we know we're through.
2324  if (n->hasTagName(formTag))
2325  break;
2326 
2327  // Look for more radio buttons.
2328  if (n->hasTagName(inputTag)) {
2329  HTMLInputElement* elt = static_cast<HTMLInputElement*>(n);
2330  if (elt->form() != form())
 2321 // However, when using Spatial Navigation, we need to be able to navigate without changing the selection.
 2322 if (!document()->frame() || !document()->frame()->settings() || !document()->frame()->settings()->isSpatialNavigationEnabled()) {
 2323 bool forward = (key == "Down" || key == "Right");
 2324
 2325 // We can only stay within the form's children if the form hasn't been demoted to a leaf because
 2326 // of malformed HTML.
 2327 Node* n = this;
 2328 while ((n = (forward ? n->traverseNextNode() : n->traversePreviousNode()))) {
 2329 // Once we encounter a form element, we know we're through.
 2330 if (n->hasTagName(formTag))
23312331 break;
 2332
 2333 // Look for more radio buttons.
23322334 if (n->hasTagName(inputTag)) {
2333  HTMLInputElement* inputElt = static_cast<HTMLInputElement*>(n);
2334  if (inputElt->deprecatedInputType() == RADIO && inputElt->name() == name() && inputElt->isFocusable()) {
2335  inputElt->setChecked(true);
2336  document()->setFocusedNode(inputElt);
2337  inputElt->dispatchSimulatedClick(evt, false, false);
2338  evt->setDefaultHandled();
 2335 HTMLInputElement* elt = static_cast<HTMLInputElement*>(n);
 2336 if (elt->form() != form())
23392337 break;
 2338 if (n->hasTagName(inputTag)) {
 2339 HTMLInputElement* inputElt = static_cast<HTMLInputElement*>(n);
 2340 if (inputElt->deprecatedInputType() == RADIO && inputElt->name() == name() && inputElt->isFocusable()) {
 2341 inputElt->setChecked(true);
 2342 document()->setFocusedNode(inputElt);
 2343 inputElt->dispatchSimulatedClick(evt, false, false);
 2344 evt->setDefaultHandled();
 2345 break;
 2346 }
23402347 }
23412348 }
23422349 }
68787

LayoutTests/ChangeLog

 12010-10-01 Yael Aharon <yael.aharon@nokia.com>
 2
 3 Reviewed by NOBODY (OOPS!).
 4
 5 Spatial Navigation: Add support for <input type="radio">
 6 https://bugs.webkit.org/show_bug.cgi?id=46993
 7
 8 * fast/events/spatial-navigation/snav-radio-expected.txt: Added.
 9 * fast/events/spatial-navigation/snav-radio-group-expected.txt: Added.
 10 * fast/events/spatial-navigation/snav-radio-group.html: Added.
 11 * fast/events/spatial-navigation/snav-radio.html: Added.
 12
1132010-10-01 Alpha Lam <hclam@chromium.org>
214
315 Not reviewed. Build fix.
68912

LayoutTests/fast/events/spatial-navigation/snav-radio-expected.txt

 12
 24 6
 38
 4PASS gFocusedDocument.activeElement.getAttribute("id") is "8"
 5PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 6PASS gFocusedDocument.activeElement.getAttribute("id") is "2"
 7PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 8PASS gFocusedDocument.activeElement.getAttribute("id") is "6"
 9PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 10PASS gFocusedDocument.activeElement.getAttribute("id") is "4"
 11PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 12
0

LayoutTests/fast/events/spatial-navigation/snav-radio-group-expected.txt

 12
 24
 3
 4
 5 6
 68
 7PASS gFocusedDocument.activeElement.getAttribute("id") is "down"
 8PASS gFocusedDocument.activeElement.getAttribute("id") is "8"
 9PASS gFocusedDocument.activeElement.getAttribute("id") is "down"
 10PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 11PASS gFocusedDocument.activeElement.getAttribute("id") is "up"
 12PASS gFocusedDocument.activeElement.getAttribute("id") is "2"
 13PASS gFocusedDocument.activeElement.getAttribute("id") is "up"
 14PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 15PASS gFocusedDocument.activeElement.getAttribute("id") is "right"
 16PASS gFocusedDocument.activeElement.getAttribute("id") is "6"
 17PASS gFocusedDocument.activeElement.getAttribute("id") is "right"
 18PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 19PASS gFocusedDocument.activeElement.getAttribute("id") is "left"
 20PASS gFocusedDocument.activeElement.getAttribute("id") is "4"
 21PASS gFocusedDocument.activeElement.getAttribute("id") is "left"
 22PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
 23PASS document.getElementById('down').checked is true
 24
0

LayoutTests/fast/events/spatial-navigation/snav-radio-group.html

 1<html>
 2 <!--
 3 This test ensures the correctness of Spatial Navigation (SNav) algorithm over single select element.
 4
 5 * Pre-conditions:
 6 1) DRT support for SNav enable/disable.
 7
 8 * Navigation steps:
 9 1) Loads this page, focus goes to "start" automatically.
 10 2) Focus moves away from select in 4 different directions to neighbor nodes and back.
 11 -->
 12 <head>
 13 <script src="../../js/resources/js-test-pre.js"></script>
 14 <script src="resources/spatial-navigation-utils.js"></script>
 15 <script type="application/javascript">
 16
 17 var resultMap = [
 18 ["Down", "down"],
 19 ["Down", "8"],
 20 ["Up", "down"],
 21 ["Up", "start"],
 22 ["Up", "up"],
 23 ["Up", "2"],
 24 ["Down", "up"],
 25 ["Down", "start"],
 26 ["Right", "right"],
 27 ["Right", "6"],
 28 ["Left", "right"],
 29 ["Left", "start"],
 30 ["Left", "left"],
 31 ["Left", "4"],
 32 ["Right", "left"],
 33 ["Right", "start"],
 34 ["DONE", "DONE"]
 35 ];
 36
 37 if (window.layoutTestController) {
 38 layoutTestController.dumpAsText();
 39 layoutTestController.setSpatialNavigationEnabled(true);
 40 layoutTestController.overridePreference("WebKitTabToLinksPreferenceKey", 1);
 41 layoutTestController.waitUntilDone();
 42 }
 43
 44 function runTest()
 45 {
 46 // starting the test itself: get to a known place.
 47 document.getElementById("start").focus();
 48
 49 initTest(resultMap, testCompleted);
 50 }
 51
 52 function testCompleted()
 53 {
 54 if (window.layoutTestController)
 55 shouldBe("document.getElementById('down').checked", "true");
 56 layoutTestController.notifyDone();
 57 }
 58
 59 window.onload = runTest;
 60
 61 </script>
 62 <script src="../js/resources/js-test-post.js"></script>
 63 </head>
 64 <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
 65 <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
 66 <tbody>
 67 <tr>
 68 <td style="vertical-align: center; text-align: center;"></td>
 69 <td style="vertical-align: center; text-align: center;"><a id="2" href="a">2</a></td>
 70 <td style="vertical-align: center; text-align: center;"></td>
 71 </tr>
 72 <tr>
 73 <td style="vertical-align: center; text-align: center;"><a id="4" href="a">4</a></td>
 74 <td style="vertical-align: center; text-align: center;">
 75 <table style="text-align: center; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
 76 <tbody>
 77 <tr>
 78 <td style="vertical-align: center; text-align: center;"></td>
 79 <td style="vertical-align: center; text-align: center;"><input type="radio" name="group" id="up" ></td>
 80 <td style="vertical-align: center; text-align: center;"></td>
 81 </tr>
 82 <tr>
 83 <td style="vertical-align: center; text-align: center;"><input type="radio" name="group" id="left" ></td>
 84 <td style="vertical-align: center; text-align: center;">
 85 <input type="radio" name="group" id="start" >
 86 </td>
 87 <td style="vertical-align: center; text-align: center;"><input type="radio" name="group" id="right" ></td>
 88 </tr>
 89 <tr>
 90 <td style="vertical-align: center; text-align: center;"></td>
 91 <td style="vertical-align: center; text-align: center;"><input type="radio" name="group" id="down" checked ></td>
 92 <td style="vertical-align: center; text-align: center;"></td>
 93 </tr>
 94 </tbody>
 95 </table>
 96 </td>
 97 <td style="vertical-align: center; text-align: center;"><a id="6" href="a">6</a></td>
 98 </tr>
 99 <tr>
 100 <td style="vertical-align: center; text-align: center;"></td>
 101 <td style="vertical-align: center; text-align: center;"><a id="8" href="a">8</a></td>
 102 <td style="vertical-align: center; text-align: center;"></td>
 103 </tr>
 104 </tbody>
 105 </table>
 106 <div id="console"></div>
 107 </body>
 108</html>
 109
0

LayoutTests/fast/events/spatial-navigation/snav-radio.html

 1<html>
 2 <!--
 3 This test ensures the correctness of Spatial Navigation (SNav) algorithm over single select element.
 4
 5 * Pre-conditions:
 6 1) DRT support for SNav enable/disable.
 7
 8 * Navigation steps:
 9 1) Loads this page, focus goes to "start" automatically.
 10 2) Focus moves away from select in 4 different directions to neighbor nodes and back.
 11 -->
 12 <head>
 13 <script src="../../js/resources/js-test-pre.js"></script>
 14 <script src="resources/spatial-navigation-utils.js"></script>
 15 <script type="application/javascript">
 16
 17 var resultMap = [
 18 ["Down", "8"],
 19 ["Up", "start"],
 20 ["Up", "2"],
 21 ["Down", "start"],
 22 ["Right", "6"],
 23 ["Left", "start"],
 24 ["Left", "4"],
 25 ["Right", "start"],
 26 ["DONE", "DONE"]
 27 ];
 28
 29 if (window.layoutTestController) {
 30 layoutTestController.dumpAsText();
 31 layoutTestController.setSpatialNavigationEnabled(true);
 32 layoutTestController.overridePreference("WebKitTabToLinksPreferenceKey", 1);
 33 layoutTestController.waitUntilDone();
 34 }
 35
 36 function runTest()
 37 {
 38 // starting the test itself: get to a known place.
 39 document.getElementById("start").focus();
 40
 41 initTest(resultMap, testCompleted);
 42 }
 43
 44 function testCompleted()
 45 {
 46 if (window.layoutTestController)
 47 layoutTestController.notifyDone();
 48 }
 49
 50 window.onload = runTest;
 51
 52 </script>
 53 <script src="../js/resources/js-test-post.js"></script>
 54 </head>
 55 <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
 56 <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
 57 <tbody>
 58 <tr>
 59 <td style="vertical-align: top; text-align: center;"></td>
 60 <td style="vertical-align: top; text-align: center;"><a id="2" href="a">2</a></td>
 61 <td style="vertical-align: top; text-align: center;"></td>
 62 </tr>
 63 <tr>
 64 <td style="vertical-align: top; text-align: center;"><a id="4" href="a">4</a></td>
 65 <td style="vertical-align: top; text-align: center;"><input type="radio" id="start" ></td>
 66 <td style="vertical-align: top; text-align: center;"><a id="6" href="a">6</a></td>
 67 </tr>
 68 <tr>
 69 <td style="vertical-align: top; text-align: center;"></td>
 70 <td style="vertical-align: top; text-align: center;"><a id="8" href="a">8</a></td>
 71 <td style="vertical-align: top; text-align: center;"></td>
 72 </tr>
 73 </tbody>
 74 </table>
 75 <div id="console"></div>
 76 </body>
 77</html>
 78
0