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"
/>
)}