fix(droppable): add focus style for droppable when tabbed into (focused)

- Add focus outline for droppable when tabbed into (focused)

Author: Brian Ochan

packages/core/src/Droppable/__snapshots__/index.test.tsx.snap

@@ -71,6 +71,11 @@ exports[`Droppable Droppable 1`] = `
   cursor: pointer;
 }
 
+.c2:focus {
+  border: 1px solid rgb(69,39,160);
+  outline: none;
+}
+
 .c5 {
   display: none;
 }
@@ -265,6 +270,11 @@ exports[`Droppable Droppable 2`] = `
   cursor: pointer;
 }
 
+.c2:focus {
+  border: 1px solid rgb(69,39,160);
+  outline: none;
+}
+
 .c5 {
   display: none;
 }

packages/core/src/Droppable/index.tsx

@@ -36,6 +36,10 @@ const DroppableArea = styled.div<{ readonly isDragging: boolean }>`
   text-align: center;
   padding: ${spacing.large} ${spacing.extraLarge};
   cursor: pointer;
+  &:focus {
+    border: 1px solid ${({ theme }) => theme.color.textPrimary()};
+    outline: none;
+  }
 `
 
 const DroppableInputFile = styled.input`