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


content / test / data / accessibility / event / aria-selected-changed-new-subtree.html [blame]

<!DOCTYPE html>
<table id='Grid' role='grid' aria-multiselectable='false'><tbody>
  <tr>
    <td id='GridCell1' role='gridcell' aria-selected='true' tabindex='0'
        onclick='tdclick(this, event)'>Grid, GridCell1</td>
    <td id='GridCell2' role='gridcell' aria-selected='false' tabindex='0'
        onclick='tdclick(this, event)'>Grid, GridCell2</td>
  </tr>
</tbody></table>
<select id='Select'>
  <option id='Option1' value='1' selected
          onclick='option_click(this, event)'>Select, Option1</option>
  <option id='Option2' value='2'
          onclick='option_click(this, event)'>Select, Option2</option>
</select>
<div id='DivSelect' role='listbox'>
  <div id='Option1' role='option' aria-selected='true'
       onclick='div_option_click(this, event)'>DivSelect, Option1</div>
  <div id='Option2' role='option' aria-selected='false'
       onclick='div_option_click(this, event)'>DivSelect, Option2</div>
</div>
<script>
  function grid_select() {
    var selected = document.querySelector('td#GridCell1');
    var new_selection = selected.cloneNode(true);
    selected.setAttribute('aria-selected', false);
    new_selection.innerHTML = 'Grid, GridCell3';
    new_selection.id - 'GridCell3'
    selected.parentElement.appendChild(new_selection);
  }

  function option_select() {
    var selected = document.querySelector('option#Option1');
    var new_selection = selected.cloneNode(true);
    selected.selected = false;
    new_selection.value = '3';
    new_selection.innerHTML = 'Select, Option3';
    new_selection.id = 'Option3';
    selected.parentElement.appendChild(new_selection);
  }

  function div_select() {
    var selected = document.querySelector('div#Option1');
    var new_selection = selected.cloneNode(true);
    selected.setAttribute('aria-selected', false);
    new_selection.innerHTML = 'DivSelect, Option3';
    new_selection.id = 'Option3';
    selected.parentElement.appendChild(new_selection);
  }

  const go_passes = [
    () => grid_select(),
    () => option_select(),
    () => div_select(),
  ];

  var current_pass = 0;
  function go() {
    go_passes[current_pass++].call();
    return current_pass < go_passes.length;
  }
</script>