Hide time controls arrow buttons to screen readers

ZEBAS204 · Mar 28, 2023 · efa3a87 · efa3a87 · vercel · Mar 28, 2023
1 parent a4b6e4d
commit efa3a87
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -20,7 +20,14 @@ const Heading = (props) => (
 )
 
 const ArrowButton = ({ asIcon, onClick }) => (
-	<Button variant="ghost" size="xs" w="90%" onClick={onClick} tabIndex="-1">
+	<Button
+		variant="ghost"
+		size="xs"
+		w="90%"
+		onClick={onClick}
+		tabIndex="-1"
+		aria-hidden
+	>
 		<Icon as={asIcon} w={6} h={6} />
 	</Button>
 )