Вдоль строк этой статьи MDN у меня есть флажок ввода, помеченный комбинацией трех различных элементов: метки, текстового поля, а затем другой метки.
Таким образом, вход для флажка имеет атрибут aria-labelledby
со значением, подобным label1 text-field label2
.
<input type="checkbox" aria-labelledby="allow-up-to num words-in-between" />
<div>
<label id="allow-up-to">allow up to</label>
<input id="num" type="text" value="0" />
<label id="words-in-between">words in between</label>
</div>
В моем тесте я пытаюсь получить флажок на основе этого ярлыка.
Я могу успешно захватить ввод с помощью getByLabelText('text of label1')
или getByLabelText('text of label2')
, но при присвоении ему полной каскадной метки getByLabelText('text of label1 value of text-field text of label2')
ничего не найдено.
getByLabelText("allow up to"); // works
getByLabelText("words in between") // works
getByLabelText("allow up to 0 words in between") // does not work
Попытка getByLabelText('value of text-field')
также не работает, но даже если я удалю текстовое поле из aria-labelledby
, я все равно не смогу получить ввод с помощью getByLabelText('text of label1 text of label2')
. Вот код и окно с упрощенной версией реального пользовательского интерфейса, который я пытаюсь протестировать.
Должен ли getByLabelText
работать таким образом (даже если согласно статье MDN несколько меток в aria-labelledby
должен быть соединен программой чтения с экрана)? Если да, есть ли другой способ получить ввод с помощью полного текста метки?