@instructure/ui-checkbox 10.6.2-snapshot-9 → 10.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Checkbox/CheckboxFacade/theme.js +9 -9
  3. package/es/Checkbox/ToggleFacade/theme.js +12 -12
  4. package/es/Checkbox/index.js +6 -4
  5. package/lib/Checkbox/CheckboxFacade/theme.js +9 -9
  6. package/lib/Checkbox/ToggleFacade/theme.js +12 -12
  7. package/lib/Checkbox/index.js +6 -4
  8. package/package.json +19 -19
  9. package/src/Checkbox/CheckboxFacade/theme.ts +1 -1
  10. package/src/Checkbox/ToggleFacade/theme.ts +1 -1
  11. package/src/Checkbox/index.tsx +14 -2
  12. package/tsconfig.build.tsbuildinfo +1 -1
  13. package/types/Checkbox/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.6.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.6.2-snapshot-9) (2024-12-03)
6
+ # [10.7.0](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.7.0) (2024-12-03)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-checkbox
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** hide required asterisks from screenreaders ([78aec71](https://github.com/instructure/instructure-ui/commit/78aec71d1056df3a43ffd226d993c451a8fe9c1d))
9
12
 
10
13
 
11
14
 
package/es/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$ui, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
32
32
  const colors = theme.colors,
33
33
  borders = theme.borders,
34
34
  spacing = theme.spacing,
@@ -48,19 +48,19 @@ const generateComponentTheme = theme => {
48
48
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
49
49
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
50
50
  borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
51
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
51
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
52
52
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
53
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
53
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
54
54
  marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
55
55
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
56
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
57
- checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
58
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
59
- focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
56
+ checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
57
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
58
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
59
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
60
60
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
61
61
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
63
- checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
62
+ labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
63
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey125125,
64
64
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
65
65
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
66
66
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/es/Checkbox/ToggleFacade/theme.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14;
32
32
  const colors = theme.colors,
33
33
  borders = theme.borders,
34
34
  forms = theme.forms,
@@ -48,32 +48,32 @@ const generateComponentTheme = theme => {
48
48
  };
49
49
  const componentVariables = {
50
50
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
52
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
53
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
51
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
52
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
53
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
54
54
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
55
55
  borderRadius: '4rem',
56
56
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
57
57
  marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
58
58
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
59
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
60
- uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
61
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green5782,
62
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
59
+ checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.green4570,
60
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
61
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.green5782,
62
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
63
63
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
64
64
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
65
- toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
65
+ toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010,
66
66
  toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
67
67
  toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
68
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
68
+ labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey125125,
69
69
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
70
70
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
71
71
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
72
72
  labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
73
73
  labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
74
74
  labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
75
- uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey5782,
76
- checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.green5782
75
+ uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey5782,
76
+ checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.green5782
77
77
  };
78
78
  return {
79
79
  ...componentVariables,
package/es/Checkbox/index.js CHANGED
@@ -171,8 +171,9 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
171
171
  themeOverride: themeOverride,
172
172
  invalid: this.invalid
173
173
  }, label, isRequired && label && jsx("span", {
174
- css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
175
- }, " *"));
174
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
175
+ "aria-hidden": true
176
+ }, ' ', "*"));
176
177
  } else {
177
178
  return jsx(CheckboxFacade, {
178
179
  size: size,
@@ -183,8 +184,9 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
183
184
  themeOverride: themeOverride,
184
185
  invalid: this.invalid
185
186
  }, label, isRequired && label && jsx("span", {
186
- css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
187
- }, " *"));
187
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
188
+ "aria-hidden": true
189
+ }, ' ', "*"));
188
190
  }
189
191
  }
190
192
  renderMessages() {
package/lib/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -34,7 +34,7 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$ui, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
38
38
  const colors = theme.colors,
39
39
  borders = theme.borders,
40
40
  spacing = theme.spacing,
@@ -54,19 +54,19 @@ const generateComponentTheme = theme => {
54
54
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
55
55
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
56
56
  borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
57
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
57
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
58
58
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
59
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
59
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
60
60
  marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
61
61
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
62
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
63
- checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
64
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
65
- focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
62
+ checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
63
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
64
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
65
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
66
66
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
67
67
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
68
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
69
- checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
68
+ labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
69
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey125125,
70
70
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
71
71
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
72
72
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/lib/Checkbox/ToggleFacade/theme.js CHANGED
@@ -34,7 +34,7 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14;
38
38
  const colors = theme.colors,
39
39
  borders = theme.borders,
40
40
  forms = theme.forms,
@@ -54,32 +54,32 @@ const generateComponentTheme = theme => {
54
54
  };
55
55
  const componentVariables = {
56
56
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
57
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
58
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
59
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
57
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
58
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
59
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
60
60
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
61
61
  borderRadius: '4rem',
62
62
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
63
  marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
64
64
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
65
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
66
- uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
67
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green5782,
68
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
65
+ checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.green4570,
66
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
67
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.green5782,
68
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
69
69
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
70
70
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
71
- toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
71
+ toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010,
72
72
  toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
73
73
  toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
74
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
74
+ labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey125125,
75
75
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
76
76
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
77
77
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
78
78
  labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
79
79
  labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
80
80
  labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
81
- uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey5782,
82
- checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.green5782
81
+ uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey5782,
82
+ checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.green5782
83
83
  };
84
84
  return {
85
85
  ...componentVariables,
package/lib/Checkbox/index.js CHANGED
@@ -192,8 +192,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
192
192
  themeOverride: themeOverride,
193
193
  invalid: this.invalid
194
194
  }, label, isRequired && label && (0, _emotion.jsx)("span", {
195
- css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
196
- }, " *"));
195
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
196
+ "aria-hidden": true
197
+ }, ' ', "*"));
197
198
  } else {
198
199
  return (0, _emotion.jsx)(_CheckboxFacade.CheckboxFacade, {
199
200
  size: size,
@@ -204,8 +205,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
204
205
  themeOverride: themeOverride,
205
206
  invalid: this.invalid
206
207
  }, label, isRequired && label && (0, _emotion.jsx)("span", {
207
- css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
208
- }, " *"));
208
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
209
+ "aria-hidden": true
210
+ }, ' ', "*"));
209
211
  }
