Allow keyboard sorting

Author: Brian Ryu

src/.stories/Storybook.scss

@@ -41,9 +41,14 @@
   border-bottom: 1px solid #efefef;
   box-sizing: border-box;
   user-select: none;
+  outline: none;
 
   color: #333;
   font-weight: 400;
+
+  &:focus {
+    border: 2px solid lightsteelblue
+  }
 }
 
 .disabled {
@@ -52,6 +57,15 @@
 }
 
 // Drag handle
+.handleWrapper {
+  width: 18px;
+  height: 18px;
+  outline: none;
+
+  &:focus {
+    outline: 4px solid lightsteelblue
+  }
+}
 .handle {
   display: block;
   width: 18px;

src/.stories/index.js

@@ -26,8 +26,8 @@ function getItems(count, height) {
   });
 }
 
-const Handle = SortableHandle(() => (
-  <div className={style.handle}>
+const Handle = SortableHandle(({tabIndex}) => (
+  <div className={style.handle} tabIndex={tabIndex}>
     <svg viewBox="0 0 50 50">
       <path
         d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 L 0 7.5 z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 L 0 22.5 z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 L 0 37.5 z"
@@ -37,21 +37,34 @@ const Handle = SortableHandle(() => (
   </div>
 ));
 
-const Item = SortableElement((props) => {
+const Item = SortableElement(({
+  tabbable,
+  className,
+  isDisabled,
+  height,
+  style: propStyle,
+  shouldUseDragHandle,
+  value
+}) => {
+  const isTabbable = tabbable && !isDisabled;
+  const bodyTabIndex = isTabbable && !shouldUseDragHandle ? 0 : -1;
+  const handleTabIndex = isTabbable && shouldUseDragHandle ? 0 : -1;
+
   return (
     <div
       className={classNames(
-        props.className,
-        props.isDisabled && style.disabled,
+        className,
+        isDisabled && style.disabled,
       )}
       style={{
-        height: props.height,
-        ...props.style,
+        height,
+        ...propStyle,
       }}
+      tabIndex={bodyTabIndex}
     >
-      {props.shouldUseDragHandle && <Handle />}
+      {shouldUseDragHandle && <Handle tabIndex={handleTabIndex} />}
       <div className={style.wrapper}>
-        <span>Item</span> {props.value}
+        <span>Item</span> {value}
       </div>
     </div>
   );
@@ -66,6 +79,7 @@ const SortableList = SortableContainer(
 
           return (
             <Item
+              tabbable
               key={`item-${value}`}
               disabled={disabled}
               isDisabled={disabled}
@@ -103,11 +117,13 @@ class SortableListWithCustomContainer extends React.Component {
 }
 
 const Category = SortableElement((props) => {
+  const tabIndex = props.tabbable ? 0 : -1;
+
   return (
     <div className={style.category}>
       <div className={style.categoryHeader}>
         <Handle />
-        <span>Category {props.value}</span>
+        <span tabIndex={tabIndex}>Category {props.value}</span>
       </div>
       <ListWrapper
         component={SortableList}
@@ -212,6 +228,7 @@ const SortableReactWindow = (Component) =>
 
         return (
           <Item
+            tabbable
             key={value}
             index={index}
             className={itemClass}
@@ -236,6 +253,7 @@ const SortableVirtualList = SortableContainer(
           const {value, height} = items[index];
           return (
             <Item
+              tabbable
               key={value}
               index={index}
               className={itemClass}
@@ -267,6 +285,7 @@ class VirtualizedListWrapper extends Component {
           const {value, height} = items[index];
           return (
             <Item
+              tabbable
               key={value}
               index={index}
               className={itemClass}
@@ -344,9 +363,13 @@ const SortableInfiniteList = SortableContainer(
         className={className}
         containerHeight={600}
         elementHeight={items.map(({height}) => height)}
+        // for react-infinite, a larger preload is better for keyboard sorting
+        preloadBatchSize={Infinite.containerHeightScaleFactor(2)}
+        preloadAdditionalHeight={Infinite.containerHeightScaleFactor(2)}
       >
         {items.map(({value, height}, index) => (
           <Item
+            tabbable
             key={`item-${index}`}
             className={itemClass}
             index={index}
@@ -365,6 +388,7 @@ const ShrinkingSortableList = SortableContainer(
       <div className={className}>
         {items.map(({value, height}, index) => (
           <Item
+            tabbable
             key={`item-${value}`}
             className={itemClass}
             index={index}
@@ -383,7 +407,7 @@ const NestedSortableList = SortableContainer(
     return (
       <div className={className}>
         {items.map((value, index) => (
-          <Category key={`category-${value}`} index={index} value={value} />
+          <Category tabbable key={`category-${value}`} index={index} value={value} />
         ))}
       </div>
     );