Ward Bell
4ccb2269a5
- Use buttons for the TOC “Contents” label when embedded-and-expandable or TOC on the right to satisfy a11y. - Add aria-pressed setting for the toggles in TOC and NavItem. - Clicking the right panel TOC “Contents” button scrolls to top. - When embedded use same rotating caret as sidebar - When embedded and no secondaries, “Content” is just a label. - Gray background for focused buttons rather than outline because can’t get carets to work with outline.
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
<div *ngIf="hasToc" [class.collapsed]="isCollapsed">
|
|
<button *ngIf="!isEmbedded" type="button" class="toc-heading"
|
|
(click)="toTop()" title="Top of page">Contents</button>
|
|
|
|
<div *ngIf="!hasSecondary && isEmbedded" class="toc-heading embedded">Contents</div>
|
|
|
|
<button *ngIf="hasSecondary" type="button" class="toc-heading embedded secondary"
|
|
(click)="toggle(false)"
|
|
title="Expand/collapse contents"
|
|
aria-label="Expand/collapse contents"
|
|
[attr.aria-pressed]="!isCollapsed">
|
|
Contents
|
|
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
|
|
</button>
|
|
|
|
<ul class="toc-list">
|
|
<li *ngFor="let toc of tocList" title="{{toc.title}}" class="{{toc.level}}" [class.secondary]="toc.isSecondary">
|
|
<a [href]="toc.href" [innerHTML]="toc.content"></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<button type="button" (click)="toggle()" *ngIf="hasSecondary"
|
|
class="toc-more-items embedded material-icons" [class.collapsed]="isCollapsed"
|
|
title="Expand/collapse contents"
|
|
aria-label="Expand/collapse contents"
|
|
[attr.aria-pressed]="!isCollapsed">
|
|
</button>
|
|
</div>
|