Получить идентификатор родительского входного div с вложенными переключателями для доступности - PullRequest
Новая
       7

Получить идентификатор родительского входного div с вложенными переключателями для доступности

0 голосов
/ 22 октября 2019

У меня есть несколько пользовательских переключателей, которые сильно вложены. Я хотел бы, чтобы дочерние радиокнопки ссылались на своих родителей в ярлыке (по причинам доступности). Я планирую использовать aria-labelledby для этого.

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

В настоящее время макет HTML выглядит следующим образом. : 

<div ...
  <input id="cat" name="level-parent" type="radio" value="cat" />
  <label for="cat" />
  <div>
    <div ...
    <div ...
     <div
     <div ...
       <input name="level-child-0" id=
leash" type="radio" value="leash">
       <label />
         <div ...
          <div ...
             <div ...
                <input name="level-child-1" id=
"blue" type="radio" value="blue">
                <label />

Все входы и метки генерируются одним и тем же компонентом, который отображается на карту. 

<input
          type="radio"
          name={`level-${level}`}
          value={choiceId}
          id={choiceId}
          aria-labelledby={}
        />
        <label htmlFor={choiceId} />

Идентификатор выбора и уровень передаются при создании переключателей.

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

Таким образом, для тега <input> с id="level-child-1" было бы сказано «поводок, синий», а для тега <input> с id="level-child-0" было бы сказано «кошка, поводок»

Есть ли способ получить родительский идентификатор ввода? Я искал что-то вроде const parentInput = document.getElementById("label").parentNode.nodeName;, но проблема в том, что я не знаю идентификатор родителя. Может ли он идти вверх по узлам, пока не найдет идентификатор родительского компонента input?

Вот базовый jsfiddle с рабочим вложенным переключателем: http://jsfiddle.net/wgoLxanc/, так что я, по крайней мере, понял концепцию. Сложно выяснить, как получить родительский идентификатор.

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Чтобы получить неизвестный идентификатор родительского элемента:

Ванильный Javascript:

На один уровень вверх: 

document.querySelector("YOUR-ELEMENT-SELECTOR").parentNode.id;

На два уровня вверх: 

document.querySelector("YOUR-ELEMENT-SELECTOR").parentNode.parentNode.id;

jQuery:

На один уровень вверх: 

$("YOUR-ELEMENT-SELECTOR").parent().attr("id");

На два уровня вверх: 

$("YOUR-ELEMENT-SELECTOR").parent().parent().attr("id");
0 голосов
/ 22 октября 2019

используйте атрибут данных в радиокнопке для сохранения родительского идентификатора.

см .: как получить родительский div-атрибут данных javascript

...