Calendar field a11y

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]);

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;

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