@instructure/ui-color-picker 8.33.2 → 8.33.3-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.33.2...v8.33.3-snapshot-3) (2023-02-10)
+
+
+### Bug Fixes
+
+* **ui-color-picker:** axe-check tests failing ([d32f395](https://github.com/instructure/instructure-ui/commit/d32f395d68bae878d7f720bdbb30c4c15300f1d0))
+* **ui-color-picker:** revert changes ([71d2ff6](https://github.com/instructure/instructure-ui/commit/71d2ff6760d2cacbf3b751cc33cec860843ce338))
+
+
+
+
+
 ## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorMixer/ColorMixerLocator.js

@@ -35,7 +35,7 @@ const customMethos = {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    return find('[aria-label*="color palette"]', ...args);
+    return find('[id^=ColorMixer__Palette]', ...args);
   },
   findColorSlider: function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {

package/es/ColorMixer/ColorPalette/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -28,11 +28,12 @@ import React, { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
 import { addEventListener } from '@instructure/ui-dom-utils';
 import { View } from '@instructure/ui-view';
+import { px } from '@instructure/ui-utils';
+import { withDeterministicId } from '@instructure/ui-react-utils';
 import shallowCompare from '../utils/shallowCompare';
 import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { px } from '@instructure/ui-utils';
 
 /**
 ---
@@ -40,10 +41,11 @@ private: true
 ---
 @tsProps
 **/
-let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ColorPalette extends Component {
+let ColorPalette = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_class2 = class ColorPalette extends Component {
   constructor(props) {
     var _this$props$styles;
     super(props);
+    this._id = void 0;
     this.ref = null;
     this._paletteRef = null;
     this._mouseMoveListener = void 0;
@@ -86,6 +88,7 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         y: 0
       }
     };
+    this._id = props.deterministicId('ColorMixer__Palette');
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -207,7 +210,8 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       tabIndex: this.props.disabled ? void 0 : 0,
       onKeyDown: e => this.handleKeyDown(e),
       onMouseDown: e => this.handlePaletteMouseDown(e),
-      "aria-label": this.props.navigationExplanationScreenReaderLabel
+      "aria-label": this.props.navigationExplanationScreenReaderLabel,
+      id: this._id
     }, jsx("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.indicator
     }), this.props.disabled && jsx("div", {
@@ -219,5 +223,5 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     }));
   }
-}, _class2.displayName = "ColorPalette", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorMixer.Palette', _class2)) || _class);
+}, _class2.displayName = "ColorPalette", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorMixer.Palette', _class2)) || _class) || _class);
 export default ColorPalette;

package/es/ColorMixer/Slider/index.js

@@ -163,12 +163,11 @@ let Slider = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
       onKeyDown: e => this.handleKeyDown(e),
       onMouseDown: e => this.handleMouseDown(e),
       tabIndex: this.props.disabled ? void 0 : 0,
-      "aria-label": this.props.navigationExplanationScreenReaderLabel
-      // TODO: check RangeInput and ProgressBar to see how the slider role can be handled well
-      // role="slider"
-      // aria-valuemin={this.props.minValue}
-      // aria-valuemax={this.props.maxValue}
-      // aria-valuenow={this.roundedValue}
+      "aria-label": this.props.navigationExplanationScreenReaderLabel,
+      role: "slider",
+      "aria-valuemin": this.props.minValue,
+      "aria-valuemax": this.props.maxValue,
+      "aria-valuenow": this.roundedValue
     }, jsx("div", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.indicator
     }), this.props.disabled && jsx("div", {

package/es/ColorPreset/index.js

@@ -165,11 +165,10 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         onClick: () => this.props.onSelect(color)
       } : {}, this.isSelectedColor(color) ? {
         'aria-label': 'selected'
-      } : {}, {
-        role: "presentation"
-      }), jsx("div", null, jsx(ColorIndicator, {
+      } : {}), jsx("div", null, jsx(ColorIndicator, {
         color: color,
-        shape: "rectangle"
+        shape: "rectangle",
+        role: "presentation"
       }), this.isSelectedColor(color) && jsx("div", {
         css: (_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$styles = _this$props6.styles) === null || _this$props6$styles === void 0 ? void 0 : _this$props6$styles.selectedIndicator
       }, jsx(IconCheckDarkSolid, {

package/lib/ColorMixer/ColorMixerLocator.js

@@ -42,7 +42,7 @@ const customMethos = {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    return (0, _uiTestUtils.find)('[aria-label*="color palette"]', ...args);
+    return (0, _uiTestUtils.find)('[id^=ColorMixer__Palette]', ...args);
   },
   findColorSlider: function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {

package/lib/ColorMixer/ColorPalette/index.js

@@ -10,22 +10,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _emotion = require("@instructure/emotion");
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
 var _View = require("@instructure/ui-view/lib/View");
+var _px = require("@instructure/ui-utils/lib/px.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _shallowCompare = _interopRequireDefault(require("../utils/shallowCompare"));
 var _props = require("./props");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _px = require("@instructure/ui-utils/lib/px.js");
-var _dec, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /**
 ---
 private: true
 ---
 @tsProps
 **/
-let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class ColorPalette extends _react.Component {
+let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_class2 = class ColorPalette extends _react.Component {
   constructor(props) {
     var _this$props$styles;
     super(props);
+    this._id = void 0;
     this.ref = null;
     this._paletteRef = null;
     this._mouseMoveListener = void 0;
@@ -68,6 +70,7 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         y: 0
       }
     };
+    this._id = props.deterministicId('ColorMixer__Palette');
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -189,7 +192,8 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       tabIndex: this.props.disabled ? void 0 : 0,
       onKeyDown: e => this.handleKeyDown(e),
       onMouseDown: e => this.handlePaletteMouseDown(e),
-      "aria-label": this.props.navigationExplanationScreenReaderLabel
+      "aria-label": this.props.navigationExplanationScreenReaderLabel,
+      id: this._id
     }, (0, _emotion.jsx)("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.indicator
     }), this.props.disabled && (0, _emotion.jsx)("div", {
@@ -201,6 +205,6 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       }
     }));
   }
-}, _class2.displayName = "ColorPalette", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorMixer.Palette', _class2)) || _class);
+}, _class2.displayName = "ColorPalette", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorMixer.Palette', _class2)) || _class) || _class);
 var _default = ColorPalette;
 exports.default = _default;

package/lib/ColorMixer/Slider/index.js

@@ -145,12 +145,11 @@ let Slider = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       onKeyDown: e => this.handleKeyDown(e),
       onMouseDown: e => this.handleMouseDown(e),
       tabIndex: this.props.disabled ? void 0 : 0,
-      "aria-label": this.props.navigationExplanationScreenReaderLabel
-      // TODO: check RangeInput and ProgressBar to see how the slider role can be handled well
-      // role="slider"
-      // aria-valuemin={this.props.minValue}
-      // aria-valuemax={this.props.maxValue}
-      // aria-valuenow={this.roundedValue}
+      "aria-label": this.props.navigationExplanationScreenReaderLabel,
+      role: "slider",
+      "aria-valuemin": this.props.minValue,
+      "aria-valuemax": this.props.maxValue,
+      "aria-valuenow": this.roundedValue
     }, (0, _emotion.jsx)("div", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.indicator
     }), this.props.disabled && (0, _emotion.jsx)("div", {

package/lib/ColorPreset/index.js

@@ -148,11 +148,10 @@ let ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
         onClick: () => this.props.onSelect(color)
       } : {}, this.isSelectedColor(color) ? {
         'aria-label': 'selected'
-      } : {}, {
-        role: "presentation"
-      }), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_ColorIndicator.ColorIndicator, {
+      } : {}), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_ColorIndicator.ColorIndicator, {
         color: color,
-        shape: "rectangle"
+        shape: "rectangle",
+        role: "presentation"
       }), this.isSelectedColor(color) && (0, _emotion.jsx)("div", {
         css: (_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$styles = _this$props6.styles) === null || _this$props6$styles === void 0 ? void 0 : _this$props6$styles.selectedIndicator
       }, (0, _emotion.jsx)(_IconCheckDarkSolid.IconCheckDarkSolid, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.33.2",
+  "version": "8.33.3-snapshot-3",
   "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.13.10",
-    "@instructure/console": "8.33.2",
-    "@instructure/emotion": "8.33.2",
-    "@instructure/shared-types": "8.33.2",
-    "@instructure/ui-a11y-content": "8.33.2",
-    "@instructure/ui-buttons": "8.33.2",
-    "@instructure/ui-color-utils": "8.33.2",
-    "@instructure/ui-dom-utils": "8.33.2",
-    "@instructure/ui-drilldown": "8.33.2",
-    "@instructure/ui-form-field": "8.33.2",
-    "@instructure/ui-icons": "8.33.2",
-    "@instructure/ui-pill": "8.33.2",
-    "@instructure/ui-popover": "8.33.2",
-    "@instructure/ui-react-utils": "8.33.2",
-    "@instructure/ui-testable": "8.33.2",
-    "@instructure/ui-text": "8.33.2",
-    "@instructure/ui-text-input": "8.33.2",
-    "@instructure/ui-themes": "8.33.2",
-    "@instructure/ui-tooltip": "8.33.2",
-    "@instructure/ui-utils": "8.33.2",
-    "@instructure/ui-view": "8.33.2",
+    "@instructure/console": "8.33.3-snapshot-3",
+    "@instructure/emotion": "8.33.3-snapshot-3",
+    "@instructure/shared-types": "8.33.3-snapshot-3",
+    "@instructure/ui-a11y-content": "8.33.3-snapshot-3",
+    "@instructure/ui-buttons": "8.33.3-snapshot-3",
+    "@instructure/ui-color-utils": "8.33.3-snapshot-3",
+    "@instructure/ui-dom-utils": "8.33.3-snapshot-3",
+    "@instructure/ui-drilldown": "8.33.3-snapshot-3",
+    "@instructure/ui-form-field": "8.33.3-snapshot-3",
+    "@instructure/ui-icons": "8.33.3-snapshot-3",
+    "@instructure/ui-pill": "8.33.3-snapshot-3",
+    "@instructure/ui-popover": "8.33.3-snapshot-3",
+    "@instructure/ui-react-utils": "8.33.3-snapshot-3",
+    "@instructure/ui-testable": "8.33.3-snapshot-3",
+    "@instructure/ui-text": "8.33.3-snapshot-3",
+    "@instructure/ui-text-input": "8.33.3-snapshot-3",
+    "@instructure/ui-themes": "8.33.3-snapshot-3",
+    "@instructure/ui-tooltip": "8.33.3-snapshot-3",
+    "@instructure/ui-utils": "8.33.3-snapshot-3",
+    "@instructure/ui-view": "8.33.3-snapshot-3",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.2",
-    "@instructure/ui-test-locator": "8.33.2",
-    "@instructure/ui-test-queries": "8.33.2",
-    "@instructure/ui-test-utils": "8.33.2"
+    "@instructure/ui-babel-preset": "8.33.3-snapshot-3",
+    "@instructure/ui-test-locator": "8.33.3-snapshot-3",
+    "@instructure/ui-test-queries": "8.33.3-snapshot-3",
+    "@instructure/ui-test-utils": "8.33.3-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ColorMixer/ColorMixerLocator.ts

@@ -31,7 +31,7 @@ const customMethos = {
     return find('[id^=TextInput_]', ...args)
   },
   findColorPalette: (...args: any[]) => {
-    return find('[aria-label*="color palette"]', ...args)
+    return find('[id^=ColorMixer__Palette]', ...args)
   },
   findColorSlider: (...args: any[]) => {
     return find('[aria-label*="color slider"]', ...args)

package/src/ColorMixer/ColorPalette/index.tsx

@@ -31,6 +31,8 @@ import type { HSVType } from '@instructure/ui-color-utils'
 
 import { View } from '@instructure/ui-view'
 import type { ViewOwnProps } from '@instructure/ui-view'
+import { px } from '@instructure/ui-utils'
+import { withDeterministicId } from '@instructure/ui-react-utils'
 
 import shallowCompare from '../utils/shallowCompare'
 
@@ -39,7 +41,6 @@ import type { ColorPaletteProps, ColorPaletteState } from './props'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { px } from '@instructure/ui-utils'
 
 /**
 ---
@@ -47,6 +48,7 @@ private: true
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
   static propTypes = propTypes
@@ -58,8 +60,9 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
     this.state = {
       colorPosition: { x: 0, y: 0 }
     }
+    this._id = props.deterministicId!('ColorMixer__Palette')
   }
-
+  private readonly _id: string
   ref: Element | null = null
   private _paletteRef: HTMLDivElement | null = null
   private _mouseMoveListener?: { remove(): void }
@@ -235,6 +238,7 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
         onKeyDown={(e) => this.handleKeyDown(e)}
         onMouseDown={(e) => this.handlePaletteMouseDown(e)}
         aria-label={this.props.navigationExplanationScreenReaderLabel}
+        id={this._id}
       >
         <div css={this.props.styles?.indicator} />
         {this.props.disabled && (

package/src/ColorMixer/ColorPalette/props.ts

@@ -31,6 +31,7 @@ import type {
   ColorMixerPaletteTheme
 } from '@instructure/shared-types'
 import type { HSVType } from '@instructure/ui-color-utils'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type ColorPaletteOwnProps = {
   disabled?: boolean
@@ -54,7 +55,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorPaletteProps = ColorPaletteOwnProps &
   WithStyleProps<ColorMixerPaletteTheme, ColorPaletteStyle> &
-  OtherHTMLAttributes<ColorPaletteOwnProps>
+  OtherHTMLAttributes<ColorPaletteOwnProps> &
+  WithDeterministicIdProps
 
 type ColorPaletteStyle = ComponentStyle<
   'ColorPalette' | 'indicator' | 'palette' | 'disabledOverlay' | 'paletteOffset'

package/src/ColorMixer/Slider/index.tsx

@@ -216,11 +216,10 @@ class Slider extends Component<SliderProps> {
         onMouseDown={(e) => this.handleMouseDown(e)}
         tabIndex={this.props.disabled ? undefined : 0}
         aria-label={this.props.navigationExplanationScreenReaderLabel}
-        // TODO: check RangeInput and ProgressBar to see how the slider role can be handled well
-        // role="slider"
-        // aria-valuemin={this.props.minValue}
-        // aria-valuemax={this.props.maxValue}
-        // aria-valuenow={this.roundedValue}
+        role="slider"
+        aria-valuemin={this.props.minValue}
+        aria-valuemax={this.props.maxValue}
+        aria-valuenow={this.roundedValue}
       >
         <div css={this.props.styles?.indicator} />
         {this.props.disabled && (

package/src/ColorPreset/index.tsx

@@ -260,10 +260,9 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
           ? { onClick: () => this.props.onSelect(color) }
           : {})}
         {...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
-        role="presentation"
       >
         <div>
-          <ColorIndicator color={color} shape="rectangle" />
+          <ColorIndicator color={color} shape="rectangle" role="presentation" />
           {this.isSelectedColor(color) && (
             <div css={this.props?.styles?.selectedIndicator}>
               <IconCheckDarkSolid