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="container">
<div class="d-flex flex-row justify-content-between"> <div class="d-flex flex-row justify-content-between">
<a class="navbar-brand my-2" routerLink="/home"> <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> </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-search-navbar></ds-search-navbar>
<ds-lang-switch></ds-lang-switch> <ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu> <ds-auth-nav-menu></ds-auth-nav-menu>
@@ -13,7 +13,7 @@
<div class="pl-2"> <div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()" <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav" 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> <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button> </button>
</div> </div>

View File

@@ -1,6 +1,7 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}" <nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')" [@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="container">
<div class="reset-padding-md w-100"> <div class="reset-padding-md w-100">
<div id="collapsingNav"> <div id="collapsingNav">

View File

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

View File

@@ -2,7 +2,7 @@
<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"> <div class="d-flex flex-grow-1">
<a class="navbar-brand m-2" routerLink="/home"> <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> </a>
</div> </div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center"> <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
@@ -13,7 +13,7 @@
<div class="pl-2"> <div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()" <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav" 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> <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button> </button>
</div> </div>

View File

@@ -1,10 +1,10 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}" <nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container" 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"> <div class="container h-100">
<a class="navbar-brand my-2" routerLink="/home"> <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> </a>
<div id="collapsingNav" class="w-100 h-100"> <div id="collapsingNav" class="w-100 h-100">