fix: prevent hover state from showing when ToggleButtonGroup is disabled (#9449)

Author: chirokas

packages/react-aria-components/src/ToggleButton.tsx

@@ -71,7 +71,7 @@ export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     : useToggleButton({...props, id: props.id != null ? String(props.id) : undefined}, state, ref);
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
-  let {hoverProps, isHovered} = useHover(props);
+  let {hoverProps, isHovered} = useHover({...props, isDisabled});
   let renderProps = useRenderProps({
     ...props,
     id: undefined,

packages/react-aria-components/test/ToggleButtonGroup.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React from 'react';
 import {ToggleButton, ToggleButtonGroup} from '../';
 import userEvent from '@testing-library/user-event';
@@ -25,6 +25,7 @@ function renderGroup(props) {
 }
 
 describe('ToggleButtonGroup', () => {
+  installPointerEvent();
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
@@ -59,6 +60,17 @@ describe('ToggleButtonGroup', () => {
     }
   });
 
+  it('should not show hover state when disabled', async () => {
+    let {getAllByRole} = renderGroup({isDisabled: true, className: ({isHovered}) => (isHovered ? 'hover' : '')});
+    let radios = getAllByRole('radio');
+    await user.hover(radios[0]);
+    expect(radios[0]).not.toHaveAttribute('data-hovered');
+    expect(radios[0]).not.toHaveClass('hover');
+    await user.hover(radios[1]);
+    expect(radios[1]).not.toHaveAttribute('data-hovered');
+    expect(radios[1]).not.toHaveClass('hover');
+  });
+
   it('should support uncontrolled single selection', async () => {
     let onSelectionChange = jest.fn();
     let {getByRole, getAllByRole} = renderGroup({selectionMode: 'single', onSelectionChange});