@vonage/vivid 5.4.0 → 5.5.0

package/color-picker/definition.js

@@ -4,15 +4,18 @@ import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
 import { attr, observable, nullableNumberConverter, ref, when, html, slotted, repeat } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
+import { T as TrappedFocus } from '../unbundled/trapped-focus.js';
 import { B as BaseColorPicker, i as isValidHexColor } from '../unbundled/base-color-picker.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
 
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold)}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-title{display:block;margin-block-end:8px}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input){width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}";
+const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}";
 
 // Clamps a value between an upper and lower bound.
 // We use ternary operators because it makes the minified code
@@ -602,7 +605,11 @@ const vcPickerTag = VC_HEX_PICKER_TAG;
 const vcInputTag = VC_HEX_INPUT_TAG;
 class ColorPicker extends WithContextualHelp(
   WithFeedback(
-    WithErrorText(WithSuccessText(DelegatesAria(BaseColorPicker(VividElement))))
+    WithErrorText(
+      WithSuccessText(
+        DelegatesAria(TrappedFocus(BaseColorPicker(VividElement)))
+      )
+    )
   )
 ) {
   constructor() {
@@ -610,20 +617,6 @@ class ColorPicker extends WithContextualHelp(
     this.disableSavedColors = false;
     this.savedColors = [];
     this.maxSwatches = 6;
-    this.copyIconName = "copy-2-line";
-    this.#iconResetTimer = null;
-    /**
-     * @internal
-     */
-    this._copyValueToClipboard = async (value) => {
-      try {
-        await navigator.clipboard.writeText(value);
-        this._setTemporaryCopyIcon("check-circle-line");
-      } catch {
-        alert(this.locale?.colorPicker?.copyErrorText);
-        this._setTemporaryCopyIcon("error-line");
-      }
-    };
     /**
      * @internal
      */
@@ -633,14 +626,23 @@ class ColorPicker extends WithContextualHelp(
       }
       this.open = false;
     };
+    this.copyIconName = "copy-2-line";
+    this.#iconResetTimer = null;
     /**
      * @internal
      */
-    this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
+    this._copyValueToClipboard = async (value) => {
+      try {
+        await navigator.clipboard.writeText(value);
+        this._setTemporaryCopyIcon("check-circle-line");
+        this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(value);
+      } catch {
+        alert(this.locale.colorPicker.copyErrorText);
+        this._setTemporaryCopyIcon("error-line");
+        this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
       }
     };
+    this._ariaLiveDescription = "";
   }
   static {
     /**
@@ -666,6 +668,16 @@ class ColorPicker extends WithContextualHelp(
   handleChange() {
     this.$emit("change");
   }
+  /**
+   * @internal
+   */
+  openChanged(_oldValue, newValue) {
+    if (newValue && this.isConnected) {
+      requestAnimationFrame(() => {
+        this._refreshCanvasColor();
+      });
+    }
+  }
   /**
    * @internal
    */
@@ -686,6 +698,71 @@ class ColorPicker extends WithContextualHelp(
   _handleColorSaving() {
     this._saveCurrentColor();
   }
+  /**
+   * @internal
+   */
+  _saveCurrentColor() {
+    const value = this.value;
+    if (typeof value !== "string" || !isValidHexColor(value)) return;
+    const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
+    const idx = swatches.findIndex((s) => s?.value === value);
+    if (idx !== -1) swatches.splice(idx, 1);
+    swatches.unshift({ value });
+    this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
+    this._setSavedColors(this.savedColors);
+  }
+  /**
+   * @internal
+   */
+  _loadSavedColors() {
+    try {
+      const savedColors = localStorage.getItem(this._savedColorsStorageKey);
+      if (!savedColors) return [];
+      const parsed = JSON.parse(savedColors);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter(
+        (x) => x && typeof x.value === "string" && isValidHexColor(x.value)
+      ).map((x) => ({
+        value: x.value,
+        label: typeof x.label === "string" ? x.label : void 0
+      }));
+    } catch {
+      return [];
+    }
+  }
+  /**
+   * @internal
+   */
+  _setSavedColors(swatches) {
+    try {
+      localStorage.setItem(
+        this._savedColorsStorageKey,
+        JSON.stringify(swatches)
+      );
+    } catch {
+    }
+  }
+  /**
+   * Get all color swatches combined, both from swatches property and saved colors
+   * @internal
+   */
+  get allSwatches() {
+    const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
+    const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
+    const seen = /* @__PURE__ */ new Set();
+    const merged = [];
+    const appendIfUniqueAndValid = (swatch) => {
+      if (!swatch || typeof swatch.value !== "string") return;
+      if (!isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
+      seen.add(swatch.value);
+      merged.push(swatch);
+    };
+    if (!this.disableSavedColors) {
+      savedColors.forEach(appendIfUniqueAndValid);
+    }
+    predefinedColors.forEach(appendIfUniqueAndValid);
+    return merged.slice(0, this._maxSwatchesNormalized);
+  }
   /**
    * @internal
    */
@@ -760,24 +837,11 @@ class ColorPicker extends WithContextualHelp(
     const path = e.composedPath?.();
     return !!(path && path.includes(el));
   }
-  #iconResetTimer;
-  /**
-   * @internal
-   */
-  _setTemporaryCopyIcon(name, ms = 2e3) {
-    this.copyIconName = name;
-    if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
-    this.#iconResetTimer = setTimeout(() => {
-      this.copyIconName = "copy-2-line";
-      this.#iconResetTimer = null;
-    }, ms);
-  }
+  #closeOnPointerOutside;
   connectedCallback() {
     super.connectedCallback();
-    this._refreshCanvasColor();
     this.savedColors = this._loadSavedColors();
     document.addEventListener("mousedown", this.#closeOnPointerOutside, true);
-    document.addEventListener("keydown", this.#closeOnEscape);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -786,74 +850,66 @@ class ColorPicker extends WithContextualHelp(
       this.#closeOnPointerOutside,
       true
     );
-    document.removeEventListener("keydown", this.#closeOnEscape);
   }
-  #closeOnPointerOutside;
-  #closeOnEscape;
+  #iconResetTimer;
   /**
    * @internal
    */
-  _saveCurrentColor() {
-    const value = this.value;
-    if (typeof value !== "string" || !isValidHexColor(value)) return;
-    const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-    const idx = swatches.findIndex((s) => s?.value === value);
-    if (idx !== -1) swatches.splice(idx, 1);
-    swatches.unshift({ value });
-    this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
-    this._setSavedColors(this.savedColors);
+  _setTemporaryCopyIcon(name, ms = 2e3) {
+    this.copyIconName = name;
+    if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
+    this.#iconResetTimer = setTimeout(() => {
+      this.copyIconName = "copy-2-line";
+      this.#iconResetTimer = null;
+    }, ms);
   }
+  // --- Trapped focus ---
   /**
    * @internal
    */
-  _loadSavedColors() {
-    try {
-      const savedColors = localStorage.getItem(this._savedColorsStorageKey);
-      if (!savedColors) return [];
-      const parsed = JSON.parse(savedColors);
-      if (!Array.isArray(parsed)) return [];
-      return parsed.filter(
-        (x) => x && typeof x.value === "string" && isValidHexColor(x.value)
-      ).map((x) => ({
-        value: x.value,
-        label: typeof x.label === "string" ? x.label : void 0
-      }));
-    } catch {
-      return [];
+  _onBaseKeydown(event) {
+    if (this.open && handleEscapeKeyAndStopPropogation(event)) {
+      this.open = false;
+      return false;
     }
+    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
+      return false;
+    }
+    return true;
   }
   /**
    * @internal
    */
-  _setSavedColors(swatches) {
-    try {
-      localStorage.setItem(
-        this._savedColorsStorageKey,
-        JSON.stringify(swatches)
+  _focusableElsWithinDialog() {
+    return this._popupEl.querySelectorAll(
+      'button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])'
+    );
+  }
+  /**
+   * @internal
+   */
+  _handleCellKeydown(event, value, index, isSaveCell) {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      const focusableEls = this._focusableElsWithinDialog();
+      const idx = Array.prototype.indexOf.call(
+        focusableEls,
+        event.currentTarget
       );
-    } catch {
+      const nextIdx = event.shiftKey ? (idx - 1 + focusableEls.length) % focusableEls.length : (idx + 1) % focusableEls.length;
+      focusableEls[nextIdx]?.focus();
+      return false;
     }
+    return super._handleCellKeydown(event, value, index, isSaveCell);
   }
   /**
-   * Get all color swatches combined, both from swatches property and saved colors
    * @internal
    */
-  get allSwatches() {
-    const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
-    const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
-    const seen = /* @__PURE__ */ new Set();
-    const merged = [];
-    const appendIfUniqueAndValid = (swatch) => {
-      if (!swatch || typeof swatch.value !== "string") return;
-      if (!isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
-      seen.add(swatch.value);
-      merged.push(swatch);
-    };
-    if (!this.disableSavedColors) {
-      savedColors.forEach(appendIfUniqueAndValid);
+  _handleSwatchSelection(value) {
+    if (this.value !== value) {
+      this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
     }
-    predefinedColors.forEach(appendIfUniqueAndValid);
-    return merged.slice(0, this._maxSwatchesNormalized);
+    super._handleSwatchSelection(value);
   }
 }
 __decorateClass([
@@ -881,6 +937,9 @@ __decorateClass([
 __decorateClass([
   observable
 ], ColorPicker.prototype, "copyIconName");
+__decorateClass([
+  observable
+], ColorPicker.prototype, "_ariaLiveDescription");
 
 function renderTextField(textFieldTag, iconTag) {
   const getClasses = (_) => classNames("control");
@@ -911,6 +970,8 @@ function renderTextField(textFieldTag, iconTag) {
 		>
 			<button 
 				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${(x) => x.open}"
+  			aria-haspopup="dialog"
 				class="button ${(x) => classNames(
     x._applyContrastClass(x._buttonColor) ? "contrast" : "",
     x.disabled ? "disabled" : ""
@@ -938,9 +999,9 @@ function renderTextField(textFieldTag, iconTag) {
 function renderPopupHeader(buttonTag, iconTag) {
   return html`
 		<div class="header">
-			<span class="header-title" id="color-picker-title">
+			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
-			</span>
+			</h2>
 			<${buttonTag} size="condensed" 
 				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
 				@click="${(x) => x._handleCloseRequest()}">
@@ -949,7 +1010,7 @@ function renderPopupHeader(buttonTag, iconTag) {
 		</div>
 	`;
 }
-function renderPopupBody(buttonTag, iconTag) {
+function renderPopupBody(buttonTag, iconTag, tooltipTag) {
   return html`
 		<div class="body">
 			<${html.partial(vcPickerTag)}
@@ -965,24 +1026,37 @@ function renderPopupBody(buttonTag, iconTag) {
 					color="${(x) => x.value}"
 					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
 					${ref("_vcHexInputEl")}
-				></${html.partial(vcInputTag)}>
-				<${buttonTag} size="normal" 
-					aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
-					@click="${(x) => x._copyValueToClipboard(x.value)}">
-					<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
-				</${buttonTag}>
+				>
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+						placeholder="${(x) => x.placeholder}"
+    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+						part="input">
+				</${html.partial(vcInputTag)}>
+				<${tooltipTag} placement="top" 
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					exportparts="vvd-theme-alternate">
+					<${buttonTag} 
+						slot="anchor" size="normal" 
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+						@click="${(x) => x._copyValueToClipboard(x.value)}">
+						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
+					</${buttonTag}>
+				</${tooltipTag}>
 			</div>
 		</div>
 	`;
 }
-function renderPopupFooter(buttonTag, iconTag) {
+function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
   return html`
 		<div class="footer">
-			<span class="footer-title" id="color-picker-footer-title"
-				><slot name="swatches-text"
-					>${(x) => x.locale.colorPicker.swatchesLabel}</slot
-				></span
-			>
+			<div class="footer-header">
+				<span class="footer-title" id="color-picker-footer-title"
+					><slot name="swatches-text"
+						>${(x) => x.locale.colorPicker.swatchesLabel}</slot
+					></span
+				>
+				${when((x) => !x.disableSavedColors, renderSwatchesCount())}
+			</div>
 			<div
 				class="palette"
 				role="grid"
@@ -993,41 +1067,62 @@ function renderPopupFooter(buttonTag, iconTag) {
 			>
 				${repeat(
     (x) => x.allSwatches,
-    (x) => x._renderColorSwatch(iconTag),
+    (x) => x._renderColorSwatch(iconTag, tooltipTag),
     { positioning: true }
   )}
 				${when(
     (x) => !x.disableSavedColors,
     html`
-					<${buttonTag}
-						appearance="outlined"
-						size="super-condensed"
-						role="gridcell"
-						tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
-						aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
-						@click="${(x) => x._saveCurrentColor()}"
-						@keydown="${(x, c) => x._handleCellKeydown(
+						<${tooltipTag} placement="top" 
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+							exportparts="vvd-theme-alternate">
+							<${buttonTag}
+								slot="anchor"
+								appearance="outlined"
+								size="super-condensed"
+								role="gridcell"
+								tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
+								aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
+								@click="${(x) => x._saveCurrentColor()}"
+								@keydown="${(x, c) => x._handleCellKeydown(
       c.event,
       x.value,
       x.allSwatches.length,
       true
     )}">
-					>
-						<${iconTag} slot="icon" name="plus-line"></${iconTag}>
-					</${buttonTag}>
-				`
+								<${iconTag} slot="icon" name="plus-line"></${iconTag}>
+							</${buttonTag}>
+						</${tooltipTag}>
+					`
   )}
 			</div>
 		</div>
 	`;
 }
+function renderSwatchesCount() {
+  return html`
+		<span
+			id="swatches-count"
+			class="swatches-count"
+			aria-label="${(x) => x.locale.colorPicker.maxSwatchesMessage(
+    x.allSwatches.length,
+    x.maxSwatches
+  )}"
+			>${(x) => `${x.allSwatches.length}/${x.maxSwatches}`}</span
+		>
+	`;
+}
 const ColorPickerTemplate = (context) => {
   const textFieldTag = context.tagFor(TextField);
   const iconTag = context.tagFor(Icon);
   const popupTag = context.tagFor(Popup);
   const buttonTag = context.tagFor(Button);
+  const tooltipTag = context.tagFor(Tooltip);
   return html`
-		<div class="base">
+		<div class="base" @keydown="${(x, { event }) => x._onBaseKeydown(event)}">
+			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+				${(x) => x._ariaLiveDescription}
+			</span>
 			${renderTextField(textFieldTag, iconTag)}
 			<${popupTag}
 				:open="${(x) => x.open}"
@@ -1040,10 +1135,10 @@ const ColorPickerTemplate = (context) => {
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
 					${renderPopupHeader(buttonTag, iconTag)}
-					${renderPopupBody(buttonTag, iconTag)}
+					${renderPopupBody(buttonTag, iconTag, tooltipTag)}
 					${when(
     (x) => !x.disableSavedColors || x.allSwatches.length > 0,
-    renderPopupFooter(buttonTag, iconTag)
+    renderPopupFooter(buttonTag, iconTag, tooltipTag)
   )}
 				</div>
 			</${popupTag}>
@@ -1060,6 +1155,7 @@ const colorPickerDefinition = defineVividComponent(
     iconDefinition,
     textFieldDefinition,
     buttonDefinition,
+    tooltipDefinition,
     feedbackMessageDefinition
   ],
   {