Merged in task/ux-plus-2023_02_x/UXP-178 (pull request #20)

[UXP-178] fix accessibility

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

src/app/shared/carousel/carousel.component.html

@@ -20,9 +20,9 @@
         </div>
         <div class="carousel-caption" *ngIf="item.indexableObject.metadata">
           <div class="carousel-caption-inner">
-            <h3 data-test="carouselObjTitle" [class]="carouselOptions.titleStyle"
+            <h1 data-test="carouselObjTitle" [class]="carouselOptions.titleStyle" class="h3"
                 *ngIf="item.indexableObject.metadata[title]">
-              {{item.indexableObject.metadata[title][0].value}}</h3>
+              {{item.indexableObject.metadata[title][0].value}}</h1>
             <div data-test="carouselObjDesc" class="carousel-caption-text pr-3 pl-2" [class]="carouselOptions.captionStyle"
                  *ngIf="item.indexableObject.metadata[description]; let descriptionObj">
               {{descriptionObj[0].value}}
@@ -51,7 +51,7 @@
 </div>
 
 <div class="text-center play-pause-button">
-  <button [disabled]="isLoading$ | async" type="button" class="btn btn-sm toggle-paused" (click)="togglePaused()">
+  <button [disabled]="isLoading$ | async" [attr.aria-label]="'carousel.play.pause' | translate" type="button" class="btn btn-sm toggle-paused" (click)="togglePaused()">
     <i class="fas fa-play" *ngIf="paused"></i>
     <i class="fas fa-pause" *ngIf="!paused"></i>
   </button>

src/app/shared/explore/section-component/top-section/top-section.component.html

@@ -4,7 +4,7 @@
       <div class="card-header">{{ 'explore.index.' + (topSection.titleKey ? topSection.titleKey : topSection.sortField) | translate }}</div>
     </ng-container>
     <ng-template #listView>
-      <h3 class="mx-2">{{ 'explore.index.' + (topSection.titleKey ? topSection.titleKey : topSection.sortField) | translate }}</h3>
+      <h1 class="h3 mx-2">{{ 'explore.index.' + (topSection.titleKey ? topSection.titleKey : topSection.sortField) | translate }}</h1>
     </ng-template>
     <div [ngClass]="{'card-body': topSection.showAsCard}">
       <div class="row pl-2" *ngIf="topSection.showLayoutSwitch">

src/app/social/social.component.html

@@ -1,4 +1,4 @@
-<div id="a2a" [class.d-none]="!(showOnCurrentRoute$ | async)" data-a2a-scroll-show="0,60"
+<div [attr.aria-label]="'social.component.title' | translate" role="dialog" id="a2a" [class.d-none]="!(showOnCurrentRoute$ | async)" data-a2a-scroll-show="0,60"
      class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" [attr.data-a2a-title]="title" [attr.data-a2a-url]="url">
   <a *ngFor="let button of buttonList" [class]="'a2a_button_' + button" [class.a2a_counter]="showCounters && button !== 'facebook'"></a>
   <a *ngIf="showPlusButton" class="a2a_dd" href="https://www.addtoany.com/share"></a>

src/app/social/social.component.spec.ts

@@ -4,6 +4,8 @@ import { DOCUMENT } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { SocialService } from './social.service';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
 
 describe('SocialComponent', () => {
   let component: SocialComponent;
@@ -17,7 +19,15 @@ describe('SocialComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SocialComponent],
-      imports: [StoreModule.forRoot({})],
+      imports: [
+        StoreModule.forRoot({}),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: SocialService, useValue: socialServiceStub },

src/app/social/social.module.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { SocialComponent } from './social.component';
 
 @NgModule({
   declarations: [
     SocialComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    TranslateModule
   ],
   exports: [
     SocialComponent

src/assets/i18n/en.json5

@@ -4357,6 +4357,8 @@
 
   "none.listelement.badge": "Item",
 
+  "no.description.available": "No description available",
+
   "openaire.broker.title": "OpenAIRE Broker",
 
   "openaire.broker.topics.description": "Below you can see all the topics received from the subscriptions to OpenAIRE.",
@@ -5580,6 +5582,8 @@
 
   "selectable-list-item-control.select": "Select item",
 
+  "social.component.title": "Social Share",
+
   "sorting.ASC": "Ascending",
 
   "sorting.DESC": "Descending",