[Port to dtq-dev] Accessibility existing issues all

src/app/clarin-navbar-top/clarin-navbar-top.component.html

@@ -16,7 +16,7 @@
           </a>
         </span>
       </div>
-      <a class="hidden" id="repository_path" [href]="repositoryPath"></a>
+      <a class="hidden" id="repository_path" [href]="repositoryPath" aria-hidden="true"></a>
       <div *ngIf="authenticatedUser != null" class="badge clarin-logout-badge px-2 py-1">
         <span>
           <a routerLink="/profile" style="color: #FFF;">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -31,7 +31,7 @@ <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
       </p>
       <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text">
         <ds-truncatable-part [id]="dso.id" [minLines]="3">
-          <span [innerHTML]="firstMetadataValue('dc.description')"></span>
+          <span [innerHTML]="firstMetadataValue('dc.description')" [attr.lang]="dso.firstMetadata('dc.description')?.language | dsLang"></span>
         </ds-truncatable-part>
       </p>
       <div *ngIf="linkType != linkTypes.None" class="text-center">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -35,7 +35,7 @@ <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
       </p>
       <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text">
         <ds-truncatable-part [id]="dso.id" [minLines]="3">
-          <span [innerHTML]="firstMetadataValue('dc.description')"></span>
+          <span [innerHTML]="firstMetadataValue('dc.description')" [attr.lang]="dso.firstMetadata('dc.description')?.language | dsLang"></span>
         </ds-truncatable-part>
       </p>
       <div *ngIf="linkType != linkTypes.None" class="text-center">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -25,7 +25,7 @@ <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
       </ds-truncatable-part>
       <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text text-muted">
         <ds-truncatable-part [id]="dso.id" [minLines]="3">
-          <span [innerHTML]="firstMetadataValue('dc.description')"></span>
+          <span [innerHTML]="firstMetadataValue('dc.description')" [attr.lang]="dso.firstMetadata('dc.description')?.language | dsLang"></span>
         </ds-truncatable-part>
       </p>
       <div *ngIf="linkType != linkTypes.None" class="text-center">

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html

@@ -31,7 +31,7 @@
       <span *ngIf="dso.allMetadata(['dc.description']).length > 0"
             class="item-list-org-unit-description">
             <ds-truncatable-part [id]="dso.id" [minLines]="3"><span
-                    [innerHTML]="firstMetadataValue('dc.description')"></span>
+                    [innerHTML]="firstMetadataValue('dc.description')" [attr.lang]="dso.firstMetadata('dc.description')?.language | dsLang"></span>
             </ds-truncatable-part>
       </span>
   </span>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts

@@ -5,6 +5,7 @@ import { of as observableOf } from 'rxjs';
 import { OrgUnitSearchResultListElementComponent } from './org-unit-search-result-list-element.component';
 import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
+import { DsLangPipe } from '../../../../../shared/utils/ds-lang.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
@@ -75,7 +76,7 @@ describe('OrgUnitSearchResultListElementComponent', () => {
           }
         }
       )],
-      declarations: [ OrgUnitSearchResultListElementComponent , TruncatePipe],
+      declarations: [ OrgUnitSearchResultListElementComponent , TruncatePipe, DsLangPipe],
       providers: [
         { provide: TruncatableService, useValue: {} },
         { provide: DSONameService, useClass: DSONameServiceMock },
@@ -145,7 +146,7 @@ describe('OrgUnitSearchResultListElementComponent', () => {
           }
         }
       )],
