UFAL/Accessibility existing issues all (ufal#139) (#1300)

* Add lang attributes to description fields

Set HTML lang attributes based on metadata language for various description and metadata display elements to improve i18n and accessibility. Updated templates to bind [attr.lang] on spans, links and browse links; metadata-values now passes mdValue.language into render templates; clarin description component now emits per-entry language and value pairs; ClarinItemBoxView stores itemDescriptionLang; SidebarSearchListElement supports descriptionLang with a getDescriptionLang() hook and OrgUnit implementation returns the description language. These changes ensure displayed metadata uses the correct language attribute when available.

* Improve accessibility: add ARIA labels & i18n keys

Add ARIA attributes and move icon markup to improve screen-reader support across several components. Updated templates to include aria-label on interactive buttons (info, calendar, remove/save/delete/clear actions) and aria-hidden on decorative <i> icons. Adjusted calendar button markup to place the calendar icon inside the button element. Added corresponding i18n keys in many locale JSON5 files so the new labels are translatable (English provided and placeholder entries added across locales; some locales include TODO notes for translation). These changes are focused on accessibility and localization support.

* Improve accessibility and semantic headings

Replace several presentational heading tags with semantically appropriate heading levels (convert h4/h3/h5/h6 to h2/h3 with existing styling classes) across home, footer and item templates to improve document structure. Add aria-hidden to the hidden repository link and aria-live/aria-atomic to the pagination info for better accessibility. Update footer markup to group links into separate ULs (removing BRs) and adjust SCSS selectors to target both heading elements and .h4 class, plus spacing for stacked lists. Also add TranslateModule.forRoot() to an existing-relation-list-element spec to satisfy translations in tests.

* Update cs translations: relation group, license

Replace English strings with Czech translations in src/assets/i18n/cs.json5 for the following keys: form.relation-group.save, form.relation-group.delete, form.relation-group.clear, and submission.cc-license.field-info. Improves localization for relation-group actions and the CC license field.

* Mark decorative paperclip icon aria-hidden

Accessibility tweak: add aria-hidden="true" to the Font Awesome paperclip icon so screen readers ignore the decorative icon. Also replace the non-breaking space inside the <i> tag with a regular space between the icon and the heading text in clarin-files-section.component.html.

* Normalize metadata language to BCP 47 for HTML lang attributes

PR ufal#139 binds [attr.lang] straight from the DSpace metadata language field,
which is stored as Java-style locales (en_US, cs_CZ) or the wildcard *. None
of those are valid BCP 47 / HTML lang values, so assistive technology ignores
them and the accessibility improvement is inert for the common stored values.

Add a single shared metadataLangToBcp47() helper (*/empty/nullish -> null,
"_" -> "-") and a thin dsLang pipe that delegates to it. Route all of PR #139's
lang bindings through it: the pipe in the seven templates, the helper directly
in the three .ts sites. Declare DsLangPipe in the specs that render the pipe
(NO_ERRORS_SCHEMA does not suppress missing pipes), including the shared grid
element test factory. Add unit specs for the helper and pipe plus a DOM
assertion that en_US renders as lang="en-US".

* Translate remaining English strings to Czech in cs.json5

---------



(cherry picked from commit cd1c617)

Co-authored-by: Amad Ul Hassan <hassan@ufal.mff.cuni.cz>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: 3 people

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>