treegrid

Самостоятельная роль виджета из WAI-ARIA для древовидной сетки.

Древовидная сетка похожа на таблицу и состоит из нескольких ячеек, которые можно раскрыть или скрыть. При этом данные внутри ячеек расположены в определённой иерархии. К примеру, древовидные сетки встречали в почтовых клиентах, в которых важно показать как письма связаны друг с другом.

В HTML нет тега с этой ролью.

Задайте role="treegrid" любому тегу, но лучше всего <div>, <span> или <table>.

Внутри элемента с ролью treegrid должна быть одна или несколько ячеек с ролью row. Эта роль есть по умолчанию у тега <tr>.

ARIA-роли не изменяют внешний вид и поведение элементов, поэтому не забудьте стилизовать древовидную сетку с помощью CSS и добавить поддержку клавиатуры с помощью JavaScript и tabindex.

Для treegrid можно использовать все глобальные ARIA-атрибуты, атрибуты виджетов aria-disabled, aria-invalid, aria-readonly, aria-multiselectable, aria-orientation и aria-required, а также атрибуты связи aria-activedescendant, aria-colcount и aria-rowcount.