fix(color-picker): update color picker

documents/src/pages/elements/color-picker.md

@@ -52,3 +52,13 @@ Color picker will set attribute/property `value` to `""` when users select no-co
 ```html
 <ef-color-picker allow-nocolor></ef-color-picker>
 ```
+
+## Accessibility
+::a11y-intro::
+
+`ef-color-picker` is assigned `role="button"`. States such as `disabled` or `readonly` are programmatically updated to match the element’s visual state. Users can open the dialog with color dialog element and use keyboard navigation to select the color from the color dialog.
+
+`ef-color-picker` has implemented by using [readableColor](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/utils#color-helper) util as `aria-label` to describe a color.
+```
+
+::a11y-end::

packages/elements/src/color-picker/__demo__/index.html

@@ -55,7 +55,9 @@
           const value = event.detail.value;
           hexInputDefault.value = value;
           defaultColorOutput.value += 'Value Change : ' + value + '\n';
-          setTimeout(() => readbleColor.textContent = value ? defaultColorPicker._colorAriaLabel : '', 0);
+          setTimeout(() => {
+            readbleColor.textContent = value ? defaultColorPicker.shadowRoot.querySelector('[part=aria-selection]').getAttribute('aria-label') : '';
+          }, 0);
         });
       </script>
     </demo-block>

packages/elements/src/color-picker/__test__/color-picker.test.js

@@ -32,10 +32,10 @@ describe('color-picker/ColorPicker', () => {
     });
     it('Should update aria-label when change value color', async () => {
       const el = await fixture('<ef-color-picker value="#0000FF"></ef-color-picker>');
-      expect(el._colorAriaLabel).to.equal('blue');
+      expect(el.colorAriaLabel).to.equal('blue');
       el.value = '#ff0000';
       await elementUpdated(el);
-      expect(el._colorAriaLabel).to.equal('red');
+      expect(el.colorAriaLabel).to.equal('red');
     });
     it('Should reset to default value when value is invalid', async () => {
       const el = await fixture('<ef-color-picker value="hello"></ef-color-picker>');

packages/elements/src/color-picker/index.ts

@@ -59,7 +59,7 @@ export class ColorPicker extends ControlElement {
    * Color Description for aria-label
    */
   @state()
-  private _colorAriaLabel = '';
+  private colorAriaLabel = '';
 
   /**
    * Set the color dialog to activate no-color option
@@ -262,7 +262,7 @@ export class ColorPicker extends ControlElement {
     part="aria-selection"
     role="status"
     aria-live="polite"
-    aria-label="${this._colorAriaLabel}"></div>`;
+    aria-label="${this.colorAriaLabel}"></div>`;
   }
 
   /**
@@ -272,7 +272,7 @@ export class ColorPicker extends ControlElement {
   private async updateColorAriaLabel (): Promise<void> {
     const { name, tone, main, percent, mixed } = readableColor(this.value);
     if (name) {
-      this._colorAriaLabel = name;
+      this.colorAriaLabel = name;
       return;
     }
     const translate = await Promise.all([
@@ -282,10 +282,10 @@ export class ColorPicker extends ControlElement {
     const [mainT, percentT, mixedT] = translate;
     const toneT = tone ? `${await this.colorTPromise(tone)}. ` : '';
     if (percent) {
-      this._colorAriaLabel = `${toneT}${mainT} ${percentT} ${mixedT}`;
+      this.colorAriaLabel = `${toneT}${mainT} ${percentT} ${mixedT}`;
     }
     else {
-      this._colorAriaLabel = `${toneT}${mainT}`;
+      this.colorAriaLabel = `${toneT}${mainT}`;
     }
   }