-      declarations: [OrgUnitSearchResultListElementComponent, TruncatePipe],
+      declarations: [OrgUnitSearchResultListElementComponent, TruncatePipe, DsLangPipe],
       providers: [
         {provide: TruncatableService, useValue: {}},
         {provide: DSONameService, useClass: DSONameServiceMock},

src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/org-unit/org-unit-sidebar-search-list-element.component.ts

@@ -5,6 +5,7 @@ import { ItemSearchResult } from '../../../../../shared/object-collection/shared
 import { Component } from '@angular/core';
 import { SidebarSearchListElementComponent } from '../../../../../shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component';
 import { Item } from '../../../../../core/shared/item.model';
+import { metadataLangToBcp47 } from '../../../../../shared/utils/metadata-language.util';
 
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModal)
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent)
@@ -24,4 +25,11 @@ export class OrgUnitSidebarSearchListElementComponent extends SidebarSearchListE
   getDescription(): string {
     return this.firstMetadataValue('dc.description');
   }
+
+  /**
+   * Get the language of the Org Unit description.
+   */
+  getDescriptionLang(): string | null {
+    return metadataLangToBcp47(this.dso.firstMetadata('dc.description')?.language);
+  }
 }

src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.html

@@ -1,7 +1,7 @@
 <ng-template #descTemplate>
   <span class="text-muted">
       <span class="item-list-job-title">
-        <span [innerHTML]="mdRepresentation.firstMetadataValue(['dc.description'])"></span>
+        <span [innerHTML]="mdRepresentation.firstMetadataValue(['dc.description'])" [attr.lang]="mdRepresentation.firstMetadata(['dc.description'])?.language | dsLang"></span>
       </span>
   </span>
 </ng-template>

src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.spec.ts

@@ -8,6 +8,7 @@ import { ItemMetadataRepresentation } from '../../../../core/shared/metadata-rep
 import { OrgUnitItemMetadataListElementComponent } from './org-unit-item-metadata-list-element.component';
 import { Item } from '../../../../core/shared/item.model';
 import { MetadataValue } from '../../../../core/shared/metadata.models';
+import { DsLangPipe } from '../../../../shared/utils/ds-lang.pipe';
 
 const description = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.';
 const organisation = 'Anonymous';
@@ -24,7 +25,7 @@ describe('OrgUnitItemMetadataListElementComponent', () => {
       imports:[
         NgbModule
       ],
-      declarations: [OrgUnitItemMetadataListElementComponent],
+      declarations: [OrgUnitItemMetadataListElementComponent, DsLangPipe],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(OrgUnitItemMetadataListElementComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }

src/app/footer/footer.component.html

@@ -2,25 +2,27 @@
   <div class="lindat-common2 lindat-common-footer">
     <footer data-version="3.5.0" data-build="67e455771cd6a00647a289a5d7b0c8a3380d3410">
       <div id="about-lindat">
-        <h4><a href="https://lindat.cz/sites/default/files/2021-01/lindat_clariah_flyer.pdf">LINDAT/CLARIAH-CZ</a></h4>
+        <h2 class="h4"><a href="https://lindat.cz/sites/default/files/2021-01/lindat_clariah_flyer.pdf">LINDAT/CLARIAH-CZ</a></h2>
         <ul>
           <li><a href="https://lindat.cz/files/mission-en.pdf">Mission Statement</a></li>
           <li><a href="https://lindat.cz/ab">Advisory Board</a></li>
           <li><a href="https://lindat.cz/events">Events</a></li>
           <li><a href="https://www.clarin.eu/">CLARIN Participation</a></li>
           <li><a href="https://www.dariah.eu/">DARIAH Participation</a></li>
-          <br/>
+        </ul>
+        <ul>
           <li><a href="https://lindat.cz/faq-repository">FAQ</a></li>
           <li><a href="mailto:lindat-help@ufal.mff.cuni.cz">Helpdesk</a></li>
           <li><a href="https://lindat.cz/user_feedback">User Feedback Form</a></li>
-          <br/>
+        </ul>
+        <ul>
           <li><a href="https://ufal.mff.cuni.cz/grants/lindatclariah-cz/en">Hosting Institution</a></li>
           <li><a href="https://lindat.cz/acknowledgement">Acknowledge LINDAT/CLARIAH-CZ</a></li>
           <li><a href="https://ror.org/00dd4fz34">Research Organization Registry</a></li>
         </ul>
       </div>
       <div id="about-partners">
-        <h4><a href="https://lindat.cz/partners">Partners</a></h4>
+        <h2 class="h4"><a href="https://lindat.cz/partners">Partners</a></h2>
         <ul>
           <li>Charles University
             <ul>
@@ -66,7 +68,7 @@ <h4><a href="https://lindat.cz/partners">Partners</a></h4>
         </ul>
       </div>
       <div id="about-website">
-        <h4><a href="https://lindat.cz/services">Services</a></h4>
+        <h2 class="h4"><a href="https://lindat.cz/services">Services</a></h2>
         <ul>
           <li><a href="https://lindat.mff.cuni.cz/en/monitoring">Service Status</a></li>
           <li><a href="https://lindat.mff.cuni.cz/repository/static/about">About and Policies</a></li>

src/app/footer/footer.component.scss

@@ -706,7 +706,8 @@
 .lindat-common2 #badges-b {
   font-size: 10pt;
 }
-.lindat-common2 footer h4 {
+.lindat-common2 footer h4,
+.lindat-common2 footer .h4 {
   font-size: 14pt;
   line-height: 64pt;
   margin: 0;
@@ -718,10 +719,14 @@
 }
 .lindat-common2 footer h4 a,
 .lindat-common2 footer h4 a:hover,
-.lindat-common2 footer h4 a:active {
+.lindat-common2 footer h4 a:active,
+.lindat-common2 footer .h4 a,
+.lindat-common2 footer .h4 a:hover,
+.lindat-common2 footer .h4 a:active {
   text-decoration: underline;
 }
-.lindat-common2 footer #about-partners h4 {
+.lindat-common2 footer #about-partners h4,
+.lindat-common2 footer #about-partners .h4 {
   margin-left: 33%;
 }
 .lindat-common2 footer #about-partners > ul > li {
@@ -744,6 +749,9 @@
 .lindat-common2 footer #about-partners > ul {
   margin-left: 1em;
 }
+.lindat-common2 #about-lindat > ul:not(:last-child) {
+  margin-bottom: 1em;
+}
 .lindat-common2 #about-lindat li,
 .lindat-common2 #about-website li,
 .lindat-common2 footer > div > ul li.lindat-alone,

