From 67247dc032600af4149dda68cd4dae9cfb885a8a Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 03:50:01 +1000
Subject: [PATCH] Time range a11y

---
 .../TimeRangeField/TimeRangeField.tsx         | 22 +++++++++++++++++++
 .../ToggleField/toggleFieldStyle.ts           |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
index 7a6544f..8493e73 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -90,6 +90,17 @@ const TimeRangeField = ({
 						step = Math.abs(step);
 						setStart(step);
 					}}
+          tabIndex="0"
+          onKeyDown={e => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+              e.preventDefault();
+              setStart(Math.max(start-1, 0));
+            }
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+              e.preventDefault();
+              setStart(Math.min(start+1, 24));
+            }
+          }}
 				/>
 				<Handle
 					value={end}
@@ -113,6 +124,17 @@ const TimeRangeField = ({
 						step = Math.abs(step);
 						setEnd(step);
 					}}
+          tabIndex="0"
+          onKeyDown={e => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+              e.preventDefault();
+              setEnd(Math.max(end-1, 0));
+            }
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+              e.preventDefault();
+              setEnd(Math.min(end+1, 24));
+            }
+          }}
 				/>
 			</Range>
 		</Wrapper>
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
index 2ef21c4..7b2e9d8 100644
--- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -14,10 +14,10 @@ export const ToggleContainer = styled.div`
     box-shadow: inset 0 -3px 0 0 var(--focus-color);
   }
 
-  & > div:first-child label {
+  & > div:first-of-type label {
     border-end-start-radius: 2px;
   }
-  & > div:last-child label {
+  & > div:last-of-type label {
     border-end-end-radius: 2px;
   }
 `;