Add some semantic tags 💡.

src/components/ColumnListHeader.js

@@ -8,7 +8,7 @@ const ColumnListHeader = ({ className, children, ...props }) => {
         className,
       )}
       {...props}>
-      {children}
+      <h2>{children}</h2>
     </li>
   );
 };

src/components/ColumnListItem.js

@@ -14,7 +14,7 @@ const ColumnListItem = ({ path, selected, className, children, ...props }) => {
   ) : (
     <li
       className={clsx(
-        'bg-slate-700 py-1 text-slate-200 hover:bg-slate-600 hover:text-slate-100',
+        'py-1 hover:bg-slate-600 hover:text-slate-100',
         className,
       )}
       {...props}>

src/components/PrimaryColumn.js

@@ -1,7 +1,7 @@
 const PrimaryColumn = ({ children }) => (
-  <ol className="shrink-0 overflow-y-auto bg-slate-700 text-xs md:text-sm">
-    {children}
-  </ol>
+  <nav className="shrink-0 overflow-y-auto text-nowrap bg-slate-700 text-xs text-slate-200 md:text-sm">
+    <ol>{children}</ol>
+  </nav>
 );
 
 export default PrimaryColumn;

src/components/SecondaryColumn.js

@@ -1,7 +1,7 @@
 const SecondaryColumn = ({ children }) => (
-  <ol className="shrink-0 overflow-y-auto bg-slate-200 text-xs md:text-sm">
-    {children}
-  </ol>
+  <nav className="shrink-0 overflow-y-auto text-nowrap bg-slate-200 text-xs md:text-sm">
+    <ol>{children}</ol>
+  </nav>
 );
 
 export default SecondaryColumn;