@instructure/ui-checkbox 9.10.2 → 9.11.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.11.1](https://github.com/instructure/instructure-ui/compare/v9.11.0...v9.11.1) (2025-03-11)
+
+
+### Bug Fixes
+
+* fix FormFieldLabel not read on NVDA hover ([c29b6ab](https://github.com/instructure/instructure-ui/commit/c29b6ab989266c6a7875e3f0dbdee3efbf18606a))
+
+
+
+
+
+# [9.11.0](https://github.com/instructure/instructure-ui/compare/v9.10.2...v9.11.0) (2025-02-12)
+
+**Note:** Version bump only for package @instructure/ui-checkbox
+
+
+
+
+
 ## [9.10.2](https://github.com/instructure/instructure-ui/compare/v9.10.1...v9.10.2) (2024-12-19)
 
 **Note:** Version bump only for package @instructure/ui-checkbox

package/es/CheckboxGroup/__new-tests__/CheckboxGroup.test.js

@@ -81,8 +81,8 @@ describe('<CheckboxGroup />', () => {
         }]
       }),
       container = _renderCheckboxGroup.container;
-    const fieldset = screen.getByRole('group');
-    const ariaDesc = fieldset.getAttribute('aria-describedby');
+    const group = screen.getByRole('group');
+    const ariaDesc = group.getAttribute('aria-describedby');
     const messageById = container.querySelector(`[id="${ariaDesc}"]`);
     expect(messageById).toBeInTheDocument();
     expect(messageById).toHaveTextContent(TEST_ERROR_MESSAGE);
@@ -92,7 +92,7 @@ describe('<CheckboxGroup />', () => {
         description: TEST_DESCRIPTION
       }),
       container = _renderCheckboxGroup2.container;
-    const legend = container.querySelector('legend');
+    const legend = container.querySelector('span[class$="-formFieldLayout__label"]');
     expect(legend).toBeInTheDocument();
     expect(legend).toHaveTextContent(TEST_DESCRIPTION);
   });
@@ -204,5 +204,22 @@ describe('<CheckboxGroup />', () => {
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });
+    it('adds the correct ARIA attributes', () => {
+      const _renderCheckboxGroup4 = renderCheckboxGroup({
+          disabled: true,
+          messages: [{
+            type: 'newError',
+            text: 'abc'
+          }],
+          // @ts-ignore This is a valid attribute
+          'data-id': 'group'
+        }),
+        container = _renderCheckboxGroup4.container;
+      const group = container.querySelector(`[data-id="group"]`);
+      expect(group).toBeInTheDocument();
+      expect(group).toHaveAttribute('aria-disabled', 'true');
+      // ARIA role 'group' cannot have the 'aria-invalid' attribute
+      expect(group).not.toHaveAttribute('aria-invalid');
+    });
   });
 });

package/lib/CheckboxGroup/__new-tests__/CheckboxGroup.test.js

@@ -83,8 +83,8 @@ describe('<CheckboxGroup />', () => {
         }]
       }),
       container = _renderCheckboxGroup.container;
-    const fieldset = _react2.screen.getByRole('group');
-    const ariaDesc = fieldset.getAttribute('aria-describedby');
+    const group = _react2.screen.getByRole('group');
+    const ariaDesc = group.getAttribute('aria-describedby');
     const messageById = container.querySelector(`[id="${ariaDesc}"]`);
     expect(messageById).toBeInTheDocument();
     expect(messageById).toHaveTextContent(TEST_ERROR_MESSAGE);
@@ -94,7 +94,7 @@ describe('<CheckboxGroup />', () => {
         description: TEST_DESCRIPTION
       }),
       container = _renderCheckboxGroup2.container;
-    const legend = container.querySelector('legend');
+    const legend = container.querySelector('span[class$="-formFieldLayout__label"]');
     expect(legend).toBeInTheDocument();
     expect(legend).toHaveTextContent(TEST_DESCRIPTION);
   });
