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 || null"></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 || null"></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 || null"></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 || null"></span>
             </ds-truncatable-part>
       </span>
   </span>

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

@@ -24,4 +24,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 this.dso.firstMetadata('dc.description')?.language || null;
+  }
 }

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 || null"></span>
       </span>
   </span>
 </ng-template>

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: mdValue.language || null}">
       </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/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 || null">{{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 || null">{{file.firstMetadataValue("dc.description")}}</dd>
                         </dl>
                     </div>
                     <div class="col-2">

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>

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

@@ -20,19 +20,15 @@ export class ClarinDescriptionItemFieldComponent implements OnInit {
   @Input() fields: string[];
 
   /**
-   * The valid text metadata to display - updated with links
+   * Description entries with processed value and language, built from metadata.
    */
-  validTextMetadata: string;
+  descriptionEntries: {value: string, language: string | null}[] = [];
 
   ngOnInit(): void {
-    // Store all description metadata values
-    let updatedMVs = [];
-    this.item.allMetadataValues(this.fields).forEach((value) => {
-      updatedMVs.push(makeLinks(value));
-    });
-
-    // Join the metadata values with a line break
-    this.validTextMetadata = updatedMVs.join('<br>');
+    this.descriptionEntries = this.item.allMetadata(this.fields).map(md => ({
+      value: makeLinks(md.value),
+      language: md.language || null
+    }));
   }
 
 }

src/app/item-page/views-downloads-statistics/views-downloads-statistics.component.html

@@ -23,7 +23,7 @@ <h2 class="card-title mb-0">{{ getTitle() }}</h2>
                     [class.active]="activeMetric === 'views'"
                     (click)="selectMetric('views')">
               <div class="toggle-icon-wrapper">
-                <i class="far fa-eye"></i>
+                <i class="far fa-eye" aria-hidden="true"></i>
               </div>
               <div class="toggle-content">
                 <span>{{ 'statistics.views-downloads.views' | translate }}</span>
@@ -35,7 +35,7 @@ <h2 class="card-title mb-0">{{ getTitle() }}</h2>
                     [class.active]="activeMetric === 'downloads'"
                     (click)="selectMetric('downloads')">
               <div class="toggle-icon-wrapper">
-                <i class="fas fa-download"></i>
+                <i class="fas fa-download" aria-hidden="true"></i>
               </div>
               <div class="toggle-content">
                 <span>{{ 'statistics.views-downloads.downloads' | translate }}</span>

src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

@@ -46,9 +46,11 @@
             />
             <div class="input-group-append">
               <button
-                class="btn btn-outline-secondary fas fa-calendar"
+                class="btn btn-outline-secondary"
+                [attr.aria-label]="'access-control.start-date.calendar-button' | translate"
                 [dsBtnDisabled]="ngForm.disabled"
                 (click)="d.toggle()" type="button">
+                <i class="fas fa-calendar" aria-hidden="true"></i>
               </button>
             </div>
           </div>
@@ -75,9 +77,11 @@
             />
             <div class="input-group-append">
               <button
-                type="button" class="btn btn-outline-secondary fas fa-calendar"
+                type="button" class="btn btn-outline-secondary"
+                [attr.aria-label]="'access-control.end-date.calendar-button' | translate"
                 [dsBtnDisabled]="ngForm.disabled"
                 (click)="d1.toggle()">
+                <i class="fas fa-calendar" aria-hidden="true"></i>
               </button>
             </div>
           </div>

src/app/shared/clarin-item-box-view/clarin-item-box-view.component.html

@@ -28,7 +28,7 @@
         </div>
         <div *ngIf="isSearchResult === false && itemDescription != null" class="row d-block pt-1">
           <div><strong>{{'item.view.box.description.message' | translate}}</strong></div>
-          <div class="clarin-item-description pr-3">{{itemDescription}}</div>
+          <div class="clarin-item-description pr-3" [attr.lang]="itemDescriptionLang">{{itemDescription}}</div>
         </div>
         <div class="row d-flex pt-1">
           <div class="label label-info label-icon"><i class="fas fa-paperclip fa-sm"></i></div>

src/app/shared/clarin-item-box-view/clarin-item-box-view.component.ts

@@ -67,6 +67,10 @@ export class ClarinItemBoxViewComponent implements OnInit {
    * Item's description text.
    */
   itemDescription = '';
+  /**
+   * Language of the item's description metadata value.
+   */
+  itemDescriptionLang: string | null = null;
   /**
    * Items's handle redirection URI.
    */
@@ -145,7 +149,9 @@ export class ClarinItemBoxViewComponent implements OnInit {
     this.itemType = this.item?.firstMetadataValue('dc.type');
     this.itemName = this.item?.firstMetadataValue('dc.title');
     this.itemUri = getItemPageRoute(this.item);
-    this.itemDescription = this.item?.firstMetadataValue('dc.description');
+    const descMeta = this.item?.firstMetadata('dc.description');
+    this.itemDescription = descMeta?.value || null;
+    this.itemDescriptionLang = descMeta?.language || null;
     this.itemPublisher = this.item?.firstMetadataValue('dc.publisher');
     this.itemDate = this.clarinDateService.composeItemDate(this.item);
 

src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html

@@ -8,6 +8,7 @@
         </ng-container>
     </div>
     <button type="button" class="btn btn-secondary"
+            [attr.aria-label]="'form.remove-related-item' | translate"
             (click)="removeSelection()">
         <i class="fas fa-trash" aria-hidden="true"></i>
     </button>

src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.spec.ts

@@ -14,6 +14,7 @@ import { ReorderableRelationship } from '../existing-metadata-list-element/exist
 import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils';
 import { SubmissionService } from '../../../../../submission/submission.service';
 import { SubmissionServiceStub } from '../../../../testing/submission-service.stub';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('ExistingRelationListElementComponent', () => {
   let component: ExistingRelationListElementComponent;
@@ -66,6 +67,7 @@ describe('ExistingRelationListElementComponent', () => {
     init();
     TestBed.configureTestingModule({
       declarations: [ExistingRelationListElementComponent],
+      imports: [TranslateModule.forRoot()],
       providers: [
         { provide: SelectableListService, useValue: selectionService },
         { provide: Store, useValue: store },