@instructure/ui-checkbox 11.7.4 → 11.7.5-pr-snapshot-1787571141446

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.
 
+## [11.7.5-pr-snapshot-1787571141446](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5-pr-snapshot-1787571141446) (2026-08-24)
+
+
+### Bug Fixes
+
+* **ui-checkbox:** announce the toggle variant as a toggle button ([c713660](https://github.com/instructure/instructure-ui/commit/c7136606d91ef7dd59c7479a6d65565b24dea972))
+* **ui-checkbox:** fix message indentation ([dfaa13a](https://github.com/instructure/instructure-ui/commit/dfaa13ad61ca4f53bd445211e661fae6cd9a02e1))
+
+
+
+
+
 ## [11.7.4](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4) (2026-07-24)
 
 

package/es/Checkbox/v2/index.js

@@ -232,7 +232,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
     return messages && messages.length > 0 ? _jsx(View, {
       display: "block",
       margin: "small 0 0",
-      css: this.isError && (variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError),
+      css: variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError,
       children: _jsx(FormFieldMessages, {
         id: this._messagesId,
         messages: messages
@@ -278,6 +278,8 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
           readOnly: readOnly,
           "aria-readonly": readOnly ? true : undefined,
           "aria-checked": indeterminate ? 'mixed' : undefined,
+          role: variant === 'toggle' ? 'button' : undefined,
+          "aria-pressed": variant === 'toggle' ? this.checked : undefined,
           "aria-invalid": this.invalid ? 'true' : undefined
           // Keep messages in the description so the accessible name contains only the label.
           ,

package/lib/Checkbox/v2/index.js

@@ -252,7 +252,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
     return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)(_latest2.View, {
       display: "block",
       margin: "small 0 0",
-      css: this.isError && (variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError),
+      css: variant === 'toggle' ? styles?.indentedToggleError : styles?.indentedError,
       children: (0, _jsxRuntime.jsx)(_latest.FormFieldMessages, {
         id: this._messagesId,
         messages: messages
@@ -298,6 +298,8 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
           readOnly: readOnly,
           "aria-readonly": readOnly ? true : undefined,
           "aria-checked": indeterminate ? 'mixed' : undefined,
+          role: variant === 'toggle' ? 'button' : undefined,
+          "aria-pressed": variant === 'toggle' ? this.checked : undefined,
           "aria-invalid": this.invalid ? 'true' : undefined
           // Keep messages in the description so the accessible name contains only the label.
           ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.7.4",
+  "version": "11.7.5-pr-snapshot-1787571141446",
   "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",
-    "@instructure/emotion": "11.7.4",
-    "@instructure/ui-dom-utils": "11.7.4",
-    "@instructure/ui-form-field": "11.7.4",
-    "@instructure/shared-types": "11.7.4",
-    "@instructure/ui-icons": "11.7.4",
-    "@instructure/ui-react-utils": "11.7.4",
-    "@instructure/ui-svg-images": "11.7.4",
-    "@instructure/ui-themes": "11.7.4",
-    "@instructure/ui-view": "11.7.4",
-    "@instructure/uid": "11.7.4",
-    "@instructure/ui-utils": "11.7.4"
+    "@instructure/console": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/shared-types": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/emotion": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-dom-utils": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-form-field": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-icons": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-react-utils": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-utils": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-themes": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-view": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-svg-images": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/uid": "11.7.5-pr-snapshot-1787571141446"
   },
   "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-babel-preset": "11.7.4",
-    "@instructure/ui-color-utils": "11.7.4",
-    "@instructure/ui-axe-check": "11.7.4"
+    "@instructure/ui-axe-check": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-babel-preset": "11.7.5-pr-snapshot-1787571141446",
+    "@instructure/ui-color-utils": "11.7.5-pr-snapshot-1787571141446"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Checkbox/v2/index.tsx

@@ -286,10 +286,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         display="block"
         margin="small 0 0"
         css={
-          this.isError &&
-          (variant === 'toggle'
+          variant === 'toggle'
             ? styles?.indentedToggleError
-            : styles?.indentedError)
+            : styles?.indentedError
         }
       >
         <FormFieldMessages id={this._messagesId} messages={messages} />
@@ -343,6 +342,8 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             readOnly={readOnly}
             aria-readonly={readOnly ? true : undefined}
             aria-checked={indeterminate ? 'mixed' : undefined}
+            role={variant === 'toggle' ? 'button' : undefined}
+            aria-pressed={variant === 'toggle' ? this.checked : undefined}
             aria-invalid={this.invalid ? 'true' : undefined}
             // Keep messages in the description so the accessible name contains only the label.
             aria-labelledby={