fix: improving accessibility on buttons without text

.github/workflows/betapublish.yml

@@ -1,33 +1,35 @@
 name: Pre-Release
 on:
-  release:
-    types: [prereleased]
+    release:
+        types: [prereleased]
 jobs:
-  Publish:
-    runs-on: ubuntu-latest 
-    permissions: 
-      contents: read
-      packages: write 
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '12.x'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Install
-        run: npm install
-      - name: Test
-        run: npm run test
-      - uses: codecov/codecov-action@v2
-        with:
-          files: coverage/*.json
-          flags: unittests
-          name: react-carousel-codecov
-          fail_ci_if_error: true
-          verbose: true 
-      - name: Build
-        run: npm run build
-      - name: Publish
-        run: npm publish --access=public --tag beta
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    Publish:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v2
+              with:
+                  node-version: '12.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - name: Install
+              run: npm install
+            - name: Test
+              run: npm run test
+            - uses: codecov/codecov-action@v4
+              env:
+                  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+              with:
+                  files: coverage/*.json
+                  flags: unittests
+                  name: react-carousel-codecov
+                  fail_ci_if_error: true
+                  verbose: true
+            - name: Build
+              run: npm run build
+            - name: Publish
+              run: npm publish --access=public --tag beta
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/prchecks.yml

@@ -22,7 +22,9 @@ jobs:
               run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
             - name: Test
               run: npm run test
-            - uses: codecov/codecov-action@v2
+            - uses: codecov/codecov-action@v4
+              env:
+                  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
               with:
                   files: coverage/*.json
                   flags: unittests

.github/workflows/publish.yml

@@ -18,7 +18,9 @@ jobs:
               run: npm install
             - name: Test
               run: npm run test
-            - uses: codecov/codecov-action@v2
+            - uses: codecov/codecov-action@v4
+              env:
+                  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
               with:
                   files: coverage/*.json
                   flags: unittests

__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>
 		);
 	};