From f502ea79ed263a88775f6be620e629d6801cfea9 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 03:39:59 +1000
Subject: [PATCH] Calendar field a11y

---
 .../components/CalendarField/CalendarField.tsx  | 12 +++++++++++-
 .../CalendarField/calendarFieldStyle.ts         | 16 +++++++++++-----
 .../components/ToggleField/toggleFieldStyle.ts  | 17 +++++++++++++----
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 96c7eb4..2ce8897 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -168,7 +168,17 @@ const CalendarField = ({
     							selected={selectedDates.includes(date.format('DDMMYYYY'))}
     							selecting={selectingDates.includes(date)}
     							mode={mode}
-    							onPointerDown={(e) => {
+                  type="button"
+                  onKeyPress={e => {
+                    if (e.key === ' ' || e.key === 'Enter') {
+                      if (selectedDates.includes(date.format('DDMMYYYY'))) {
+                        setSelectedDates(selectedDates.filter(d => d !== date.format('DDMMYYYY')));
+                      } else {
+                        setSelectedDates([...selectedDates, date.format('DDMMYYYY')]);
+                      }
+                    }
+                  }}
+    							onPointerDown={e => {
     								startPos.current = {x, y};
     								setMode(selectedDates.includes(date.format('DDMMYYYY')) ? 'remove' : 'add');
     								setSelectingDates([date]);
diff --git a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
index b664e32..e351b19 100644
--- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
+++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
@@ -51,21 +51,27 @@ export const CalendarBody = styled.div`
 	grid-template-columns: repeat(7, 1fr);
 	grid-gap: 2px;
 
-	& div:first-of-type {
+	& button:first-of-type {
 		border-top-left-radius: 3px;
 	}
-	& div:nth-of-type(7) {
+	& button:nth-of-type(7) {
 		border-top-right-radius: 3px;
 	}
-	& div:nth-last-of-type(7) {
+	& button:nth-last-of-type(7) {
 		border-bottom-left-radius: 3px;
 	}
-	& div:last-of-type {
+	& button:last-of-type {
 		border-bottom-right-radius: 3px;
 	}
 `;
 
-export const Date = styled.div`
+export const Date = styled.button`
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  appearance: none;
+
 	background-color: ${props => props.theme.primaryBackground};
 	border: 1px solid ${props => props.theme.primaryLight};
 	display: flex;
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
index e5301f0..2ef21c4 100644
--- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -9,10 +9,16 @@ export const ToggleContainer = styled.div`
   border: 1px solid ${props => props.theme.primary};
   border-radius: 3px;
   overflow: hidden;
-  
-  &:focus-within {
-    outline: Highlight auto 1px;
-    outline: -webkit-focus-ring-color auto 1px;
+
+  &:focus-within label {
+    box-shadow: inset 0 -3px 0 0 var(--focus-color);
+  }
+
+  & > div:first-child label {
+    border-end-start-radius: 2px;
+  }
+  & > div:last-child label {
+    border-end-end-radius: 2px;
   }
 `;
 
@@ -36,6 +42,7 @@ export const HiddenInput = styled.input`
   &:checked + label {
     color: ${props => props.theme.background};
     background-color: ${props => props.theme.primary};
+    --focus-color: ${props => props.theme.primaryDark};
   }
 `;
 
@@ -49,4 +56,6 @@ export const LabelButton = styled.label`
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
+  transition: box-shadow .15s;
+  --focus-color: ${props => props.theme.primary};
 `;