@instructure/ui-checkbox 11.7.4-snapshot-121 → 11.7.4-snapshot-126

package/CHANGELOG.md

@@ -3,7 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-121](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-121) (2026-07-22)
+## [11.7.4-snapshot-126](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-126) (2026-07-22)
+
+
+### Bug Fixes
+
+* **many:** keep form field messages out of the control's accessible name ([409d077](https://github.com/instructure/instructure-ui/commit/409d077a3095b318fd7d2e150bb01bc2732c9bf5))
+* **many:** only reference rendered messages via aria-describedby ([ccc9516](https://github.com/instructure/instructure-ui/commit/ccc95165ec8dae6d06e001c0a20fcebef1cf9962))
 
 
 ### Features

package/es/Checkbox/v2/index.js

@@ -68,8 +68,12 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
       this.state.checked = !!props.defaultChecked;
     }
     this._defaultId = props.deterministicId();
+    this._messagesId = props.deterministicId('Checkbox-messages');
+    this._labelId = props.deterministicId('Checkbox-label');
   }
   _defaultId;
+  _messagesId;
+  _labelId;
   _input = null;
   ref = null;
   handleRef = el => {
@@ -151,6 +155,9 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
   get isError() {
     return !!this.props.messages?.find(m => m.type === 'error' || m.type === 'newError');
   }
+  get hasMessages() {
+    return !!this.props.messages && this.props.messages.length > 0;
+  }
   get invalid() {
     return !!this.props.messages?.find(m => m.type === 'newError' || m.type === 'error');
   }
@@ -175,8 +182,18 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
       focused
     } = this.state;
     error(!(variant === 'simple' && labelPlacement !== 'end'), `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`);
