fix(navigation): make navigations accessible
define role attributes for banner, navigation, and main to ensure these regions are exposed as landmarks in VoiceOver
use proper division element for navigation container
tie in aria-* attributes so user and help dropdown's properly express expanded/collapsed state in VoiceOver
use proper nav element for sidebar navigation
</a>
</ng-template>
- <header *ngIf="!firstTime">
+ <header *ngIf="!firstTime" role="banner">
<!-- Navbar: Logged Out -->
<nav class="navbar navbar-fixed-top navbar-light loggedOut"
+ role="navigation"
*ngIf="!loggedIn">
<!-- Logo -->
<ng-container *ngTemplateOutlet="brandTemplate"></ng-container>
</nav>
<!-- Navbar: Logged In -->
- <nav *ngIf="loggedIn"
+ <div *ngIf="loggedIn"
class="navbar navbar-pf-vertical">
<div class="navbar-header">
<!-- Top Navbar -->
- <nav>
- <ul class="nav navbar-nav navbar-right navbar-iconic">
+ <nav role="navigation">
+ <ul class="nav navbar-nav navbar-right navbar-iconic" role="list">
<!-- Help Navbar -->
class="dropdown help">
<a dropdownToggle
class="dropdown-toggle nav-item-iconic"
- id="dropdownHelp"
+ id="helpDropdown"
aria-haspopup="true"
+ aria-label="Help Dropdown"
+ aria-controls="helpDropdownMenu"
+ role="link"
aria-expanded="true">
<span title="Help"
class="fa pficon-help"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu"
- aria-labelledby="horizontalDropdownMenu1">
+ id="helpDropdownMenu"
+ aria-labelledby="helpDropdown">
<li>
<a [href]="tutorialLink"
rel="nofollow"
class="dropdown user">
<a dropdownToggle
class="dropdown-toggle nav-item-iconic"
- id="dropdownMenu2"
+ id="userDropdown"
aria-haspopup="true"
- aria-expanded="true">
+ aria-controls="userDropdownMenu"
+ aria-label="User Dropdown"
+ role="link"
+ aria-expanded="false">
<span title="Username"
class="fa pficon-user"></span>
<span class="username">{{ ( user$ | async)?.name }}</span>
</a>
<ul *dropdownMenu
class="dropdown-menu"
- aria-labelledby="dropdownMenu2">
+ id="userDropdownMenu"
+ aria-labelledby="userDropdown">
<li>
<a (click)="logout()">Logout</a>
</li>
</li>
</ul>
</nav>
- </nav>
+ </div>
<!--/.navbar-->
</header>
<!-- Sidebar -->
- <div class="nav-pf-vertical hidden-icons-pf"
+ <nav class="nav-pf-vertical hidden-icons-pf"
+ role="navigation"
*ngIf="loggedIn">
- <ul class="list-group">
+ <ul class="list-group" role="list">
<li class="list-group-item"
routerLinkActive="active">
<a routerLink="dashboard">
</a>
</li>
</ul>
- </div>
- <main class="container-fluid container-pf-nav-pf-vertical"
+ </nav>
+ <main role="main"
+ class="container-fluid container-pf-nav-pf-vertical"
*ngIf="loggedIn">
<router-outlet></router-outlet>
</main>
