Элемент дерева — один узел дерева: строка
с переключателем ветви, иконкой и подписью и, у ветви, группа дочерних
узлов. Отдельно от дерева узел не используют: раскрытие, роли и клавиатуру
даёт корень sf-tree.
Минимальную разметку показывает пример выше. Части узла:
sf-tree-item — сам узел, прямой потомок sf-tree или sf-tree-group.
sf-tree-item-container с утилитами flex items-cross-center — строка
узла. По порядку в ней: переключатель (sf-icon-button или
sf-tree-chevron) или sf-tree-toggle-spacer у листа, необязательная
иконка sf-icon и подпись.
sf-tree-item-name — подпись; занимает остаток строки.
sf-tree-group — дочерние узлы ветви, сразу после строки.
Значения атрибутов узла: open — ветвь раскрыта, data-value — значение
для событий дерева, data-open-icon и data-closed-icon — иконки кнопки
раскрытия, aria-disabled="true" — узел недоступен.
Варианты
Иконка
Иконка sf-icon перед подписью показывает тип узла. Она берёт цвет текста
узла; другой цвет задаёт переменная --sf-tree-item-icon--color.
Если узел ведёт на страницу, подпись — ссылка <a class="sf-tree-item-name">:
Enter на узле переходит по ней. Уберите ссылку из порядка Tab
(tabindex="-1"): фокус получает сам узел.