210
212
  }
211
213
  renderMessages() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-checkbox",
3
- "version": "10.6.2-snapshot-9",
3
+ "version": "10.7.0",
4
4
  "description": " styled HTML input type='checkbox' component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,28 +24,28 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.25.6",
27
- "@instructure/console": "10.6.2-snapshot-9",
28
- "@instructure/emotion": "10.6.2-snapshot-9",
29
- "@instructure/shared-types": "10.6.2-snapshot-9",
30
- "@instructure/ui-dom-utils": "10.6.2-snapshot-9",
31
- "@instructure/ui-form-field": "10.6.2-snapshot-9",
32
- "@instructure/ui-icons": "10.6.2-snapshot-9",
33
- "@instructure/ui-prop-types": "10.6.2-snapshot-9",
34
- "@instructure/ui-react-utils": "10.6.2-snapshot-9",
35
- "@instructure/ui-svg-images": "10.6.2-snapshot-9",
36
- "@instructure/ui-testable": "10.6.2-snapshot-9",
37
- "@instructure/ui-utils": "10.6.2-snapshot-9",
38
- "@instructure/ui-view": "10.6.2-snapshot-9",
39
- "@instructure/uid": "10.6.2-snapshot-9",
27
+ "@instructure/console": "10.7.0",
28
+ "@instructure/emotion": "10.7.0",
29
+ "@instructure/shared-types": "10.7.0",
30
+ "@instructure/ui-dom-utils": "10.7.0",
31
+ "@instructure/ui-form-field": "10.7.0",
32
+ "@instructure/ui-icons": "10.7.0",
33
+ "@instructure/ui-prop-types": "10.7.0",
34
+ "@instructure/ui-react-utils": "10.7.0",
35
+ "@instructure/ui-svg-images": "10.7.0",
36
+ "@instructure/ui-testable": "10.7.0",
37
+ "@instructure/ui-utils": "10.7.0",
38
+ "@instructure/ui-view": "10.7.0",
39
+ "@instructure/uid": "10.7.0",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "10.6.2-snapshot-9",
45
- "@instructure/ui-babel-preset": "10.6.2-snapshot-9",
46
- "@instructure/ui-color-utils": "10.6.2-snapshot-9",
47
- "@instructure/ui-test-utils": "10.6.2-snapshot-9",
48
- "@instructure/ui-themes": "10.6.2-snapshot-9",
44
+ "@instructure/ui-axe-check": "10.7.0",
45
+ "@instructure/ui-babel-preset": "10.7.0",
46
+ "@instructure/ui-color-utils": "10.7.0",
47
+ "@instructure/ui-test-utils": "10.7.0",
48
+ "@instructure/ui-themes": "10.7.0",
49
49
  "@testing-library/jest-dom": "^6.4.6",
50
50
  "@testing-library/react": "^16.0.1",
51
51
  "@testing-library/user-event": "^14.5.2",
package/src/Checkbox/CheckboxFacade/theme.ts CHANGED
@@ -48,7 +48,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
48
48
  color: colors?.contrasts?.white1010,
49
49
  borderWidth: borders?.widthSmall,
50
50
  borderColor: colors?.contrasts?.grey3045,
51
- errorBorderColor: colors?.ui?.textError,
51
+ errorBorderColor: colors?.contrasts?.red5782,
52
52
  borderRadius: borders?.radiusMedium,
53
53
  background: colors?.contrasts?.white1010,
54
54
  marginRight: spacing?.xSmall,
package/src/Checkbox/ToggleFacade/theme.ts CHANGED
@@ -54,7 +54,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
54
54
 
55
55
  const componentVariables: ToggleFacadeTheme = {
56
56
  color: colors?.contrasts?.white1010,
57
- errorBorderColor: colors?.ui?.textError,
57
+ errorBorderColor: colors?.contrasts?.red5782,
58
58
  background: colors?.contrasts?.grey1111,
59
59
  borderColor: colors?.contrasts?.grey3045,
60
60
  borderWidth: borders?.widthSmall,
package/src/Checkbox/index.tsx CHANGED
@@ -231,7 +231,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
231
231
  >
232
232
  {label}
233
233
  {isRequired && label && (
234
- <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
234
+ <span
235
+ css={this.invalid ? styles?.requiredInvalid : {}}
236
+ aria-hidden={true}
237
+ >
238
+ {' '}
239
+ *
240
+ </span>
235
241
  )}
236
242
  </ToggleFacade>
237
243
  )
@@ -248,7 +254,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
248
254
  >
249
255
  {label}
250
256
  {isRequired && label && (
251
- <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
257
+ <span
258
+ css={this.invalid ? styles?.requiredInvalid : {}}
259
+ aria-hidden={true}
260
+ >
261
+ {' '}
262
+ *
263
+ </span>
252
264
  )}
253
265
  </CheckboxFacade>
254
266
  )