Как добавить атрибуты aria-labelledby = "*" к общим компонентам, которые будут повторяться несколько раз на странице?

Question

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

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="I cannot add a static ID here since this will be repeated multiple times in a page" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="How to reference the above button here?"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Я не хочу, чтобы добавить идентификатор для моей кнопки, так как она будет повторяться несколько раз на странице. Есть ли другой способ добавить атрибуты aria-labelledby здесь без динамического создания идентификатора?

Answer 1

aria-labelledby, from MDN:

содержит идентификаторы элементов этикеток в объектах, таких как элементы ввода, виджеты и групп

Если вы хотите использовать labelledby вы должны иметь идентификаторы. Тем не менее, вы можете использовать разные идентификаторы для разных кнопок, и элементы имеют соответствующий идентификатор как часть их атрибута labelledby.

Если вы используете систему управления контентом, вы должны иметь возможность написать цикл, который будет генерировать идентификатор с номером, чтобы каждая кнопка ассоциировалась с другим идентификатором, и повторно использовать этот идентификатор как часть labelledby ,

Значение labelledby не имеет смысла; это крючок, который говорит о вспомогательной технологии. «Thing A обозначается вещью с этим идентификатором».