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


content / test / data / accessibility / event / aria-sort-changed.html [blame]

<!DOCTYPE html>
<html>
<body>
  <div role="grid">
    <div role="row">
      <div id="ch0" aria-label="rowheader1" role="rowheader" aria-sort="descending"></div>
      <div id="ch1" aria-label="columnheader1" role="columnheader"></div>
      <div id="ch2" aria-label="columnheader2" role="columnheader"></div>
      <div id="ch3" aria-label="columnheader3" role="columnheader"></div>
      <div id="ch4" aria-label="columnheader4" role="columnheader"></div>
      <div id="ch5" aria-label="columnheader5" role="columnheader" aria-sort="ascending"></div>
    </div>
  </div>
  <script>
    function go() {
      // Set aria-sort from 'descending'->'ascending'; should fire an event.
      document.getElementById('ch0').setAttribute('aria-sort', 'ascending');

      // Set aria-sort from default 'none'->'none'; should not fire an event.
      document.getElementById('ch1').setAttribute('aria-sort', 'none');

      // Set aria-sort from default 'none'->'ascending'; should fire an event.
      document.getElementById('ch2').setAttribute('aria-sort', 'ascending');

      // Set aria-sort from default 'none'->'descending'; should fire an event.
      document.getElementById('ch3').setAttribute('aria-sort', 'descending');

      // Set aria-sort from default 'none'->'other'; should fire an event.
      document.getElementById('ch4').setAttribute('aria-sort', 'other');

      // Set aria-sort from 'ascending'->[removed]; should fire an event.
      document.getElementById('ch5').removeAttribute('aria-sort');
    }
  </script>
</body>
</html>