Сегментированный контрол

Контракт

Состояние приходит из разметки: библиотека его рисует, но не вычисляет. Без ролей aria-checked невалиден, а с клавиатуры до контрола не добраться.

Клавиатура: Tab — вход в группу и выход из неё, ← → ↑ ↓ — перебор, выбор следует за фокусом.

Выбранный несёт два признака, и ни один из них не цвет: поднятую поверхность и кольцо рамки. Подпись невыбранного — --text-secondary, проверена на 4.5:1 в пяти темах. Высота на --space-2 меньше --control-h-md, и в плотном режиме цель уходит ниже 24px по WCAG 2.5.8 — как и всё размера sm.

Варианты

Со своим адресом

Значение, у которого есть адрес, не перестаёт быть значением. Окно истории переживает перезагрузку, ложится в закладку и передаётся другому человеку целиком — ссылкой; выбором одного из равных оно от этого быть не перестало. Носитель состояния тогда aria-current="page", а не aria-checked.

<nav class="inst-segmented" aria-label="Окно истории">
  <a href="?window=day" aria-current="page">24 часа</a>
  <a href="?window=week">7 дней</a>
  <a href="?window=month">30 дней</a>
</nav>

Состояния

<div class="inst-segmented" role="radiogroup" aria-label="Выбрано первое">
  <button type="button" role="radio" aria-checked="true"  tabindex="0">Выбрано</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1">Обычное</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1" disabled>Недоступно</button>
</div>

Выбранный несёт два признака, и ни один из них не цвет: поднятую поверхность и кольцо рамки. Различать оттенки не требуется.

Начертание состояние не несёт. Замерено: с medium ширина всей дорожки зависела от того, какой сегмент выбран — 217.16, 216.94 и 216.64 пикселя, — то есть выбор сдвигал соседей по тулбару, а правый скруглённый угол садился на полпиксель и перерастрировался. При плотности 2.0 это целый устройственный пиксель. Без medium все три положения дают одну ширину.

JS

Модуль подключается один раз на страницу — инициализировать компоненты по отдельности не нужно.

Что делает instrument.js

Примеры на этой странице живые: войдите в контрол Tab, дальше ← и →. Мышью — тоже.

Контрол объявлен как role="radiogroup", и instrument.js выполняет её контракт: ← и → между вариантами, Home и End, один Tab на всю группу. Отметка aria-checked следует за фокусом и переносится щелчком — сразу на всю группу, потому что два отмеченных варианта это состояние, из которого разметка уже не выйдет.

События

inst:select всплывает с выбранного варианта.

group.addEventListener('inst:select', (e) => {
  document.documentElement.dataset.density = e.detail.value;
});

Опции

<div class="inst-segmented" role="radiogroup" aria-label="Плотность">
  <button type="button" role="radio" aria-checked="true"  data-value="sm" tabindex="0">Плотно</button>
  <button type="button" role="radio" aria-checked="false" data-value="md" tabindex="-1">Обычно</button>
</div>

Композиции

В шапке экрана

<div class="inst-page-header">
  <div class="inst-page-header-main">
    <h2 class="inst-page-title">Прогоны</h2>
  </div>
  <div class="inst-page-actions">
    <div class="inst-segmented" role="radiogroup" aria-label="Период">
      <button type="button" role="radio" aria-checked="false" tabindex="-1">День</button>
      <button type="button" role="radio" aria-checked="true"  tabindex="0">Неделя</button>
      <button type="button" role="radio" aria-checked="false" tabindex="-1">Месяц</button>
    </div>
  </div>
</div>

API

Связанное

ЧипГруппа кнопокВкладкиСелектПереключателиКнопка