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
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115


content / test / data / accessibility / aria / disabled-aria-combobox-has-value.html [blame]

<!--
@BLINK-ALLOW:role*
@BLINK-ALLOW:name=*
@BLINK-ALLOW:value*
-->
<!DOCTYPE html>
<html lang="en">

<head>

  <style>
    .combo {
      display: block;
      position: relative;
    }

    .combo-menu {
      display: none;
      position: absolute;
    }

    .open .combo-menu {
      display: block;
    }
  </style>

</head>

<body>

  <div class="combo js-select">
    <div id="combo1-label" class="combo-label">Favorite Fruit</div>
    <button aria-controls="listbox1" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="combo1-label"
      id="combo1" class="combo-input" role="combobox" disabled></button>
    <div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label" tabindex="-1">
    </div>
  </div>

  <label for="pet-select">Choose a pet:</label>
  <select name="pets" id="pet-select" disabled>
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>


</body>

<script>
  'use strict';

    const Select = function (el, options = []) {
      this.el = el;
    this.comboEl = el.querySelector('[role=combobox]');
    this.listboxEl = el.querySelector('[role=listbox]');

    this.idBase = this.comboEl.id || 'combo';
    this.options = options;

    if (this.el && this.comboEl && this.listboxEl) {
      this.init();
    }
  };

    Select.prototype.init = function () {
    this.comboEl.innerHTML = this.options[0];

    this.options.map((option, index) => {
      const optionEl = this.createOption(option, index);
      this.listboxEl.appendChild(optionEl);
    });
  };

  Select.prototype.createOption = function (optionText, index) {
    const optionEl = document.createElement('div');
    optionEl.setAttribute('role', 'option');
    optionEl.id = `${this.idBase}-${index}`;
    optionEl.className =
      index === 0 ? 'combo-option option-current' : 'combo-option';
    optionEl.setAttribute('aria-selected', `${index === 0}`);
    optionEl.innerText = optionText;

    return optionEl;
  };

  window.addEventListener('load', function () {
    const options = [
      'Choose a Fruit',
      'Apple',
      'Banana',
      'Blueberry',
      'Boysenberry',
      'Cherry',
      'Cranberry',
      'Durian',
      'Eggplant',
      'Fig',
      'Grape',
      'Guava',
      'Huckleberry',
    ];
    const selectEls = document.querySelectorAll('.js-select');

    selectEls.forEach((el) => {
      new Select(el, options);
    });
  });

</script>

</html>