1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64

content / test / data / accessibility / aria / aria-owns-included-in-tree.html [blame]

<!--
@AURALINUX-DENY:checkable
-->
<!-- Make sure that the serialization/deserialization process works without
  crashing when aria-owns is used with nodes that normally wouldn't be in the
  tree, and that any target of an aria-owns is included in the tree -->
<test-element></test-element>
<template id="test-contents">
  <hr aria-label="Control: elements that are not in tree">
  <span id="presentational0"></span>  <!-- Should not be in tree -->
  <table>
    <tbody>  <!-- Should not be in tree -->
      <td><input></td>
    </tbody>
  </table>

  <hr aria-label="An aria-owned element is always in tree">
  <span role="group" aria-owns="presentational1"></span>
  <span id="presentational1">  <!-- Should be in tree -->
    <input type="button" value="button-in-owned-tree">
  </span>

  <hr aria-label="Element with aria-owns is always in tree">
  <input type="text" id="textbox">
  <span aria-owns="textbox"></span>  <!-- Should be in tree -->

  <hr aria-label="Owning an element with unincluded ancestors serializes cleanly">
  <span>
    <span role="group" aria-owns="checkbox"></span>
    <span>
      <span>
        <input type="checkbox" id="checkbox">
      </span>
    </span>
  </span>

  <hr aria-label="All the above in one">
  <table role="none">
    <tbody aria-owns="td">
      <td>xyz</td>
    </tbody>
  </table>
  <table role="none">
    <tbody>  <!-- Not in tree -->
      <td id="td">
        <span>
          <input type="range">
        </span>
      </td>
    </tbody>
  </table>
</template>
<script>
  class TestElement extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById('test-contents');
      const instance = template.content.cloneNode(true);
      this.attachShadow({mode: 'open'}).appendChild(instance);
    }
  }
  customElements.define('test-element', TestElement);
</script>