Time range a11y

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>

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;
   }
 `;