@zendeskgarden/react-colorpickers 8.61.0 → 8.62.1

package/dist/index.cjs.js

@@ -155,7 +155,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -290,7 +290,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default["default"](reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -305,7 +305,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default["default"](StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -349,7 +349,7 @@ const StyledAlphaRange = styled__default["default"](StyledRange).attrs(props =>
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -373,7 +373,7 @@ const StyledPreview = styled__default["default"].div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -395,7 +395,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default["default"].div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -423,7 +423,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default["default"].div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -440,7 +440,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -452,7 +452,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default["default"](reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -465,7 +465,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default["default"](reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -477,7 +477,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default["default"](reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -490,7 +490,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -511,7 +511,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default["default"](reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -523,7 +523,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -536,7 +536,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default["default"](reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -571,7 +571,7 @@ const StyledButtonPreview = styled__default["default"].span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -584,7 +584,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default["default"](reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -596,7 +596,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default["default"](reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -610,7 +610,7 @@ const StyledSwatchButton = styled__default["default"](StyledButtonPreview).attrs
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -622,7 +622,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default["default"].table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -659,7 +659,7 @@ const StyledIcon = styled__default["default"](_ref => {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -671,7 +671,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default["default"].td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1259,6 +1259,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
     disabled,
     buttonProps,
     onDialogChange,
+    'aria-label': ariaLabel,
     children,
     ...props
   } = _ref;
@@ -1268,6 +1269,9 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
   const colorPickerRef = React.useRef(null);
   const [referenceElement, setReferenceElement] = React.useState();
   const [uncontrolledColor, setUncontrolledColor] = React.useState(defaultColor);
+  const ariaLabelText = reactTheming.useText(ColorpickerDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color picker');
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -1321,7 +1325,8 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
     onClose: () => {
       closeDialog();
       onClose && onClose(isControlled ? color : uncontrolledColor);
-    }
+    },
+    "aria-label": ariaLabelText
   }, props), React__default["default"].createElement(StyledTooltipBody, null, React__default["default"].createElement(Colorpicker, {
     autofocus: true,
     color: color,
@@ -1469,6 +1474,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     buttonProps,
     onDialogChange,
     children,
+    'aria-label': ariaLabel,
     ...props
   } = _ref;
   const controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
@@ -1482,6 +1488,9 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   const [uncontrolledSelectedColIndex, setUncontrolledSelectedColIndex] = React.useState(defaultSelectedColIndex || 0);
   const [uncontrolledRowIndex, setUncontrolledRowIndex] = React.useState(defaultRowIndex || 0);
   const [uncontrolledColIndex, setUncontrolledColIndex] = React.useState(defaultColIndex || 0);
+  const ariaLabelText = reactTheming.useText(ColorSwatchDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color swatch');
   React.useEffect(() => {
     if (isDialogControlled) {
       if (isOpen) {
@@ -1552,7 +1561,8 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     isAnimated: isAnimated,
     popperModifiers: popperModifiers,
     referenceElement: referenceElement,
-    onClose: closeDialog
+    onClose: closeDialog,
+    "aria-label": ariaLabelText
   }, props), React__default["default"].createElement(StyledTooltipBody, null, React__default["default"].createElement(ColorSwatch, {
     colors: colors,
     ref: colorSwatchRef,

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
 import throttle from 'lodash.throttle';
 import styled, { ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
 import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
 import { Button } from '@zendeskgarden/react-buttons';
 import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
@@ -125,7 +125,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -260,7 +260,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -275,7 +275,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -319,7 +319,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -343,7 +343,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -365,7 +365,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -393,7 +393,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -410,7 +410,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -422,7 +422,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -435,7 +435,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -447,7 +447,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -460,7 +460,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -481,7 +481,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -493,7 +493,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -506,7 +506,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -541,7 +541,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -554,7 +554,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -566,7 +566,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -580,7 +580,7 @@ const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -592,7 +592,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.61.0',
+  'data-garden-version': '8.62.1',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -629,7 +629,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -641,7 +641,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.61.0'
+  'data-garden-version': '8.62.1'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1229,6 +1229,7 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
     disabled,
     buttonProps,
     onDialogChange,
+    'aria-label': ariaLabel,
     children,
     ...props
   } = _ref;
@@ -1238,6 +1239,9 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
   const colorPickerRef = useRef(null);
   const [referenceElement, setReferenceElement] = useState();
   const [uncontrolledColor, setUncontrolledColor] = useState(defaultColor);
+  const ariaLabelText = useText(ColorpickerDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color picker');
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -1291,7 +1295,8 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
     onClose: () => {
       closeDialog();
       onClose && onClose(isControlled ? color : uncontrolledColor);
-    }
+    },
+    "aria-label": ariaLabelText
   }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(Colorpicker, {
     autofocus: true,
     color: color,
@@ -1439,6 +1444,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     buttonProps,
     onDialogChange,
     children,
+    'aria-label': ariaLabel,
     ...props
   } = _ref;
   const controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
@@ -1452,6 +1458,9 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
   const [uncontrolledSelectedColIndex, setUncontrolledSelectedColIndex] = useState(defaultSelectedColIndex || 0);
   const [uncontrolledRowIndex, setUncontrolledRowIndex] = useState(defaultRowIndex || 0);
   const [uncontrolledColIndex, setUncontrolledColIndex] = useState(defaultColIndex || 0);
+  const ariaLabelText = useText(ColorSwatchDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color swatch');
   useEffect(() => {
     if (isDialogControlled) {
       if (isOpen) {
@@ -1522,7 +1531,8 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     isAnimated: isAnimated,
     popperModifiers: popperModifiers,
     referenceElement: referenceElement,
-    onClose: closeDialog
+    onClose: closeDialog,
+    "aria-label": ariaLabelText
   }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(ColorSwatch, {
     colors: colors,
     ref: colorSwatchRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.61.0",
+  "version": "8.62.1",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^0.1.1",
     "@zendeskgarden/container-utilities": "^0.7.0",
-    "@zendeskgarden/react-buttons": "^8.61.0",
-    "@zendeskgarden/react-forms": "^8.61.0",
-    "@zendeskgarden/react-modals": "^8.61.0",
-    "@zendeskgarden/react-tooltips": "^8.61.0",
+    "@zendeskgarden/react-buttons": "^8.62.1",
+    "@zendeskgarden/react-forms": "^8.62.1",
+    "@zendeskgarden/react-modals": "^8.62.1",
+    "@zendeskgarden/react-tooltips": "^8.62.1",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",
     "@types/lodash.throttle": "4.1.7",
-    "@zendeskgarden/react-theming": "^8.61.0",
+    "@zendeskgarden/react-theming": "^8.62.1",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "6dabf61971c57050782f4b22d7e78f5978021bf6"
+  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
 }