@instructure/ui-color-picker 10.20.2-snapshot-7 → 10.20.2-snapshot-9

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.20.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-7) (2025-06-24)
+## [10.20.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-9) (2025-06-24)
 
-**Note:** Version bump only for package @instructure/ui-color-picker
+
+### Features
+
+* **ui-color-picker:** add colorScreenReaderLabel prop to provide more color information ([6650445](https://github.com/instructure/instructure-ui/commit/6650445d4ae33a0e7b37b6ed6b1d736f030e310b))
 
 
 

package/es/ColorPreset/index.js

@@ -158,6 +158,9 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     };
     this.renderIndicatorBase = (color, selectOnClick) => {
       var _this$props6, _this$props6$styles;
+      const hexCode = color;
+      const isSelected = this.isSelectedColor(color);
+      const screenReaderLabel = typeof this.props.colorScreenReaderLabel === 'function' ? this.props.colorScreenReaderLabel(hexCode, isSelected) : hexCode;
       return _jsx(View, {
         disabled: this.props.disabled,
         position: "relative",
@@ -171,10 +174,10 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         padding: "0",
         cursor: this.props.disabled ? 'not-allowed' : 'auto',
         as: "button",
+        "aria-label": screenReaderLabel,
         ...(selectOnClick ? {
           onClick: () => this.props.onSelect(color)
         } : {}),
-        'aria-label': `${color}${this.isSelectedColor(color) ? ' selected' : ''}`,
         children: _jsxs("div", {
           children: [_jsx(ColorIndicator, {
             color: color,

package/es/ColorPreset/props.js

@@ -31,6 +31,7 @@ const propTypes = {
   elementRef: PropTypes.func,
   label: PropTypes.string,
   popoverScreenReaderLabel: PropTypes.string,
+  colorScreenReaderLabel: PropTypes.func,
   colorMixerSettings: PropTypes.shape({
     addNewPresetButtonScreenReaderLabel: PropTypes.string.isRequired,
     selectColorLabel: PropTypes.string.isRequired,
@@ -62,5 +63,5 @@ const propTypes = {
     })
   })
 };
-const allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected'];
+const allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected', 'colorScreenReaderLabel'];
 export { propTypes, allowedProps };

package/lib/ColorPreset/index.js

@@ -165,6 +165,9 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
     };
     this.renderIndicatorBase = (color, selectOnClick) => {
       var _this$props6, _this$props6$styles;
+      const hexCode = color;
+      const isSelected = this.isSelectedColor(color);
+      const screenReaderLabel = typeof this.props.colorScreenReaderLabel === 'function' ? this.props.colorScreenReaderLabel(hexCode, isSelected) : hexCode;
       return (0, _jsxRuntime.jsx)(_View.View, {
         disabled: this.props.disabled,
         position: "relative",
@@ -178,10 +181,10 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
         padding: "0",
         cursor: this.props.disabled ? 'not-allowed' : 'auto',
         as: "button",
+        "aria-label": screenReaderLabel,
         ...(selectOnClick ? {
           onClick: () => this.props.onSelect(color)
         } : {}),
-        'aria-label': `${color}${this.isSelectedColor(color) ? ' selected' : ''}`,
         children: (0, _jsxRuntime.jsxs)("div", {
           children: [(0, _jsxRuntime.jsx)(_ColorIndicator.ColorIndicator, {
             color: color,

package/lib/ColorPreset/props.js

@@ -38,6 +38,7 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   label: _propTypes.default.string,
   popoverScreenReaderLabel: _propTypes.default.string,
+  colorScreenReaderLabel: _propTypes.default.func,
   colorMixerSettings: _propTypes.default.shape({
     addNewPresetButtonScreenReaderLabel: _propTypes.default.string.isRequired,
     selectColorLabel: _propTypes.default.string.isRequired,
@@ -69,4 +70,4 @@ const propTypes = exports.propTypes = {
     })
   })
 };
-const allowedProps = exports.allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected'];
+const allowedProps = exports.allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected', 'colorScreenReaderLabel'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "10.20.2-snapshot-7",
+  "version": "10.20.2-snapshot-9",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.20.2-snapshot-7",
-    "@instructure/emotion": "10.20.2-snapshot-7",
-    "@instructure/shared-types": "10.20.2-snapshot-7",
-    "@instructure/ui-a11y-content": "10.20.2-snapshot-7",
-    "@instructure/ui-buttons": "10.20.2-snapshot-7",
-    "@instructure/ui-color-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-dom-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-drilldown": "10.20.2-snapshot-7",
-    "@instructure/ui-form-field": "10.20.2-snapshot-7",
-    "@instructure/ui-icons": "10.20.2-snapshot-7",
-    "@instructure/ui-pill": "10.20.2-snapshot-7",
-    "@instructure/ui-popover": "10.20.2-snapshot-7",
-    "@instructure/ui-react-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-testable": "10.20.2-snapshot-7",
-    "@instructure/ui-text": "10.20.2-snapshot-7",
-    "@instructure/ui-text-input": "10.20.2-snapshot-7",
-    "@instructure/ui-themes": "10.20.2-snapshot-7",
-    "@instructure/ui-tooltip": "10.20.2-snapshot-7",
-    "@instructure/ui-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-view": "10.20.2-snapshot-7",
+    "@instructure/console": "10.20.2-snapshot-9",
+    "@instructure/emotion": "10.20.2-snapshot-9",
+    "@instructure/shared-types": "10.20.2-snapshot-9",
+    "@instructure/ui-a11y-content": "10.20.2-snapshot-9",
+    "@instructure/ui-buttons": "10.20.2-snapshot-9",
+    "@instructure/ui-color-utils": "10.20.2-snapshot-9",
+    "@instructure/ui-dom-utils": "10.20.2-snapshot-9",
+    "@instructure/ui-drilldown": "10.20.2-snapshot-9",
+    "@instructure/ui-form-field": "10.20.2-snapshot-9",
+    "@instructure/ui-icons": "10.20.2-snapshot-9",
+    "@instructure/ui-pill": "10.20.2-snapshot-9",
+    "@instructure/ui-popover": "10.20.2-snapshot-9",
+    "@instructure/ui-react-utils": "10.20.2-snapshot-9",
+    "@instructure/ui-testable": "10.20.2-snapshot-9",
+    "@instructure/ui-text": "10.20.2-snapshot-9",
+    "@instructure/ui-text-input": "10.20.2-snapshot-9",
+    "@instructure/ui-themes": "10.20.2-snapshot-9",
+    "@instructure/ui-tooltip": "10.20.2-snapshot-9",
+    "@instructure/ui-utils": "10.20.2-snapshot-9",
+    "@instructure/ui-view": "10.20.2-snapshot-9",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.20.2-snapshot-7",
-    "@instructure/ui-babel-preset": "10.20.2-snapshot-7",
-    "@instructure/ui-scripts": "10.20.2-snapshot-7",
-    "@instructure/ui-test-utils": "10.20.2-snapshot-7",
+    "@instructure/ui-axe-check": "10.20.2-snapshot-9",
+    "@instructure/ui-babel-preset": "10.20.2-snapshot-9",
+    "@instructure/ui-scripts": "10.20.2-snapshot-9",
+    "@instructure/ui-test-utils": "10.20.2-snapshot-9",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/ColorPreset/README.md

@@ -34,6 +34,11 @@ A component for picking a color from a list of colors. Supports adding new color
             colors={this.state.colors}
             selected={this.state.selected}
             onSelect={(selected) => this.setState({ selected })}
+            colorScreenReaderLabel={(hexCode, isSelected) => {
+              return `color with hex code ${hexCode}${
+                isSelected ? ' selected' : ''
+              }`
+            }}
           />
         </div>
       )
@@ -65,6 +70,11 @@ A component for picking a color from a list of colors. Supports adding new color
           colors={colors}
           selected={selected}
           onSelect={setSelected}
+          colorScreenReaderLabel={(hexCode, isSelected) => {
+            return `color with hex code ${hexCode}${
+              isSelected ? ' selected' : ''
+            }`
+          }}
         />
       </div>
     )
@@ -131,6 +141,11 @@ A component for picking a color from a list of colors. Supports adding new color
                 secondColorLabel: 'Foreground'
               }
             }}
+            colorScreenReaderLabel={(hexCode, isSelected) => {
+              return `color with hex code ${hexCode}${
+                isSelected ? ' selected' : ''
+              }`
+            }}
           />
         </div>
       )
@@ -189,6 +204,11 @@ A component for picking a color from a list of colors. Supports adding new color
               secondColorLabel: 'Foreground'
             }
           }}
+          colorScreenReaderLabel={(hexCode, isSelected) => {
+            return `color with hex code ${hexCode}${
+              isSelected ? ' selected' : ''
+            }`
+          }}
         />
       </div>
     )

package/src/ColorPreset/index.tsx

@@ -250,40 +250,48 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
       : this.renderIndicatorTooltip(indicatorBase, color)
   }
 
-  renderIndicatorBase = (color: string, selectOnClick?: boolean) => (
-    <View
-      disabled={this.props.disabled}
-      position="relative"
-      width="2.375rem"
-      height="2.375rem"
-      background="transparent"
-      margin="xx-small"
-      display="inline-block"
-      borderRadius="medium"
-      borderWidth="0"
-      padding="0"
-      cursor={this.props.disabled ? 'not-allowed' : 'auto'}
-      as="button"
-      {...(selectOnClick ? { onClick: () => this.props.onSelect(color) } : {})}
-      {...{
-        'aria-label': `${color}${
-          this.isSelectedColor(color) ? ' selected' : ''
-        }`
-      }}
-    >
-      <div>
-        <ColorIndicator color={color} shape="rectangle" role="presentation" />
-        {this.isSelectedColor(color) && (
-          <div css={this.props?.styles?.selectedIndicator}>
-            <IconCheckDarkSolid
-              themeOverride={{ sizeXSmall: '0.8rem' }}
-              size="x-small"
-            />
-          </div>
-        )}
-      </div>
-    </View>
-  )
+  renderIndicatorBase = (color: string, selectOnClick?: boolean) => {
+    const hexCode = color
+    const isSelected = this.isSelectedColor(color)
+
+    const screenReaderLabel =
+      typeof this.props.colorScreenReaderLabel === 'function'
+        ? this.props.colorScreenReaderLabel(hexCode, isSelected)
+        : hexCode
+
+    return (
+      <View
+        disabled={this.props.disabled}
+        position="relative"
+        width="2.375rem"
+        height="2.375rem"
+        background="transparent"
+        margin="xx-small"
+        display="inline-block"
+        borderRadius="medium"
+        borderWidth="0"
+        padding="0"
+        cursor={this.props.disabled ? 'not-allowed' : 'auto'}
+        as="button"
+        aria-label={screenReaderLabel}
+        {...(selectOnClick
+          ? { onClick: () => this.props.onSelect(color) }
+          : {})}
+      >
+        <div>
+          <ColorIndicator color={color} shape="rectangle" role="presentation" />
+          {this.isSelectedColor(color) && (
+            <div css={this.props?.styles?.selectedIndicator}>
+              <IconCheckDarkSolid
+                themeOverride={{ sizeXSmall: '0.8rem' }}
+                size="x-small"
+              />
+            </div>
+          )}
+        </div>
+      </View>
+    )
+  }
 
   renderIndicatorTooltip = (child: React.ReactElement, color: string) => {
     return (

package/src/ColorPreset/props.ts

@@ -103,6 +103,18 @@ type ColorPresetOwnProps = {
    * The currently selected HEX string
    */
   selected?: string
+  /**
+   * A function for formatting the text provided to screen readers about the color.
+   *
+   * @param {string} hexCode - The hexadecimal color code (e.g., "#FFFFFF") of the current color option. Provided by the component - treat as read-only.
+   *
+   * @param {boolean} isSelected - Indicates whether this color is currently selected. Provided by the component - treat as read-only.
+   *
+   * Sets the aria-label attribute of the color.
+   *
+   * If not set, aria-label defaults to the hex code of the color.
+   */
+  colorScreenReaderLabel?: (hexCode: string, isSelected: boolean) => string
 }
 
 type ColorPresetState = {
@@ -138,6 +150,7 @@ const propTypes: PropValidators<PropKeys> = {
   elementRef: PropTypes.func,
   label: PropTypes.string,
   popoverScreenReaderLabel: PropTypes.string,
+  colorScreenReaderLabel: PropTypes.func,
   colorMixerSettings: PropTypes.shape({
     addNewPresetButtonScreenReaderLabel: PropTypes.string.isRequired,
     selectColorLabel: PropTypes.string.isRequired,
@@ -181,7 +194,8 @@ const allowedProps: AllowedPropKeys = [
   'colorMixerSettings',
   'onSelect',
   'popoverScreenReaderLabel',
-  'selected'
+  'selected',
+  'colorScreenReaderLabel'
 ]
 
 export type {