skip to content

Country selector

in production

Tags:

Example with simple form

In this simple form, no CSS or JavaScript code is required. The production team can add a client-side JavaScript to redirect users on click or do it on the server side. Both method required very simple and little script.

HTML code

<form id="frm-country-selector"
      action="/"
      method="post">
  <label id="lbl-country-selector"
          for="sel-country-selector">
    Country:
  </label>
  <select id="sel-country-selector">
    <option value="us"
            selected>
        United States
    </option>
    <option value="ca">
        Canada
    </option>
    <option value="nl">
        Netherlands
    </option>
  </select>
  <input id="btn-country-selector"
         type="submit"
         value="Go!" />
</form>

Example without form

The example below is working and is accessible without javascript using the spacebar. To the added value of using the enter key to open and close the listbox, please add the small JS code following the CSS code.

Flags provided by Flagpedia.net

HTML code

<input type="checkbox"
        id="chk-country-selector"
        aria-haspopup="listbox"
        class="chk-dropdown-toggle visually-hidden"
/>
<label id="lbl-country-selector-2"
    for="chk-country-selector"
    class="lbl-country-selector">
  Country:
  <span class="current-country">Currently on the United States website</span>
  <i class="fas fa-caret-square-down"></i>
</label>
<ul id="lst-country-selector"
    tabindex="-1"
    role="listbox"
    aria-labelledby="lbl-country-selector-2"
    class="lst-country-selector">
  <li id="opt-country-selector-en"
      role="option"
      aria-selected="true"
      class="focused">
      <a href="?country=en-us">
        <img
          src="https://flagcdn.com/h20/us.png"
          height="20"
          alt="">
        United States
      </a>
  </li>
  <li id="opt-country-selector-es"
      role="option">
      <a href="?country=en-ca">
        <img
          src="https://flagcdn.com/h20/ca.png"
          height="20"
          alt="">
        Canada
      </a>
  </li>
  <li id="opt-country-selector-fr"
      role="option">
      <a href="?country=en-ca">
        <img
          src="https://flagcdn.com/h20/nl.png"
          height="20"
          alt="">
        Netherlands
      </a>
  </li>
</ul>

CSS code

.chk-dropdown-toggle:focus~.lbl-country-selector {
  outline: 4px solid #999;
}

.chk-dropdown-toggle:focus~.lbl-country-selector i {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lst-country-selector {
  display: block;
}

.chk-dropdown-toggle:unchecked~.lst-country-selector {
  display: none;
}

.lst-country-selector {
  display: none;
}

.lbl-country-selector:hover {
  cursor: pointer;
  outline: 4px solid #999;
}

.lbl-country-selector:hover i,
.lst-country-selector a {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lbl-country-selector .fa-caret-square-down:before {
  content: "\f151";
}

Javascript code

var aria = aria || {};

/**
 * @desc
 *  Key code constants
 */
aria.KeyCode = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  SHIFT: 16,
  ESC: 27,
  SPACE: 32,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  END: 35,
  HOME: 36,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  DELETE: 46,
};

function checkboxKeydown (evt) {
  var key = evt.which || evt.keyCode;

  switch (key) {
    case aria.KeyCode.RETURN:
      if (this.getAttribute('checked') === 'checked') {
        this.removeAttribute('checked');
      } else {
        this.setAttribute('checked', 'checked');
      }
      break;
  }
};

window.onload = function () {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];
      cb.addEventListener('keydown', checkboxKeydown);
  }
};

Files

References

W3C SVG