From 5836ecb6586e694ce7d74374776daeecfe8e9359 Mon Sep 17 00:00:00 2001 From: Ege Durmaz Date: Tue, 30 Apr 2024 11:24:13 +0300 Subject: [PATCH 1/4] fix: improving accessibility on buttons without text --- __tests__/arrow.spec.tsx | 10 ++++++++++ __tests__/scrollingCarousel.spec.tsx | 21 ++++++++++++++++++++- src/components/arrow/index.tsx | 1 + src/components/scrolling-carousel/index.tsx | 2 +- 4 files changed, 32 insertions(+), 2 deletions(-) diff --git a/__tests__/arrow.spec.tsx b/__tests__/arrow.spec.tsx index a99f866..4db5593 100644 --- a/__tests__/arrow.spec.tsx +++ b/__tests__/arrow.spec.tsx @@ -12,4 +12,14 @@ describe('', () => { fireEvent.click(getByRole('button')); expect(onClick).toHaveBeenCalled(); }); + + it('should have the correct aria-label when direction is right', () => { + const { getByRole } = render(); + expect(getByRole('button')).toHaveAttribute('aria-label', 'Sağa kaydır'); + }); + + it('should have the correct aria-label when direction is left', () => { + const { getByRole } = render(); + expect(getByRole('button')).toHaveAttribute('aria-label', 'Sola kaydır'); + }); }); diff --git a/__tests__/scrollingCarousel.spec.tsx b/__tests__/scrollingCarousel.spec.tsx index 33a7f09..b341490 100644 --- a/__tests__/scrollingCarousel.spec.tsx +++ b/__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('', () => { expect(container.querySelector('.sliding')).toBeInTheDocument(); }); }); + + it('should remove sliding class when isDown is false', async () => { + const { getByTestId } = render( + } + 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'); + }); + }); }); diff --git a/src/components/arrow/index.tsx b/src/components/arrow/index.tsx index c81ee39..b9a5a84 100644 --- a/src/components/arrow/index.tsx +++ b/src/components/arrow/index.tsx @@ -3,6 +3,7 @@ import styles from '../../styles/styles.module.css'; export const Arrow: FunctionComponent = (props: ArrowProps) => (