Structural CSS for a keyboard sortable list

keyboard-sortable-example.scss

/* ==== The `drag-handle` control that's visible without keyboard interaction ==== */ 
LI.drag-handle {
  cursor: ns-resize;
  position: relative;

  // Controls for keyboard navigation
  // by default this gets hidden for everything except screen readers
  DIV.keyboard-navigation {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  
  // When the focus is within this block
  // make it visible and overtake the space that `LI.drag-handle` occupies
  DIV.keyboard-navigation:focus-within {
    background: var(--base);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;

    A {
      display: inline-block;
      height: 14px;
      width: 14px;
      box-sizing: border-box;

      IMG {
        display: block;
      }
    }
  }
}

/* ==== Speical styles for first and last items, or single item lists ==== */ 

// Hide the 'up' control on the first item
DIV.list-item:first-child {
  LI.drag-handle {
    DIV.keyboard-navigation {
      A[data-direction='up'] {
        display: none; 
      }
    }
  }
}

// Hide the 'down' control on the last item
DIV.list-item:last-child {
  LI.drag-handle {
    DIV.keyboard-navigation {
      A[data-direction='down'] {
        display: none; 
      }
    }
  }
}

// Hide the whole drag-handle item if there's only one element.
DIV.list-item:only-child {
  LI.drag-handle {
    display: none;
  }
}