Merge pull request #14947 from primefaces/issue-14941

Fixed #14941 - ColorPicker | Form elements must have labels
primefaces · Mar 6, 2024 · 4459194 · 4459194
2 parents aeba1e2 + 045824d
commit 4459194
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts
@@ -137,7 +137,8 @@ export class PrimeNGConfig {
             zoomOut: 'Zoom Out',
             rotateRight: 'Rotate Right',
             rotateLeft: 'Rotate Left',
-            listLabel: 'Option List'
+            listLabel: 'Option List',
+            selectColor: 'Select a color'
         }
     };
 

diff --git a/src/app/components/api/translation.ts b/src/app/components/api/translation.ts
@@ -128,4 +128,5 @@ export interface Aria {
     rotateRight?: string;
     rotateLeft?: string;
     listLabel?: string;
+    selectColor?: string;
 }
diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts
@@ -45,4 +45,5 @@ export class TranslationKeys {
     public static readonly HIDE_FILTER_MENU = 'hideFilterMenu';
     public static readonly SELECTION_MESSAGE = 'selectionMessage';
     public static readonly ARIA = 'aria';
+    public static readonly SELECT_COLOR = 'selectColor';
 }
diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts
@@ -2,7 +2,7 @@ import { AnimationEvent, animate, style, transition, trigger } from '@angular/an
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, PLATFORM_ID, Renderer2, TemplateRef, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { OverlayService, PrimeNGConfig } from 'primeng/api';
+import { OverlayService, PrimeNGConfig, TranslationKeys } from 'primeng/api';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
@@ -43,6 +43,7 @@ export const COLORPICKER_VALUE_ACCESSOR: any = {
                 [attr.id]="inputId"
                 [style.backgroundColor]="inputBgColor"
                 [attr.data-pc-section]="'input'"
+                [attr.aria-label]="ariaLabel"
             />
             <div
                 *ngIf="inline || overlayVisible"
@@ -230,6 +231,10 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
         this.hueHandleViewChild = element;
     }
 
+    get ariaLabel() {
+        return this.config?.getTranslation(TranslationKeys.ARIA)[TranslationKeys.SELECT_COLOR];
+    }
+
     onHueMousedown(event: MouseEvent) {
         if (this.disabled) {
             return;