LayoutTests/accessibility/radio-button-group-members.html

   1 <html>
   2 <script src="../resources/js-test.js"></script>
   3 <body>
   4
   5     <div id="content">
   6
   7     <!-- Test radio group without a form-->
   8     <form>
   9     <input type="radio" id="test1_Yes" name="test1">Yes<BR>
  10     <input type="radio" id="test1_No" name="test1">No<BR>
  11     <input type="radio" id="test1_Maybe" name="test1">Maybe<BR>
  12     </form>
  13     <br><br>
  14
  15     <!-- Test radio group without a form -->
  16     <input type="radio" id="test2_Yes" name="test2">Yes<BR>
  17     <input type="radio" id="test2_No" name="test2">No<BR>
  18     <br><br>
  19
  20     <!-- Test radio group with labels -->
  21     <form>
  22     <input type="radio" id="test3_Yes" name="test3"><label for="test3_Yes">Yes</label><BR>
  23     <input type="radio" id="test3_No" name="test3"><label for="test3_No">No</label><BR>
  24     </form>
  25     <br><br>
  26
  27     <!-- Test different radio groups -->
  28     <form>
  29     <input type="radio" id="test4_Yes" name="test4">Yes<BR>
  30     <input type="radio" id="test5_No" name="test5">No<BR>
  31     </form>
  32     <br><br>
  33
  34     <!-- Test radiogroup parentage -->
  35     <div class="radiogroup" role="radiogroup" id="radiogroup">
  36     <div>
  37        <div role="radio" id="ariaradio1" aria-checked="true">Radio 1</div>
  38        <div role="radio" id="ariaradio2" aria-checked="false">Radio 2</div>
  39        <div role="radio" aria-checked="false">Radio 3</div>
  40     </div>
  41     </div>
  42
  43     </div>
  44
  45     <p id="description"></p>
  46     <div id="console"></div>
  47
  48     <script>
  49         if (window.accessibilityController) {
  50             var result = document.getElementById("result");
  51
  52             description("This tests that linked UI elements withing a radio group work");
  53
  54             debug("Radio buttons within the same named group should be able to access their siblings");
  55             var test1 = accessibilityController.accessibleElementById("test1_Yes");
  56             shouldBeTrue("test1.linkedUIElementAtIndex(0).isEqual(test1)");
  57             shouldBeTrue("test1.linkedUIElementAtIndex(1).isEqual(accessibilityController.accessibleElementById('test1_No'))");
  58             shouldBeTrue("test1.linkedUIElementAtIndex(2).isEqual(accessibilityController.accessibleElementById('test1_Maybe'))");
  59             debug("\n");
  60
  61             debug("Radio buttons that are not in a form, but in the same named group should be able to access their siblings");
  62             var test2 = accessibilityController.accessibleElementById("test2_Yes");
  63             shouldBeTrue("test2.linkedUIElementAtIndex(0).isEqual(test2)");
  64             shouldBeTrue("test2.linkedUIElementAtIndex(1).isEqual(accessibilityController.accessibleElementById('test2_No'))");
  65             debug("\n");
  66
  67             debug("Radio buttons labeled by <label> should be able to access their siblings");
  68             var test3 = accessibilityController.accessibleElementById("test3_Yes");
  69             shouldBeTrue("test3.linkedUIElementAtIndex(0).isEqual(test3)");
  70             shouldBeTrue("test3.linkedUIElementAtIndex(1).isEqual(accessibilityController.accessibleElementById('test3_No'))");
  71             debug("\n");
  72
  73             debug("Radio buttons not in a groups should not have siblings (the first linked element is itself)");
  74             var test4 = accessibilityController.accessibleElementById("test4_Yes");
  75             shouldBeTrue("test4.linkedUIElementAtIndex(0).isEqual(test4)");
  76             shouldBeTrue("!test4.linkedUIElementAtIndex(1) || !test4.linkedUIElementAtIndex(1).isValid");
  77             debug("\n");
  78
  79             debug("Radio buttons that just have aria roles should work.");
  80             var ariaRadio1 = accessibilityController.accessibleElementById("ariaradio1");
  81             var ariaRadio2 = accessibilityController.accessibleElementById("ariaradio2");
  82             shouldBeTrue("ariaRadio1.linkedUIElementAtIndex(0).isEqual(ariaRadio1)");
  83             shouldBeTrue("ariaRadio1.linkedUIElementAtIndex(1).isEqual(ariaRadio2)");
  84
  85             document.getElementById("content").style.visibility = "hidden";
  86         }
  87     </script>
  88 </body>
  89 </html>