From efa3a876d1270887956db5deca8ee26f58fb7cff Mon Sep 17 00:00:00 2001 From: Sebas <36385457+ZEBAS204@users.noreply.github.com> Date: Tue, 28 Mar 2023 19:06:17 -0300 Subject: [PATCH] Hide time controls arrow buttons to screen readers --- src/__tests__/components/timer/TimePicker.test.jsx | 6 +++++- src/components/timer/TimePicker.jsx | 9 ++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/__tests__/components/timer/TimePicker.test.jsx b/src/__tests__/components/timer/TimePicker.test.jsx index c811821..6f4de82 100644 --- a/src/__tests__/components/timer/TimePicker.test.jsx +++ b/src/__tests__/components/timer/TimePicker.test.jsx @@ -57,7 +57,11 @@ describe('Time Picker', () => { ) }) - const button = screen.getAllByRole('button') + const button = screen.getAllByRole('button', { + // This buttion has aria-hidden to prevent being accessible to screen readers + // it's not hidden but needs this property to be pick by the role selector + hidden: true, + }) // First button increases time fireEvent.click(button[0]) diff --git a/src/components/timer/TimePicker.jsx b/src/components/timer/TimePicker.jsx index 82ec882..905c0cc 100644 --- a/src/components/timer/TimePicker.jsx +++ b/src/components/timer/TimePicker.jsx @@ -20,7 +20,14 @@ const Heading = (props) => ( ) const ArrowButton = ({ asIcon, onClick }) => ( - )