hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-18 07:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

80103: Fix admin sidebar link a11y issues

Browse Source
This commit is contained in:
Yana De Pauw
2021-06-14 16:14:39 +02:00
parent d253790c7d
commit 15e45c3dec
5 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
View File

@@ -1,11 +1,10 @@
<li class="sidebar-section"> <li class="sidebar-section">
<a class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link"> <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">
<i class="fas fa-{{section.icon}} fa-fw"></i> <i class="fas fa-{{section.icon}} fa-fw"></i>
</a> </a>
<div class="sidebar-collapsible"> <div class="sidebar-collapsible">
<span id="sidebarName-{{section.id}}" class="section-header-text"> <span id="sidebarName-{{section.id}}" class="section-header-text">
<ng-container <a class="nav-item nav-link" tabindex="-1" [routerLink]="itemModel.link">{{itemModel.text | translate}}</a>
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</span> </span>
</div> </div>
</li> </li>

8
src/app/+admin/admin-sidebar/admin-sidebar.component.html
View File

@@ -10,14 +10,14 @@
<div class="sidebar-top-level-items"> <div class="sidebar-top-level-items">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="admin-menu-header sidebar-section"> <li class="admin-menu-header sidebar-section">
<a class="shortcut-icon navbar-brand mr-0" href="#"> <a class="shortcut-icon navbar-brand mr-0" href="javascript:void(0);">
<span class="logo-wrapper"> <span class="logo-wrapper">
<img class="admin-logo" src="assets/images/dspace-logo-mini.svg" <img class="admin-logo" src="assets/images/dspace-logo-mini.svg"
[alt]="('menu.header.image.logo') | translate"> [alt]="('menu.header.image.logo') | translate">
</span> </span>
</a> </a>
<div class="sidebar-collapsible"> <div class="sidebar-collapsible">
<a class="navbar-brand mr-0" href="#"> <a class="navbar-brand mr-0" href="javascript:void(0);">
<h4 class="section-header-text mb-0">{{'menu.header.admin' | <h4 class="section-header-text mb-0">{{'menu.header.admin' |
translate}}</h4> translate}}</h4>
</a> </a>
@@ -33,7 +33,7 @@
<div class="navbar-nav"> <div class="navbar-nav">
<div class="sidebar-section" id="sidebar-collapse-toggle"> <div class="sidebar-section" id="sidebar-collapse-toggle">
<a class="nav-item nav-link shortcut-icon" <a class="nav-item nav-link shortcut-icon"
href="#" href="javascript:void(0);"
(click)="toggle($event)"> (click)="toggle($event)">
<i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right" <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
[title]="'menu.section.icon.pin' | translate"></i> [title]="'menu.section.icon.pin' | translate"></i>
@@ -42,7 +42,7 @@
</a> </a>
<div class="sidebar-collapsible"> <div class="sidebar-collapsible">
<a class="nav-item nav-link sidebar-section" <a class="nav-item nav-link sidebar-section"
href="#" href="javascript:void(0);"
(click)="toggle($event)"> (click)="toggle($event)">
<span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span> <span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span>
<span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span> <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span>

4
src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
View File

@@ -3,12 +3,12 @@
value: ((expanded | async) ? 'endBackground' : 'startBackground'), value: ((expanded | async) ? 'endBackground' : 'startBackground'),
params: {endColor: (sidebarActiveBg | async)}}"> params: {endColor: (sidebarActiveBg | async)}}">
<div class="icon-wrapper"> <div class="icon-wrapper">
<a class="nav-item nav-link shortcut-icon" attr.aria.labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" (click)="toggleSection($event)" href="#"> <a class="nav-item nav-link shortcut-icon" attr.aria.labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" (click)="toggleSection($event)" href="javascript:void(0);">
<i class="fas fa-{{section.icon}} fa-fw"></i> <i class="fas fa-{{section.icon}} fa-fw"></i>
</a> </a>
</div> </div>
<div class="sidebar-collapsible"> <div class="sidebar-collapsible">
<a class="nav-item nav-link" href="#" <a class="nav-item nav-link" href="javascript:void(0);" tabindex="-1"
(click)="toggleSection($event)"> (click)="toggleSection($event)">
<span id="sidebarName-{{section.id}}" class="section-header-text"> <span id="sidebarName-{{section.id}}" class="section-header-text">
<ng-container <ng-container

2
src/app/shared/menu/menu-item/link-menu-item.component.html
View File

@@ -1 +1 @@
<a class="nav-item nav-link" [ngClass]="{'disabled': !hasLink}" [routerLink]="getRouterLink()">{{item.text | translate}}</a> <a href="javascript:void(0);" class="nav-item nav-link" [ngClass]="{'disabled': !hasLink}" [routerLink]="getRouterLink()">{{item.text | translate}}</a>

2
src/app/shared/menu/menu-item/onclick-menu-item.component.html
View File

@@ -1 +1 @@
<a class="nav-item nav-link" role="button" (click)="item.function()">{{item.text | translate}}</a> <a href="javascript:void(0);" class="nav-item nav-link" role="button" (click)="item.function()">{{item.text | translate}}</a>