Skip to content
STYLESCAPE

Tree

Examples for the ss-c-tree module and TreeViewManager: a WAI-ARIA tree built from nested lists. The manager adds role="tree|treeitem|group", aria-expanded and a roving tabindex, and handles the arrow keys, Home/End, Enter, Space, * and type-ahead. Authoring the roles up front, as here, avoids a flash of an unstructured list; branches marked aria-expanded="false" stay collapsed without the script.

IFC model tree

  • IfcProject: Harbour bridge
    • IfcSite: Kop van Zuid
      • IfcBuildingStorey: Deck
      • IfcAnnotation: Survey points
HTML 
<ul role="tree" class="ss-c-tree" data-ss="tree" aria-label="Model structure">
            <li role="treeitem" aria-expanded="true">
                <span class="ss-c-tree__label">IfcProject: Harbour bridge</span>
                <ul role="group">
                    <li role="treeitem" aria-expanded="true">
                        <span class="ss-c-tree__label">IfcSite: Kop van Zuid</span>
                        <ul role="group">
                            <li role="treeitem" aria-expanded="false">
                                <span class="ss-c-tree__label">IfcBridge: Main span</span>
                                <ul role="group">
                                    <li role="treeitem"><span class="ss-c-tree__label">IfcBeam (24)</span></li>
                                    <li role="treeitem"><span class="ss-c-tree__label">IfcColumn (8)</span></li>
                                </ul>
                            </li>
                            <li role="treeitem" aria-selected="true"><span class="ss-c-tree__label">IfcBuildingStorey: Deck</span></li>
                            <li role="treeitem"><span class="ss-c-tree__label">IfcAnnotation: Survey points</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

Guide lines and links

HTML 
<ul role="tree" class="ss-c-tree ss-c-tree--lines" data-ss="tree" aria-label="Files">
            <li role="treeitem" aria-expanded="true">
                <span class="ss-c-tree__label">src</span>
                <ul role="group">
                    <li role="treeitem" aria-expanded="true">
                        <span class="ss-c-tree__label">scss</span>
                        <ul role="group">
                            <li role="treeitem"><span class="ss-c-tree__label"><a href="#index-scss">index.scss</a></span></li>
                            <li role="treeitem"><span class="ss-c-tree__label"><a href="#tokens">_tokens.scss</a></span></li>
                        </ul>
                    </li>
                    <li role="treeitem" aria-expanded="false">
                        <span class="ss-c-tree__label">ts</span>
                        <ul role="group">
                            <li role="treeitem"><span class="ss-c-tree__label"><a href="#index-ts">index.ts</a></span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li role="treeitem"><span class="ss-c-tree__label"><a href="#readme">README.md</a></span></li>
        </ul>