src/app/home-page/home-page.component.html

@@ -7,15 +7,15 @@
             <div class="wrapper">
               <div *ngIf="slide.short === 'LData'">
                 <img src="assets/images/home-page-glass.png" class="glass-image" alt="{{'home.image.glass' | translate}}">
-                <h3 class="carousel-ldata-info">{{'home-page.carousel.ldata.info' | translate}}</h3>
-                <h5 class="carousel-ldata-find">{{'home-page.carousel.ldata.find' | translate}}</h5>
-                <h5 class="carousel-ldata-citation-support">{{'home-page.carousel.ldata.citation-support' | translate}}</h5>
+                <h2 class="h3 carousel-ldata-info">{{'home-page.carousel.ldata.info' | translate}}</h2>
+                <h3 class="h5 carousel-ldata-find">{{'home-page.carousel.ldata.find' | translate}}</h3>
+                <h3 class="h5 carousel-ldata-citation-support">{{'home-page.carousel.ldata.citation-support' | translate}}</h3>
               </div>
               <div *ngIf="slide.short === 'Free Deposit'">
-                <h3 class="h5-font carousel-deposit-header">{{'home-page.carousel.deposit.header' | translate}}</h3>
-                <h5 class="h5-font carousel-deposit-info">{{'home-page.carousel.deposit.info' | translate}}</h5>
-                <h5 class="h5-font carousel-deposit-find">{{'home-page.carousel.deposit.find' | translate}}</h5>
-                <h5 class="h5-font carousel-deposit-cite">{{'home-page.carousel.deposit.cite' | translate}}</h5>
+                <h2 class="h3 h5-font carousel-deposit-header">{{'home-page.carousel.deposit.header' | translate}}</h2>
+                <h3 class="h5 h5-font carousel-deposit-info">{{'home-page.carousel.deposit.info' | translate}}</h3>
+                <h3 class="h5 h5-font carousel-deposit-find">{{'home-page.carousel.deposit.find' | translate}}</h3>
+                <h3 class="h5 h5-font carousel-deposit-cite">{{'home-page.carousel.deposit.cite' | translate}}</h3>
               </div>
               <div *ngIf="slide.short === 'Citation'">
                 <div class="carousel-deposit-citation">

