Allow keyboard-accessible sorting

Author: Brian Ryu

src/.stories/index.js

@@ -30,6 +30,8 @@ function getItems(count, height) {
 const Handle = SortableHandle(() => <div className={style.handle} />);
 
 const Item = SortableElement((props) => {
+  const tabIndex = props.tabbable ? 0 : -1;
+
   return (
     <div
       className={props.className}
@@ -39,7 +41,7 @@ const Item = SortableElement((props) => {
       }}
     >
       {props.shouldUseDragHandle && <Handle />}
-      <div className={style.wrapper}>
+      <div className={style.wrapper} tabIndex={tabIndex}>
         <span>Item</span> {props.value}
       </div>
     </div>
@@ -52,6 +54,7 @@ const SortableList = SortableContainer(
       <div className={className}>
         {items.map(({value, height}, index) => (
           <Item
+            tabbable
             key={`item-${value}`}
             className={itemClass}
             index={index}
@@ -86,11 +89,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}
@@ -178,6 +183,7 @@ const SortableVirtualList = SortableContainer(
           const {value, height} = items[index];
           return (
             <Item
+              tabbable
               key={value}
               index={index}
               className={itemClass}
@@ -209,6 +215,7 @@ class VirtualizedListWrapper extends Component {
           const {value, height} = items[index];
           return (
             <Item
+              tabbable
               key={value}
               index={index}
               className={itemClass}
@@ -289,6 +296,7 @@ const SortableInfiniteList = SortableContainer(
       >
         {items.map(({value, height}, index) => (
           <Item
+            tabbable
             key={`item-${index}`}
             className={itemClass}
             index={index}
@@ -307,6 +315,7 @@ const ShrinkingSortableList = SortableContainer(
       <div className={className}>
         {items.map(({value, height}, index) => (
           <Item
+            tabbable
             key={`item-${value}`}
             className={itemClass}
             index={index}
@@ -325,7 +334,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>
     );

src/Manager.js

@@ -28,6 +28,13 @@ export default class Manager {
     );
   }
 
+  getActiveKeyLift() {
+    return this.refs[this.activeKeyLift.collection].find(
+      // eslint-disable-next-line eqeqeq
+      ({node}) => node.sortableInfo.index == this.activeKeyLift.index,
+    );
+  }
+
   getIndex(collection, ref) {
     return this.refs[collection].indexOf(ref);
   }