fix: improving accessibility on buttons without text

__tests__/arrow.spec.tsx

@@ -12,4 +12,14 @@ describe('<Arrow />', () => {
 		fireEvent.click(getByRole('button'));
 		expect(onClick).toHaveBeenCalled();
 	});
+
+	it('should have the correct aria-label when direction is right', () => {
+		const { getByRole } = render(<Arrow direction="right" />);
+		expect(getByRole('button')).toHaveAttribute('aria-label', 'Sağa kaydır');
+	});
+
+	it('should have the correct aria-label when direction is left', () => {
+		const { getByRole } = render(<Arrow direction="left" />);
+		expect(getByRole('button')).toHaveAttribute('aria-label', 'Sola kaydır');
+	});
 });

__tests__/scrollingCarousel.spec.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { render, cleanup, fireEvent, wait } from '@testing-library/react';
+import { render, cleanup, fireEvent, wait, waitFor } from '@testing-library/react';
 import { ScrollingCarousel } from '../src';
 import { carouselItemNodes } from './__fixtures__/nodes';
 import * as helpers from '../src/helpers';
@@ -102,4 +102,23 @@ describe('<ScrollingCarousel />', () => {
 			expect(container.querySelector('.sliding')).toBeInTheDocument();
 		});
 	});
+
+	it('should remove sliding class when isDown is false', async () => {
+		const { getByTestId } = render(
+			<ScrollingCarousel
+				triggerClickOn={3}
+				leftIcon={<i />}
+				children={carouselItemNodes(6)}
+			/>,
+		);
+
+		const sliderList = getByTestId('sliderList');
+		fireEvent.mouseDown(sliderList, { pageX: 600 });
+		fireEvent.mouseMove(sliderList, { pageX: 605 }); // Ensure some movement occurs
+		fireEvent.mouseUp(sliderList);
+
+		await waitFor(() => {
+			expect(sliderList).not.toHaveClass('sliding');
+		});
+	});
 });

src/components/arrow/index.tsx

@@ -3,6 +3,7 @@ import styles from '../../styles/styles.module.css';
 
 export const Arrow: FunctionComponent<ArrowProps> = (props: ArrowProps) => (
 	<button
+		aria-label={`${props.direction === 'right' ? 'Sağa' : 'Sola'} kaydır`}
 		className={styles.carouselArrow}
 		onClick={props.onClick}
 		data-direction={props.direction}

src/components/scrolling-carousel/index.tsx

@@ -133,7 +133,7 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = (
 	) => {
 		return (
 			<div data-arrow={data} onClick={() => slide(direction)}>
-				{element ?? <button />}
+				{element ?? <button aria-label={`${data === 'right' ? 'Sağa' : 'Sola'} kaydır`} />}
 			</div>
 		);
 	};