src/app/item-page/clarin-files-section/clarin-files-section.component.html

@@ -1,6 +1,6 @@
 <ng-container>
   <ds-clarin-license-info class="mt-3 d-block" [item]="item"></ds-clarin-license-info>
-  <h6><i class="fa fa-paperclip">&nbsp;</i>{{'item.page.files.head' | translate}}</h6>
+  <h2 class="h6"><i class="fa fa-paperclip" aria-hidden="true"></i> {{'item.page.files.head' | translate}}</h2>
   <div class="pb-3">
     <span class="pr-1">
       <a class="btn btn-download" (click)="openCommandModal(commandModal)" style="text-decoration: none"

src/app/item-page/edit-item-page/item-delete/item-delete.component.html

@@ -38,8 +38,9 @@ <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
                                         <div class="ml-auto">
                                             <div class="btn-group">
                                                 <button class="btn btn-outline-info btn-sm"
+                                                        [attr.aria-label]="'item.delete.virtual-metadata.info' | translate"
                                                         (click)="openVirtualMetadataModal(virtualMetadataModal)">
-                                                    <i class="fas fa-info fa-fw"></i>
+                                                    <i class="fas fa-info fa-fw" aria-hidden="true"></i>
                                                 </button>
                                             </div>
                                         </div>

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -4,38 +4,39 @@
       Choose a template. Priority: markdown, link, browse link.
       -->
       <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? link : (hasBrowseDefinition() ? browselink : simple)));
-        context: {value: mdValue.value}">
+        context: {value: mdValue.value, lang: getLang(mdValue)}">
       </ng-container>
       <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
     </ng-container>
 </ds-metadata-field-wrapper>
 
 <!-- Render value as markdown -->
-<ng-template #markdown let-value="value">
-  <span class="dont-break-out" [innerHTML]="value | dsMarkdown | async">
+<ng-template #markdown let-value="value" let-lang="lang">
+  <span class="dont-break-out" [innerHTML]="value | dsMarkdown | async" [attr.lang]="lang">
   </span>
 </ng-template>
 
 <!-- Render value as a link (href and label) -->
-<ng-template #link let-value="value">
+<ng-template #link let-value="value" let-lang="lang">
     <a class="dont-break-out ds-simple-metadata-link"
       [href]="value"
       [attr.target]="getLinkAttributes(value).target"
       [attr.rel]="getLinkAttributes(value).rel"
+      [attr.lang]="lang"
       role="link"
       tabindex="0">
       {{value}}
     </a>
 </ng-template>
 
 <!-- Render simple value in a span  -->
-<ng-template #simple let-value="value">
-  <span class="dont-break-out preserve-line-breaks">{{value}}</span>
+<ng-template #simple let-value="value" let-lang="lang">
+  <span class="dont-break-out preserve-line-breaks" [attr.lang]="lang">{{value}}</span>
 </ng-template>
 
 <!-- Render value as a link to browse index -->
-<ng-template #browselink let-value="value">
+<ng-template #browselink let-value="value" let-lang="lang">
   <a class="dont-break-out preserve-line-breaks ds-browse-link"
      [routerLink]="['/browse', browseDefinition.id]"
-     [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
+     [queryParams]="getQueryParams(value)" [attr.lang]="lang" role="link" tabindex="0">{{value}}</a>
 </ng-template>

src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts

@@ -63,6 +63,15 @@ describe('MetadataValuesComponent', () => {
     }
   });
 