+
+    // Give the label its own id so messages stay out of the accessible name.
+    const labelContent = _jsxs("span", {
+      id: this._labelId,
+      children: [label, isRequired && label && _jsxs("span", {
+        css: this.invalid ? styles?.requiredInvalid : {},
+        "aria-hidden": true,
+        children: [' ', "*"]
+      })]
+    });
     if (variant === 'toggle') {
-      return _jsxs(ToggleFacade, {
+      return _jsx(ToggleFacade, {
         disabled: disabled,
         size: size,
         hovered: hovered,
@@ -189,14 +206,10 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
         ,
         themeOverride: themeOverride,
         invalid: this.invalid,
-        children: [label, isRequired && label && _jsxs("span", {
-          css: this.invalid ? styles?.requiredInvalid : {},
-          "aria-hidden": true,
-          children: [' ', "*"]
-        })]
+        children: labelContent
       });
     } else {
-      return _jsxs(CheckboxFacade, {
+      return _jsx(CheckboxFacade, {
         disabled: disabled,
         size: size,
         hovered: hovered,
@@ -206,11 +219,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
         indeterminate: indeterminate,
         themeOverride: themeOverride,
         invalid: this.invalid,
-        children: [label, isRequired && label && _jsxs("span", {
-          css: this.invalid ? styles?.requiredInvalid : {},
-          "aria-hidden": true,
-          children: [' ', "*"]
-        })]
+        children: labelContent
       });
     }
   }
@@ -225,6 +234,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
       margin: "small 0 0",
       css: this.isError && (variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError),
       children: _jsx(FormFieldMessages, {
+        id: this._messagesId,
         messages: messages
       })
     }) : null;
@@ -268,7 +278,11 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
           readOnly: readOnly,
           "aria-readonly": readOnly ? true : undefined,
           "aria-checked": indeterminate ? 'mixed' : undefined,
-          "aria-invalid": this.invalid ? 'true' : undefined,
+          "aria-invalid": this.invalid ? 'true' : undefined
+          // Keep messages in the description so the accessible name contains only the label.
+          ,
+          "aria-labelledby": this.hasMessages ? props['aria-labelledby'] || this._labelId : props['aria-labelledby'],
+          "aria-describedby": [props['aria-describedby'], this.hasMessages ? this._messagesId : null].filter(Boolean).join(' ') || undefined,
           css: styles?.input,
           onClickCapture: e => {
             if (readOnly) {

package/lib/Checkbox/v2/index.js

@@ -88,8 +88,12 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       this.state.checked = !!props.defaultChecked;
     }
     this._defaultId = props.deterministicId();
+    this._messagesId = props.deterministicId('Checkbox-messages');
+    this._labelId = props.deterministicId('Checkbox-label');
   }
   _defaultId;
+  _messagesId;
+  _labelId;
   _input = null;
   ref = null;
   handleRef = el => {
@@ -171,6 +175,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
   get isError() {
     return !!this.props.messages?.find(m => m.type === 'error' || m.type === 'newError');
   }
+  get hasMessages() {
+    return !!this.props.messages && this.props.messages.length > 0;
+  }
   get invalid() {
     return !!this.props.messages?.find(m => m.type === 'newError' || m.type === 'error');
   }
@@ -195,8 +202,18 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       focused
     } = this.state;
     (0, _console.logError)(!(variant === 'simple' && labelPlacement !== 'end'), `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`);
+
+    // Give the label its own id so messages stay out of the accessible name.
+    const labelContent = (0, _jsxRuntime.jsxs)("span", {
+      id: this._labelId,
+      children: [label, isRequired && label && (0, _jsxRuntime.jsxs)("span", {
+        css: this.invalid ? styles?.requiredInvalid : {},
+        "aria-hidden": true,
+        children: [' ', "*"]
+      })]
+    });
     if (variant === 'toggle') {
-      return (0, _jsxRuntime.jsxs)(_index2.ToggleFacade, {
+      return (0, _jsxRuntime.jsx)(_index2.ToggleFacade, {
         disabled: disabled,
         size: size,
         hovered: hovered,
@@ -209,14 +226,10 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
         ,
         themeOverride: themeOverride,
         invalid: this.invalid,
-        children: [label, isRequired && label && (0, _jsxRuntime.jsxs)("span", {
-          css: this.invalid ? styles?.requiredInvalid : {},
-          "aria-hidden": true,
-          children: [' ', "*"]
-        })]
+        children: labelContent
       });
     } else {
-      return (0, _jsxRuntime.jsxs)(_index.CheckboxFacade, {
+      return (0, _jsxRuntime.jsx)(_index.CheckboxFacade, {
         disabled: disabled,
         size: size,
         hovered: hovered,
@@ -226,11 +239,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
         indeterminate: indeterminate,
         themeOverride: themeOverride,
         invalid: this.invalid,
-        children: [label, isRequired && label && (0, _jsxRuntime.jsxs)("span", {
-          css: this.invalid ? styles?.requiredInvalid : {},
-          "aria-hidden": true,
-          children: [' ', "*"]
-        })]
+        children: labelContent
       });
     }
   }
@@ -245,6 +254,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
       margin: "small 0 0",
       css: this.isError && (variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError),
       children: (0, _jsxRuntime.jsx)(_latest.FormFieldMessages, {
+        id: this._messagesId,
         messages: messages
       })
     }) : null;
@@ -288,7 +298,11 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
           readOnly: readOnly,
           "aria-readonly": readOnly ? true : undefined,
           "aria-checked": indeterminate ? 'mixed' : undefined,
-          "aria-invalid": this.invalid ? 'true' : undefined,
+          "aria-invalid": this.invalid ? 'true' : undefined
+          // Keep messages in the description so the accessible name contains only the label.
+          ,
+          "aria-labelledby": this.hasMessages ? props['aria-labelledby'] || this._labelId : props['aria-labelledby'],
+          "aria-describedby": [props['aria-describedby'], this.hasMessages ? this._messagesId : null].filter(Boolean).join(' ') || undefined,
           css: styles?.input,
           onClickCapture: e => {
             if (readOnly) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.7.4-snapshot-121",
+  "version": "11.7.4-snapshot-126",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,27 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/console": "11.7.4-snapshot-121",
-    "@instructure/emotion": "11.7.4-snapshot-121",
-    "@instructure/shared-types": "11.7.4-snapshot-121",
-    "@instructure/ui-form-field": "11.7.4-snapshot-121",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-icons": "11.7.4-snapshot-121",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-themes": "11.7.4-snapshot-121",
-    "@instructure/ui-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-view": "11.7.4-snapshot-121",
-    "@instructure/uid": "11.7.4-snapshot-121",
-    "@instructure/ui-svg-images": "11.7.4-snapshot-121"
+    "@instructure/console": "11.7.4-snapshot-126",
+    "@instructure/emotion": "11.7.4-snapshot-126",
+    "@instructure/shared-types": "11.7.4-snapshot-126",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-form-field": "11.7.4-snapshot-126",
+    "@instructure/ui-svg-images": "11.7.4-snapshot-126",
+    "@instructure/ui-themes": "11.7.4-snapshot-126",
+    "@instructure/ui-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-126",
+    "@instructure/uid": "11.7.4-snapshot-126",
+    "@instructure/ui-view": "11.7.4-snapshot-126",
+    "@instructure/ui-icons": "11.7.4-snapshot-126"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-121",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-121"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-126",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-axe-check": "11.7.4-snapshot-126"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Checkbox/v2/index.tsx

@@ -84,8 +84,12 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     }
 
     this._defaultId = props.deterministicId!()
+    this._messagesId = props.deterministicId!('Checkbox-messages')
+    this._labelId = props.deterministicId!('Checkbox-label')
   }
   private readonly _defaultId: string
+  private readonly _messagesId: string
+  private readonly _labelId: string
   private _input: HTMLInputElement | null = null
 
   ref: Element | null = null
@@ -186,6 +190,10 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     )
   }
 
