Select

Кастомизация стандартного Sel

Основные данные

Нативный select нет возможности полностью стилизовать, поэтому приходится создавать "кастомизированный". Но, для мобильных версий необходимо отображать стандартную версию, так как в болбольшенствебильных устройств нативный select хорошо реализован в браузере.

Терминология

При создании кастомного select в качестве примера был взят Open UI select.

• select: оригинальный select, из которого будут копироваться все данные в кастомный

• menu: кастомный select, корневая нода

• button: нода, которая содержит информацию о выбранном пункте, так же является кнопкой вызова окна со списком доступных значений

• popup: список доступных значений

• option: значение (элемент списка)

Параметры

Параметры необходимо установить на нативный select (даже если он их не поддерживает)

• autofocus - реализовать нет возможности, так как необходимо отслеживать все аналогичные параметры на странице (нативно делает браузер)

• disabled - определяет доступность select

• form - cвязывает список с формой, не переходит на кастомный select

• multiple - позволяет одновременно выбирать сразу несколько элементов списка

• name - имя элемента для отправки на сервер или обращения через скрипты, не переходит на кастомный select

• open - определяет открыт ли select при загрузке

• required - список обязателен для выбора перед отправкой формы, не переходит на кастомный select

• selected - определяет выбранный пeyrn меню по умолчанию

• size - количество отображаемых строк списка.

Интерактивный дизайн

Управление клавиатурой

Управление с клавиатуры в точности должны повторять аналогичные действия нативного select, а именно:

Находясь на button СТРЕЛКИ меняют значения, что сразу отражается на самой button

Находясь на button ENTER открывает popup

Находясь на любом элементе menu ESC или TAB закрывает popup, а фокус возвращается на button

При открытии popup фокус попадает на выбранный option, а СТРЕЛКИ меняют значения, что сразу отражается на button

Находясь на option ENTER закрывает popup, а фокус возвращается на button

Screenreader

Руководство для разработчиков

Content (HTML)

В данном примере кастомный select будет формировать через js, основой которому будет служить нативный вариант:

<div class="select-wrapper">
   <label class="options__item" for="date"></label>
   <select class="options__select" id="date" name="date">
      <option value="new">Сначала новые</option>
      <option value="old">Сначала старые</option>
      <option value="random">В случайном порядке</option>
   </select>
</div>

После применения JS:

<div class="select-wrapper">
   <label class="options__item" for="date"></label>
   <select class="options__select" id="date" name="date">
      <option value="new">Сначала новые</option>
      <option value="old">Сначала старые</option>
      <option value="random">В случайном порядке</option>
   </select>
   <div class="select__menu">
      <button class="select__button">Сначала новые</button>
      <ul class="select__popup">
         <li tabindex="0" class="select__option" data-value="new" selected="">Сначала новые</li>
         <li tabindex="-1" class="select__option" data-value="old">Сначала старые</li>
         <li tabindex="-1" class="select__option" data-value="random">В случайном порядке</li>
      </ul>
   </div>
</div>

Behaviour (JS)

Описание создание кастомного select описываться не будет, но следует отметить, что необходимо прописать связь между значениями кастомного и нативного select

ARIA

Так как role = select, то используется следующее:

role=menu

Сообщает вспомогательным технологиям, что это меню, содержащее элементы меню.

role=menuitem

Сообщает вспомогательным технологиям, что это элементы меню.

aria-checked

Сообщает вспомогательным технологиям, какие элементы меню выбраны.

aria-haspopup

Сообщает вспомогательным, что button имеет popup, который будет показан (вызван) при нажатии

aria-expanded

Сообщает вспомогательным технологиям состояние popup (открыт\закрыт)