Commits

Tim Donohue authored and GitHub committed adb40d87123 Merge
Merge pull request #1295 from atmire/w2p-81901_Fix-sidebar-a11y-issues

Fix sidebar a11y issues
No tags
gidlmaster

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html

Modified
1 -<li class="sidebar-section">
2 - <a href="javascript:void(0);" class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link">
1 +<div class="sidebar-section">
2 + <a class="nav-item nav-link d-flex flex-row flex-nowrap"
3 + [ngClass]="{ disabled: !hasLink }"
4 + [attr.aria-disabled]="!hasLink"
5 + [attr.aria-labelledby]="'sidebarName-' + section.id"
6 + [title]="('menu.section.icon.' + section.id) | translate"
7 + [routerLink]="itemModel.link"
8 + (keyup.space)="navigate($event)"
9 + (keyup.enter)="navigate($event)"
10 + href="javascript:void(0);"
11 + >
12 + <div class="shortcut-icon">
3 13 <i class="fas fa-{{section.icon}} fa-fw"></i>
14 + </div>
15 + <div class="sidebar-collapsible">
16 + <div class="toggle">
17 + <span id="sidebarName-{{section.id}}" class="section-header-text">
18 + {{itemModel.text | translate}}
19 + </span>
20 + </div>
21 + </div>
4 22 </a>
5 - <div class="sidebar-collapsible">
6 - <span id="sidebarName-{{section.id}}" class="section-header-text">
7 - <a class="nav-item nav-link" tabindex="-1" [routerLink]="itemModel.link">{{itemModel.text | translate}}</a>
8 - </span>
9 - </div>
10 -</li>
23 +</div>

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut