diff --git a/package-lock.json b/package-lock.json index bf7e84d2..8d88366f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3260,6 +3260,29 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/@isaacs/fs-minipass": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", + "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.0.4" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@isaacs/fs-minipass/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -26921,6 +26944,20 @@ "inBundle": true, "license": "MIT" }, + "node_modules/npm/node_modules/jackspeak": { + "version": "4.0.2", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/npm/node_modules/jsbn": { "version": "0.1.1", "dev": true, @@ -27743,6 +27780,31 @@ "node": ">=0.10.0" } }, + "node_modules/npm/node_modules/path-scurry": { + "version": "2.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/npm/node_modules/path-scurry/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/npm/node_modules/performance-now": { "version": "2.1.0", "dev": true, @@ -38586,6 +38648,22 @@ } } }, + "@isaacs/fs-minipass": { + "version": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", + "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==", + "dev": true, + "requires": { + "minipass": "^7.0.4" + }, + "dependencies": { + "minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true + } + } + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -56214,6 +56292,13 @@ "bundled": true, "dev": true }, + "jackspeak": { + "version": "4.0.2", + "dev": true, + "requires": { + "@isaacs/cliui": "^8.0.2" + } + }, "jsbn": { "version": "0.1.1", "bundled": true, @@ -56815,6 +56900,22 @@ "bundled": true, "dev": true }, + "path-scurry": { + "version": "2.0.0", + "dev": true, + "requires": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "dependencies": { + "minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true + } + } + }, "performance-now": { "version": "2.1.0", "bundled": true, diff --git a/src/components/experimental/IconButton/IconButton.spec.tsx b/src/components/experimental/IconButton/IconButton.spec.tsx index 41c90872..a46596e8 100644 --- a/src/components/experimental/IconButton/IconButton.spec.tsx +++ b/src/components/experimental/IconButton/IconButton.spec.tsx @@ -6,35 +6,35 @@ import { TrashIcon } from '../../../icons'; describe('Experimental: IconButton', () => { it('renders an icon button with the provided icon', () => { const onPress = jest.fn(); - render(); - expect(screen.getByTestId('standard-icon-container')).toBeInTheDocument(); + render(); + expect(screen.getByRole("button", { name: "Icon label"})).toBeInTheDocument(); }); it('calls onPress when clicked', () => { const onPress = jest.fn(); - render(); - screen.getByTestId('standard-icon-container').click(); + render(); + screen.getByRole("button", { name: "Icon label"}).click(); expect(onPress).toHaveBeenCalledTimes(1); }); it('does not call onPress when disabled', () => { const onPress = jest.fn(); - render(); - screen.getByTestId('standard-icon-container').click(); + render(); + screen.getByRole("button", { name: "Icon label"}).click(); expect(onPress).toHaveBeenCalledTimes(0); }); it('does not call onPress when is loading', () => { const onPress = jest.fn(); - render(); - screen.getByTestId('standard-icon-container').click(); + render(); + screen.getByRole("button", { name: "Icon label"}).click(); expect(onPress).toHaveBeenCalledTimes(0); }); it('sets the right sizes for standard variant', () => { const onPress = jest.fn(); - render(); - const iconContainerInstance = screen.getByTestId('standard-icon-container'); + render(); + const iconContainerInstance = screen.getByRole("button", { name: "Icon label"}); const containerStyle = window.getComputedStyle(iconContainerInstance); expect(containerStyle.width).toBe('2.5rem'); expect(containerStyle.height).toBe('2.5rem'); @@ -43,8 +43,8 @@ describe('Experimental: IconButton', () => { it('sets the right sizes for tonal variant', () => { const onPress = jest.fn(); - render(); - const iconContainerInstance = screen.getByTestId('tonal-icon-container'); + render(); + const iconContainerInstance = screen.getByRole("button", { name: "Icon label"}); const containerStyle = window.getComputedStyle(iconContainerInstance); expect(containerStyle.width).toBe('3.5rem'); expect(containerStyle.height).toBe('3.5rem'); @@ -53,7 +53,7 @@ describe('Experimental: IconButton', () => { it('spinner is rendered when loading', () => { const onPress = jest.fn(); - render(); + render(); expect(screen.getByTestId('iconbutton-spinner')).toBeInTheDocument(); }); }); diff --git a/src/components/experimental/IconButton/IconButton.tsx b/src/components/experimental/IconButton/IconButton.tsx index b9b9f7d9..837a4d44 100644 --- a/src/components/experimental/IconButton/IconButton.tsx +++ b/src/components/experimental/IconButton/IconButton.tsx @@ -1,6 +1,7 @@ import React, { ReactElement } from 'react'; import styled from 'styled-components'; import { ButtonProps, Button } from 'react-aria-components'; +import { VisuallyHidden } from 'react-aria'; import { IconProps } from '../../../icons'; import { getSemanticValue } from '../../../essentials/experimental'; import { InlineSpinner } from '../InlineSpinner/InlineSpinner'; @@ -10,6 +11,7 @@ export interface IconButtonProps extends ButtonProps { isLoading?: boolean; variant?: 'standard' | 'tonal'; Icon: React.FC; + label: string; } const StandardIconContainer = styled(Button)>` @@ -109,6 +111,7 @@ export const IconButton = ({ Icon, variant = 'standard', onPress, + label, ...restProps }: IconButtonProps): ReactElement => { const Container = variant === 'standard' ? StandardIconContainer : TonalIconContainer; @@ -120,13 +123,21 @@ export const IconButton = ({ isDisabled={isDisabled} isActive={isActive} isPending={isLoading} + label={label} {...restProps} > - {isLoading ? ( - - ) : ( - - )} + <> + {isLoading ? ( + + ) : ( + + )} + {label} + ); }; diff --git a/src/components/experimental/Snackbar/Snackbar.spec.tsx b/src/components/experimental/Snackbar/Snackbar.spec.tsx index f88be8df..093a0e12 100644 --- a/src/components/experimental/Snackbar/Snackbar.spec.tsx +++ b/src/components/experimental/Snackbar/Snackbar.spec.tsx @@ -18,7 +18,7 @@ test('renders the dismiss button when hasDismissButton is true and calls onDismi Test Snackbar ); - const dismissButton = screen.getByTestId('snackbar-close-icon'); + const dismissButton = screen.getByRole("button", { name: 'Close snackbar'}); fireEvent.click(dismissButton); expect(onDismiss).toHaveBeenCalledTimes(1); }); diff --git a/src/components/experimental/Snackbar/Snackbar.tsx b/src/components/experimental/Snackbar/Snackbar.tsx index 675b27e5..b7b6407f 100644 --- a/src/components/experimental/Snackbar/Snackbar.tsx +++ b/src/components/experimental/Snackbar/Snackbar.tsx @@ -50,10 +50,9 @@ const Snackbar = forwardRef( {children} {hasDismissButton && ( } onPress={onDismiss} - aria-label="close" /> )}