+  get hasMessages() {
+    return !!this.props.messages && this.props.messages.length > 0
+  }
+
   get invalid() {
     return !!this.props.messages?.find(
       (m) => m.type === 'newError' || m.type === 'error'
@@ -217,6 +225,22 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`
     )
 
+    // Give the label its own id so messages stay out of the accessible name.
+    const labelContent = (
+      <span id={this._labelId}>
+        {label}
+        {isRequired && label && (
+          <span
+            css={this.invalid ? styles?.requiredInvalid : {}}
+            aria-hidden={true}
+          >
+            {' '}
+            *
+          </span>
+        )}
+      </span>
+    )
+
     if (variant === 'toggle') {
       return (
         <ToggleFacade
@@ -232,16 +256,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           themeOverride={themeOverride}
           invalid={this.invalid}
         >
-          {label}
-          {isRequired && label && (
-            <span
-              css={this.invalid ? styles?.requiredInvalid : {}}
-              aria-hidden={true}
-            >
-              {' '}
-              *
-            </span>
-          )}
+          {labelContent}
         </ToggleFacade>
       )
     } else {
@@ -257,16 +272,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           themeOverride={themeOverride}
           invalid={this.invalid}
         >
-          {label}
-          {isRequired && label && (
-            <span
-              css={this.invalid ? styles?.requiredInvalid : {}}
-              aria-hidden={true}
-            >
-              {' '}
-              *
-            </span>
-          )}
+          {labelContent}
         </CheckboxFacade>
       )
     }
@@ -286,7 +292,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             : styles?.indentedError)
         }
       >
-        <FormFieldMessages messages={messages} />
+        <FormFieldMessages id={this._messagesId} messages={messages} />
       </View>
     ) : null
   }
@@ -338,6 +344,20 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             aria-readonly={readOnly ? true : undefined}
             aria-checked={indeterminate ? 'mixed' : undefined}
             aria-invalid={this.invalid ? 'true' : undefined}
+            // Keep messages in the description so the accessible name contains only the label.
+            aria-labelledby={
+              this.hasMessages
+                ? props['aria-labelledby'] || this._labelId
+                : props['aria-labelledby']
+            }
+            aria-describedby={
+              [
+                props['aria-describedby'],
+                this.hasMessages ? this._messagesId : null
+              ]
+                .filter(Boolean)
+                .join(' ') || undefined
+            }
             css={styles?.input}
             onClickCapture={(e) => {
               if (readOnly) {