81901: Set aria-disabled for menu links and sidebar sections

This commit is contained in:
Yura Bondarenko
2021-08-06 14:38:14 +02:00
parent 2265de8d44
commit 1bad7fae3f
3 changed files with 12 additions and 2 deletions

View File

@@ -1,6 +1,8 @@
<div class="sidebar-section"> <div class="sidebar-section">
<a class="nav-item nav-link d-flex flex-row flex-nowrap" <a class="nav-item nav-link d-flex flex-row flex-nowrap"
attr.aria-labelledby="sidebarName-{{section.id}}" [ngClass]="{ disabled: !hasLink }"
[attr.aria-disabled]="!hasLink"
[attr.aria-labelledby]="'sidebarName-' + section.id"
[title]="('menu.section.icon.' + section.id) | translate" [title]="('menu.section.icon.' + section.id) | translate"
[routerLink]="itemModel.link" [routerLink]="itemModel.link"
href="javascript:void(0);" href="javascript:void(0);"

View File

@@ -5,6 +5,7 @@ import { MenuService } from '../../../shared/menu/menu.service';
import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator'; import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model'; import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
import { MenuSection } from '../../../shared/menu/menu.reducer'; import { MenuSection } from '../../../shared/menu/menu.reducer';
import { isNotEmpty } from '../../../shared/empty.util';
/** /**
* Represents a non-expandable section in the admin sidebar * Represents a non-expandable section in the admin sidebar
@@ -24,12 +25,14 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
*/ */
menuID: MenuID = MenuID.ADMIN; menuID: MenuID = MenuID.ADMIN;
itemModel; itemModel;
hasLink: boolean;
constructor(@Inject('sectionDataProvider') menuSection: MenuSection, protected menuService: MenuService, protected injector: Injector,) { constructor(@Inject('sectionDataProvider') menuSection: MenuSection, protected menuService: MenuService, protected injector: Injector,) {
super(menuSection, menuService, injector); super(menuSection, menuService, injector);
this.itemModel = menuSection.model as LinkMenuItemModel; this.itemModel = menuSection.model as LinkMenuItemModel;
} }
ngOnInit(): void { ngOnInit(): void {
this.hasLink = isNotEmpty(this.itemModel.link);
super.ngOnInit(); super.ngOnInit();
} }
} }

View File

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