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

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