LayoutTests/accessibility/radio-button-title-label.html

   1 <html>
   2 <head>
   3 <script src="../fast/js/resources/js-test-pre.js"></script>
   4 </head>
   5 <script>
   6     if (window.testRunner)
   7         testRunner.dumpAsText();
   8 </script>
   9 <body>
  10
  11 <p id="description"></p>
  12 <div id="console"></div>
  13
  14     <input type="radio" name="r1" id="r1" title="TITLE">Test<br>
  15     <label for="r1">LABEL</label>
  16
  17     <input type="radio" id="r2" aria-labeledby="label3">Test<br>
  18     <label for="r2">LABEL2</label>
  19     <div id="label3">LABEL2a</div>
  20
  21     <input type="radio" name="r3" id="r3" aria-label="radio3">Test<br>
  22     <label for="r3">LABEL3</label>
  23
  24     <script>
  25
  26         description("This test checks that radio buttons expose title ui elements correctly under a variety of cirmcumstances. In general, the <label> should disappear and act as the title for the radio button.");
  27
  28         if (window.accessibilityController) {
  29
  30             // radio button 1
  31             document.getElementById("r1").focus();
  32
  33             // 1) Even though a checkbox has a title attribute, the title ui element should still be exposed.
  34             var focusedElement = accessibilityController.focusedElement;
  35             var titleUIElement = focusedElement.titleUIElement();
  36             shouldBe("focusedElement.title", "'AXTitle: LABEL'");
  37             shouldBeTrue("!titleUIElement || titleUIElement.title == 'AXTitle: '");
  38
  39             // 2) aria-labeledby should override the native label semantics and return a title for the radio button, instead of a title ui element.
  40             document.getElementById("r2").focus();
  41             focusedElement = accessibilityController.focusedElement;
  42             titleUIElement = focusedElement.titleUIElement();
  43             shouldBe("focusedElement.description", "'AXDescription: LABEL2a'");
  44             shouldBe("focusedElement.title", "'AXTitle: '");
  45             shouldBeTrue("!titleUIElement || titleUIElement.title == 'AXTitle: '");
  46
  47             // 3) If a radio button has an aria-label and a <label>, the aria-label should be the title.
  48             document.getElementById("r3").focus();
  49             focusedElement = accessibilityController.focusedElement;
  50             titleUIElement = focusedElement.titleUIElement();
  51             shouldBe("focusedElement.description", "'AXDescription: radio3'");
  52             shouldBe("focusedElement.title", "'AXTitle: '");
  53             shouldBe("titleUIElement.title", "'AXTitle: '");
  54
  55         }
  56     </script>
  57
  58 <script src="../fast/js/resources/js-test-post.js"></script>
  59
  60 </body>
  61 </html>