@@ -206,5 +206,22 @@ describe('<CheckboxGroup />', () => {
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });
+    it('adds the correct ARIA attributes', () => {
+      const _renderCheckboxGroup4 = renderCheckboxGroup({
+          disabled: true,
+          messages: [{
+            type: 'newError',
+            text: 'abc'
+          }],
+          // @ts-ignore This is a valid attribute
+          'data-id': 'group'
+        }),
+        container = _renderCheckboxGroup4.container;
+      const group = container.querySelector(`[data-id="group"]`);
+      expect(group).toBeInTheDocument();
+      expect(group).toHaveAttribute('aria-disabled', 'true');
+      // ARIA role 'group' cannot have the 'aria-invalid' attribute
+      expect(group).not.toHaveAttribute('aria-invalid');
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "9.10.2",
+  "version": "9.11.1",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.10.2",
-    "@instructure/emotion": "9.10.2",
-    "@instructure/shared-types": "9.10.2",
-    "@instructure/ui-dom-utils": "9.10.2",
-    "@instructure/ui-form-field": "9.10.2",
-    "@instructure/ui-icons": "9.10.2",
-    "@instructure/ui-prop-types": "9.10.2",
-    "@instructure/ui-react-utils": "9.10.2",
-    "@instructure/ui-svg-images": "9.10.2",
-    "@instructure/ui-testable": "9.10.2",
-    "@instructure/ui-utils": "9.10.2",
-    "@instructure/ui-view": "9.10.2",
-    "@instructure/uid": "9.10.2",
+    "@instructure/console": "9.11.1",
+    "@instructure/emotion": "9.11.1",
+    "@instructure/shared-types": "9.11.1",
+    "@instructure/ui-dom-utils": "9.11.1",
+    "@instructure/ui-form-field": "9.11.1",
+    "@instructure/ui-icons": "9.11.1",
+    "@instructure/ui-prop-types": "9.11.1",
+    "@instructure/ui-react-utils": "9.11.1",
+    "@instructure/ui-svg-images": "9.11.1",
+    "@instructure/ui-testable": "9.11.1",
+    "@instructure/ui-utils": "9.11.1",
+    "@instructure/ui-view": "9.11.1",
+    "@instructure/uid": "9.11.1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.10.2",
-    "@instructure/ui-babel-preset": "9.10.2",
-    "@instructure/ui-color-utils": "9.10.2",
-    "@instructure/ui-test-utils": "9.10.2",
-    "@instructure/ui-themes": "9.10.2",
+    "@instructure/ui-axe-check": "9.11.1",
+    "@instructure/ui-babel-preset": "9.11.1",
+    "@instructure/ui-color-utils": "9.11.1",
+    "@instructure/ui-test-utils": "9.11.1",
+    "@instructure/ui-themes": "9.11.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/CheckboxGroup/__new-tests__/CheckboxGroup.test.tsx

@@ -88,8 +88,8 @@ describe('<CheckboxGroup />', () => {
     const { container } = renderCheckboxGroup({
       messages: [{ text: TEST_ERROR_MESSAGE, type: 'error' }]
     })
-    const fieldset = screen.getByRole('group')
-    const ariaDesc = fieldset.getAttribute('aria-describedby')
+    const group = screen.getByRole('group')
+    const ariaDesc = group.getAttribute('aria-describedby')
     const messageById = container.querySelector(`[id="${ariaDesc}"]`)
 
     expect(messageById).toBeInTheDocument()
@@ -98,7 +98,9 @@ describe('<CheckboxGroup />', () => {
 
   it('displays description message inside the legend', () => {
     const { container } = renderCheckboxGroup({ description: TEST_DESCRIPTION })
-    const legend = container.querySelector('legend')
+    const legend = container.querySelector(
+      'span[class$="-formFieldLayout__label"]'
+    )
 
     expect(legend).toBeInTheDocument()
     expect(legend).toHaveTextContent(TEST_DESCRIPTION)
@@ -217,5 +219,19 @@ describe('<CheckboxGroup />', () => {
 
       expect(axeCheck).toBe(true)
     })
+
+    it('adds the correct ARIA attributes', () => {
+      const { container } = renderCheckboxGroup({
+        disabled: true,
+        messages: [{ type: 'newError', text: 'abc' }],
+        // @ts-ignore This is a valid attribute
+        'data-id': 'group'
+      })
+      const group = container.querySelector(`[data-id="group"]`)
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveAttribute('aria-disabled', 'true')
+      // ARIA role 'group' cannot have the 'aria-invalid' attribute
+      expect(group).not.toHaveAttribute('aria-invalid')
+    })
   })
 })

package/src/CheckboxGroup/props.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React from 'react'
+import React, { type InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import { FormPropTypes } from '@instructure/ui-form-field'
@@ -32,7 +32,10 @@ import {
 } from '@instructure/ui-prop-types'
 
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import { Checkbox } from '../Checkbox'
@@ -58,7 +61,12 @@ type PropKeys = keyof CheckboxGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type CheckboxGroupProps = CheckboxGroupOwnProps & WithDeterministicIdProps
+type CheckboxGroupProps = CheckboxGroupOwnProps &
+  OtherHTMLAttributes<
+    CheckboxGroupOwnProps,
+    InputHTMLAttributes<CheckboxGroupOwnProps & Element>
+  > &
+  WithDeterministicIdProps
 
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,