Accommodate grouping example

Author: Brian Ryu

src/.stories/grouping-items/Item/Item.js

@@ -16,6 +16,7 @@ function Item(props) {
         dragging && styles.dragging,
       )}
       onClick={() => onClick(value)}
+      tabIndex={0}
     >
       Item {value}
       {shouldRenderItemCountBadge ? <Badge count={selectedItemsCount} /> : null}

src/.stories/grouping-items/Item/Item.scss

@@ -28,6 +28,7 @@ $badgeBorderColor: #da4553;
   border-top: $borderWidth solid #efefef;
   box-sizing: border-box;
   user-select: none;
+  outline: none;
 
   color: $color;
   font-weight: $fontWeight-regular;
@@ -52,6 +53,10 @@ $badgeBorderColor: #da4553;
     border: $borderWidth solid #efefef;
     box-shadow: $boxShadow;
   }
+
+  &:focus {
+    border: 2px solid lightsteelblue
+  }
 }
 
 .Badge {

src/SortableContainer/index.js

@@ -774,9 +774,8 @@ export default function sortableContainer(
       const isValidSortingTarget = useDragHandle ? isSortableHandle(target) : target.sortableInfo;
 
       if (
-        shouldCancelStart(event) ||
         (this.manager.active && !this.manager.active.isKeySorting) ||
-        (!this.manager.active && (keyCode !== KEYCODE.SPACE || !isValidSortingTarget))
+        (!this.manager.active && (keyCode !== KEYCODE.SPACE || shouldCancelStart(event) || !isValidSortingTarget))
       ) {
         return;
       }