Разрешено ли помещать более одного входа в элемент метки? - PullRequest
Новая
       28

Разрешено ли помещать более одного входа в элемент метки?

0 голосов
/ 09 января 2019

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

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0
<label>Set turn angle:
  <input type="number" min="-90" max="90" step="any">
  <input type="range" min="-90" max="90" step="any">
</label>

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

Но! Что насчет элемента label? Семантически label применяется к обоим входам. Однако разрешено ли размещать более одного элемента ввода в метке, как я сделал? Я читаю docs , и, похоже, предполагается, что между меткой и соответствующим вводом имеется отношение 1-1. Тогда, если это не законно, что я должен делать в таком случае?

1 Ответ

0 голосов
/ 10 января 2019

Недопустимо иметь несколько элементов управления в одном элементе метки. Модель содержимого для метки гласит:

Фразирование содержимого, но без элементов, которые можно пометить потомком, если только это не элемент управления с меткой , и элементы без меток потомка.

Элемент управления с маркировкой четко выделен.

Метки в основном предназначены для программ чтения с экрана, поэтому, когда элемент управления получает фокус с помощью клавиши TAB, метка считывается, и пользователь понимает, какое значение он устанавливает. Например, при тестировании в NVDA в Firefox это работает довольно хорошо: 

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0
<fieldset>
<legend>Set turn angle:</legend>
<label for="n1">by number:</label>
<input type="number" min="-90" max="90" step="any" id="n1">
<label for="r1">by range:</label>
<input type="range" min="-90" max="90" step="any" id="r1">
</fieldset>

Однако при управлении через клавиатуру мало смысла иметь два элемента управления. Регулятор диапазона не предоставляет никаких дополнительных функций. Поэтому другим подходом было бы скрыть управление диапазоном от фокусировки клавишей TAB. 

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0
<label for="n1">Set turn angle:</label>
<input type="number" min="-90" max="90" step="any" id="n1">
<input type="range" min="-90" max="90" step="any" tabindex="-1">
...