MARP-452 check accessibility of new website

marketplace-ui/src/app/modules/product/product-card/product-card.component.html

@@ -2,39 +2,27 @@
   class="card product-card w-100"
   [style.height]="!isShowInRESTClientEditor ? '250px' : '164px'">
   <div class="d-flex justify-content-between align-items-start">
-    <img
-      class="card-img-top rounded"
-      width="70"
-      height="70"
-      [ngSrc]="product | logo"
-      [alt]="product.names | multilingualism: languageService.selectedLanguage()" />
-    @if (isShowInRESTClientEditor) {
-      <div
-        class="card__tag lh-md px-2 py-1 text-capitalize"
-        [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
-        {{ product.tags[0] }}
-      </div>
-    } @else {
-      <div
-        class="card__tag lh-md px-2 py-1"
-        [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
-        {{ 'common.filter.value.' + product.type | translate }}
-      </div>
-    }
+    <img class="card-img-top rounded" width="70" height="70" [ngSrc]="product | logo"
+      [alt]="product.names | multilingualism: languageService.selectedLanguage()"
+      [lang]="languageService.selectedLanguage()" />
+    <div [lang]="languageService.selectedLanguage()" class="card__tag lh-md px-2 py-1"
+      [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
+      {{ 'common.filter.value.' + product.type | translate }}
+    </div>
   </div>
   <div>
-    <h5 class="card__title text-primary">
+    <h5 class="card__title text-primary" [lang]="languageService.selectedLanguage()">
       {{
-        product.names | multilingualism: languageService.selectedLanguage()
+      product.names | multilingualism: languageService.selectedLanguage()
       }}
     </h5>
     @if (!isShowInRESTClientEditor) {
-      <p class="card__description text-secondary">
+      <p class="card__description text-secondary" [lang]="languageService.selectedLanguage()">
         {{
           product.shortDescriptions
             | multilingualism: languageService.selectedLanguage()
         }}
       </p>
     }
   </div>
-</div>
+</div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.html

@@ -1,15 +1,15 @@
 <div style="margin-bottom: 64px;">
-  <app-product-star-rating-panel (openAddFeedbackDialog)="appModalService.openAddFeedbackDialog()" [isMobileMode]="isMobileMode()" />
+  <app-product-star-rating-panel (openAddFeedbackDialog)="appModalService.openAddFeedbackDialog()"
+    [isMobileMode]="isMobileMode()" />
 </div>
 
 <app-product-feedbacks-panel [isMobileMode]="isMobileMode()" />
 
 @if (isShowBtnMore()) {
-  <div class="d-flex flex-row justify-content-center">
-    <button
-      class="btn border-0 btn-secondary btn-show-more"
-      (click)="openShowFeedbacksDialog()">
-      {{ 'common.feedback.showMoreBtnLabel' | translate }}
-    </button>
-  </div>
+<div class="d-flex flex-row justify-content-center">
+  <button [lang]="languageService.selectedLanguage()" class="btn border-0 btn-secondary btn-show-more"
+    (click)="openShowFeedbacksDialog()">
+    {{ 'common.feedback.showMoreBtnLabel' | translate }}
+  </button>
+</div>
 }

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts

@@ -11,6 +11,7 @@ import { ProductFeedbacksPanelComponent } from './product-feedbacks-panel/produc
 import { AppModalService } from '../../../../shared/services/app-modal.service';
 import { ProductFeedbackService } from './product-feedbacks-panel/product-feedback.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 const MAX_ELEMENTS = 6;
 
@@ -41,6 +42,7 @@ export class ProductDetailFeedbackComponent {
 
   productFeedbackService = inject(ProductFeedbackService);
   appModalService = inject(AppModalService);
+  languageService = inject(LanguageService);
 
   showPopup!: boolean;
 

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html

@@ -1,14 +1,12 @@
 <div class="d-flex flex-row align-items-center">
-  <p class="text-primary mb-0 text-nowrap">{{'common.sort.label' | translate}}:</p>
-  <select
-    class="form-select border-primary text-primary"
-    aria-label="sort"
-    [ngModel]="productFeedbackService.sort()"
+  <p [lang]="languageService.selectedLanguage()" class="text-primary mb-0 text-nowrap">{{'common.sort.label' |
+    translate}}:</p>
+  <select class="form-select border-primary text-primary" aria-label="sort" [ngModel]="productFeedbackService.sort()"
     (change)="onSortChange($event)">
     @for (type of feedbackSortTypes; track $index) {
-      <option [value]="type.sortFn">
-        {{ type.label | translate }}
-      </option>
+    <option [value]="type.sortFn">
+      {{ type.label | translate }}
+    </option>
     }
   </select>
-</div>
+</div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts

@@ -3,6 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { FEEDBACK_SORT_TYPES } from '../../../../../../shared/constants/common.constant';
 import { FormsModule } from '@angular/forms';
 import { ProductFeedbackService } from '../product-feedback.service';
+import { LanguageService } from '../../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-feedback-filter',
@@ -17,6 +18,7 @@ export class FeedbackFilterComponent {
   @Output() sortChange = new EventEmitter<string>();
 
   productFeedbackService = inject(ProductFeedbackService);
+  languageService = inject(LanguageService);
 
   onSortChange(event: Event): void {
     const selectElement = event.target as HTMLSelectElement;

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.html

@@ -1,27 +1,27 @@
 <div class="d-flex flex-column p-0" style="gap: 48px">
   <div class="d-flex flex-row p-0 align-items-center justify-content-between feedback-header">
-    <h4 class="text-secondary mb-0">
+    <h4 [lang]="languageService.selectedLanguage()" class="text-secondary mb-0">
       {{ 'common.feedback.label' | translate }}
     </h4>
     <app-feedback-filter (sortChange)="onSortChange($event)" />
   </div>
   @if (isRenderInModalDialog) {
-    <div class="overflow-auto grid-feedbacks-container-dialog" (scroll)="onScrollCheckAllFeedbacksLoaded($event)">
-      @for (feedback of feedbacks(); track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="overflow-auto grid-feedbacks-container-dialog" (scroll)="onScrollCheckAllFeedbacksLoaded($event)">
+    @for (feedback of feedbacks(); track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   } @else if (isMobileMode()) {
-    <div class="grid-feedbacks-container">
-      @for (feedback of feedbacks(); track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="grid-feedbacks-container">
+    @for (feedback of feedbacks(); track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   } @else {
-    <div class="grid-feedbacks-container">
-      @for (feedback of feedbacks() | slice:0:6; track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="grid-feedbacks-container">
+    @for (feedback of feedbacks() | slice:0:6; track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   }
-</div>
+</div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.ts

@@ -15,6 +15,7 @@ import { ThemeService } from '../../../../../core/services/theme/theme.service';
 import { Feedback } from '../../../../../shared/models/feedback.model';
 import { CommonModule } from '@angular/common';
 import { ProductDetailService } from '../../product-detail.service';
+import { LanguageService } from '../../../../../core/services/language/language.service';
 
 interface CustomElement extends HTMLElement {
   scrollTop: number;
@@ -43,6 +44,7 @@ export class ProductFeedbacksPanelComponent {
   themeService = inject(ThemeService);
   productFeedbackService = inject(ProductFeedbackService);
   productDetailService = inject(ProductDetailService);
+  languageService = inject(LanguageService);
 
   feedbacks: Signal<Feedback[] | undefined> =
     this.productFeedbackService.feedbacks;

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.html

@@ -1,51 +1,45 @@
 <div class="modal-content-wrapper">
   <div class="modal-header border-bottom-0">
-    <button
-      type="button"
-      class="btn-close"
-      aria-label="Close"
-      (click)="activeModal.dismiss()"></button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
   </div>
   <div class="modal-body modal-body-wrapper">
-    <h4 class="add-feedback-title text-primary">
+    <h4 [lang]="languageService.selectedLanguage()" class="add-feedback-title text-primary">
       {{ 'common.feedback.addFeedbackTitle' | translate }}
     </h4>
-    <h5 class="text-secondary">
+    <h5 [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.feedback.addFeedbackDescription' | translate }}
     </h5>
     <div>
-      <p class="text-secondary mb-2">
+      <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2">
         {{ 'common.feedback.currentProductTitle' | translate }}
       </p>
-      <select
-        class="form-select product-item-select border-primary text-primary"
-        aria-label="item">
-        <option>{{ productDetailService.productNames() | multilingualism: languageService.selectedLanguage() }}</option>
+      <select class="form-select product-item-select border-primary text-primary" aria-label="item">
+        <option [lang]="languageService.selectedLanguage()">{{ productDetailService.productNames() | multilingualism:
+          languageService.selectedLanguage() }}</option>
       </select>
     </div>
     <div class="d-flex flex-column flex-grow-1">
-      <p class="text-secondary mb-2">
+      <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2">
         {{ 'common.feedback.starRatingTitle' | translate }}
       </p>
-      <app-star-rating [rate]="feedback.rating" (rateChange)="onRateChange($event)" [starClass]="'adding-feedback-star'" [ratingStarsClass]="'rating-stars'" />
-      <p class="text-secondary mb-2 mt-3">
+      <app-star-rating [rate]="feedback.rating" (rateChange)="onRateChange($event)" [starClass]="'adding-feedback-star'"
+        [ratingStarsClass]="'rating-stars'" />
+      <p [lang]="languageService.selectedLanguage()" [lang]="languageService.selectedLanguage()"
+        class="text-secondary mb-2 mt-3">
         {{ 'common.feedback.commentLabel' | translate }}
       </p>
-      <textarea
-        class="feedback-content-textarea text-primary"
-        maxlength="250"
+      <textarea class="feedback-content-textarea text-primary" maxlength="250"
         [(ngModel)]="feedback.content"></textarea>
     </div>
-    <button
-      class="btn btn-primary border-0 submit-feedback-btn" [disabled]="!feedback.content.trim() || feedback.rating <= 0"
-      (click)="onSubmitFeedback()">
+    <button [lang]="languageService.selectedLanguage()" class="btn btn-primary border-0 submit-feedback-btn"
+      [disabled]="!feedback.content.trim() || feedback.rating <= 0" (click)="onSubmitFeedback()">
       {{ 'common.feedback.submitBtnLabel' | translate }}
     </button>
-    <p class="text-secondary mb-2 text-center">
+    <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2 text-center">
       {{ 'common.feedback.loggedGithubAsLabel' | translate }}
       <span class="user-link">
         {{ displayName }}
       </span>
     </p>
   </div>
-</div>
+</div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.html

@@ -3,11 +3,11 @@
     <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
   </div>
   <div class="modal-body">
-    <img ngSrc="/assets/images/misc/confetti-icon.png"
-      width="60" height="60" alt="Confetti Icon">
-    <h4 class="text-primary">
+    <img ngSrc="/assets/images/misc/confetti-icon.png" width="60" height="60" alt="Confetti Icon">
+    <h4 [lang]="languageService.selectedLanguage()" class="text-primary">
       {{ 'common.feedback.successMessage' | translate }}
     </h4>
-    <h4 class="text-primary">{{ 'common.feedback.thankMessage' | translate }} {{ authService.getDisplayName() ?? '' }}</h4>
+    <h4 [lang]="languageService.selectedLanguage()" class="text-primary">{{ 'common.feedback.thankMessage' | translate
+      }} {{ authService.getDisplayName() ?? '' }}</h4>
   </div>
 </div>

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.ts

@@ -3,6 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuthService } from '../../../../../../../auth/auth.service';
 import { NgOptimizedImage } from '@angular/common';
+import { LanguageService } from '../../../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-success-dialog',
@@ -16,4 +17,6 @@ export class SuccessDialogComponent {
   activeModal = inject(NgbActiveModal);
 
   authService = inject(AuthService);
+
+  languageService = inject(LanguageService);
 }

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.html

@@ -6,7 +6,7 @@
   <app-product-star-rating-number (openAddFeedbackDialog)="openAddFeedbackDialog.emit()" />
   <div></div>
   <div>
-    <p class="text-secondary mb-1">
+    <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-1">
       {{ 'common.feedback.detailedReviews' | translate }}
     </p>
     <div>
@@ -19,8 +19,8 @@
           </div>
         </div>
         <div aria-hidden="true" class="star-rating-counting-line">
-          <div id="star-rating-percent-{{ counting.starRating }}" class="star-rating-percent"
-          starRatingHighlight [percent]="counting.percent!"></div>
+          <div id="star-rating-percent-{{ counting.starRating }}" class="star-rating-percent" starRatingHighlight
+            [percent]="counting.percent!"></div>
         </div>
       </div>
       }

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.ts

@@ -8,6 +8,7 @@ import {
 } from '../../product-star-rating-number/product-star-rating-number.component';
 import { CommonModule } from '@angular/common';
 import { StarRatingCounting } from '../../../../../shared/models/star-rating-counting.model';
+import { LanguageService } from '../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-star-rating-panel',
@@ -28,6 +29,7 @@ export class ProductStarRatingPanelComponent {
   @Output() openAddFeedbackDialog = new EventEmitter<void>();
 
   productStarRatingService = inject(ProductStarRatingService);
+  languageService = inject(LanguageService);
 
   starRatings: Signal<StarRatingCounting[]> = this.productStarRatingService.starRatings;
 }