add aria and alt attributes to base header as well

This commit is contained in:
Art Lowel
2021-06-16 13:05:03 +02:00
parent eead947352
commit b556234207
5 changed files with 12 additions and 9 deletions

View File

@@ -2,10 +2,10 @@
<div class="container">
<div class="d-flex flex-row justify-content-between">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg"/>
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
<nav class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
<ds-search-navbar></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
@@ -13,7 +13,7 @@
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" aria-label="Toggle navigation">
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>

View File

@@ -1,6 +1,7 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-light navbar-expand-md p-md-0 navbar-container"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
class="navbar navbar-light navbar-expand-md p-md-0 navbar-container"
role="navigation" [attr.aria-label]="'nav.main.description' | translate"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
<div class="container">
<div class="reset-padding-md w-100">
<div id="collapsingNav">

View File

@@ -2353,6 +2353,8 @@
"nav.stop-impersonating": "Stop impersonating EPerson",
"nav.toggle" : "Toggle navigation",
"nav.user.description" : "User profile bar",

View File

@@ -1,8 +1,8 @@
<header class="header">
<nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
<div class="d-flex flex-grow-1">
<a class="navbar-brand m-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" alt="logo"/>
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
</div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
@@ -13,7 +13,7 @@
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" aria-label="Toggle navigation">
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>

View File

@@ -1,10 +1,10 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container"
role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
role="navigation" [attr.aria-label]="'nav.main.description' | translate">
<div class="container h-100">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" alt="logo"/>
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
<div id="collapsingNav" class="w-100 h-100">