fix(design-system): add aria role to DsLoader [AR-54966] (#309)

Author: StyleShit

.changeset/stale-doors-admire.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Add aria role to `DsLoader`

packages/design-system/src/components/ds-loader/ds-loader.stories.tsx

@@ -24,12 +24,9 @@ type Story = StoryObj<typeof DsLoader>;
  * Default loader - rotating spinner arc
  */
 export const Default: Story = {
-	args: {
-		'data-testid': 'loader',
-	} as React.ComponentProps<typeof DsLoader>,
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const loader = canvas.getByTestId('loader');
+		const loader = canvas.getByRole('progressbar');
 
 		await expect(loader).toBeInTheDocument();
 	},
@@ -119,16 +116,15 @@ export const UsageExamples: Story = {
 };
 
 /**
- * Test that custom props (className, style, data-testid) are forwarded to the container
+ * Test that custom props (className, style) are forwarded to the container
  */
 export const CustomProps: Story = {
 	args: {
 		className: styles.customPropsLoader,
-		'data-testid': 'loader-test-id',
-	} as React.ComponentProps<typeof DsLoader>,
+	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const loader = canvas.getByTestId('loader-test-id');
+		const loader = canvas.getByRole('progressbar');
 
 		await expect(loader).toBeInTheDocument();
 		await expect(loader.className).toContain('customPropsLoader');

packages/design-system/src/components/ds-loader/ds-loader.tsx

@@ -9,7 +9,7 @@ import SpinnerIcon from './spinner-icon';
  */
 const DsLoader = ({ variant = 'spinner', className, ...props }: DsLoaderProps) => {
 	return (
-		<div className={classNames(styles.loaderContainer, className)} {...props}>
+		<div className={classNames(styles.loaderContainer, className)} role="progressbar" {...props}>
 			{variant === 'pulsing' ? <PulsingIcon /> : <SpinnerIcon />}
 		</div>
 	);