+  it('should render the metadata language as a normalized BCP 47 lang attribute', () => {
+    const langEls = fixture.debugElement.queryAll(By.css('[lang]'));
+    expect(langEls.length).toBeGreaterThan(0);
+    langEls.forEach((el) => {
+      expect(el.nativeElement.getAttribute('lang')).toEqual('en-US');
+    });
+    expect(fixture.nativeElement.innerHTML).not.toContain('lang="en_US"');
+  });
+
   it('should contain separators equal to the amount of metadata values minus one', () => {
     const separators = fixture.debugElement.queryAll(By.css('span.separator'));
     expect(separators.length).toBe(mockMetadata.length - 1);

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -5,6 +5,7 @@ import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
 import { hasValue } from '../../../shared/empty.util';
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
 import { environment } from '../../../../environments/environment';
+import { metadataLangToBcp47 } from '../../../shared/utils/metadata-language.util';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -112,4 +113,13 @@ export class MetadataValuesComponent implements OnChanges {
       return { target: '_blank', rel: 'noopener noreferrer' };
     }
   }
+
+  /**
+   * Normalize a metadata value's language into a valid BCP 47 tag for the HTML
+   * `lang` attribute, or null when none applies.
+   * @param value A MetadataValue being displayed
+   */
+  getLang(value: MetadataValue): string | null {
+    return metadataLangToBcp47(value.language);
+  }
 }

src/app/item-page/full/field-components/file-section/full-file-section.component.html

@@ -28,7 +28,7 @@ <h3 class="h5 simple-view-element-header">{{"item.page.filesection.original.bund
 
                           <ng-container *ngIf="file.hasMetadata('dc.description')">
                             <dt class="col-md-4">{{"item.page.filesection.description" | translate}}</dt>
-                            <dd class="col-md-8">{{file.firstMetadataValue("dc.description")}}</dd>
+                            <dd class="col-md-8" [attr.lang]="file.firstMetadata('dc.description')?.language | dsLang">{{file.firstMetadataValue("dc.description")}}</dd>
                           </ng-container>
                         </dl>
                     </div>
@@ -69,7 +69,7 @@ <h3 class="h5 simple-view-element-header">{{"item.page.filesection.license.bundl
 
 
                             <dt class="col-md-4">{{"item.page.filesection.description" | translate}}</dt>
-                            <dd class="col-md-8">{{file.firstMetadataValue("dc.description")}}</dd>
+                            <dd class="col-md-8" [attr.lang]="file.firstMetadata('dc.description')?.language | dsLang">{{file.firstMetadataValue("dc.description")}}</dd>
                         </dl>
                     </div>
                     <div class="col-2">

src/app/item-page/full/field-components/file-section/full-file-section.component.spec.ts

@@ -7,6 +7,7 @@ import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.m
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { VarDirective } from '../../../../shared/utils/var.directive';
 import { FileSizePipe } from '../../../../shared/utils/file-size-pipe';
+import { DsLangPipe } from '../../../../shared/utils/ds-lang.pipe';
 import { MetadataFieldWrapperComponent } from '../../../../shared/metadata-field-wrapper/metadata-field-wrapper.component';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
@@ -67,7 +68,7 @@ describe('FullFileSectionComponent', () => {
           useClass: TranslateLoaderMock
         }
       }), BrowserAnimationsModule],
-      declarations: [FullFileSectionComponent, VarDirective, FileSizePipe, MetadataFieldWrapperComponent],
+      declarations: [FullFileSectionComponent, VarDirective, FileSizePipe, MetadataFieldWrapperComponent, DsLangPipe],
       providers: [
         { provide: BitstreamDataService, useValue: bitstreamDataService },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },

src/app/item-page/simple/field-components/clarin-description-item-field/clarin-description-item-field.component.html

@@ -1 +1,3 @@
-<div [innerHTML]="validTextMetadata" style="white-space: pre-line;"></div>
+<div *ngFor="let entry of descriptionEntries" [attr.lang]="entry.language" style="white-space: pre-line;">
+  <span [innerHTML]="entry.value"></span>
+</div>