a11y: render LDP container contents as <ul>, not a 2-column <table>

src/folderPane.ts

@@ -61,18 +61,21 @@ export default {
       objs = objs.map(obj => [UI.utils.label(obj).toLowerCase(), obj])
       objs.sort() // Sort by label case-insensitive
       objs = objs.map(pair => pair[1])
+      // mainTable is a <ul class="folder-listing"> — every entry has the same
+      // predicate (ldp:contains), so the listing is a list of resources, not
+      // a 2-column data table. syncTableToArray works on any parent's
+      // children, so it manages <li>s identically to <tr>s.
       UI.utils.syncTableToArray(mainTable, objs, function (obj) {
         const st = kb.statementsMatching(subject, UI.ns.ldp('contains'), obj)[0]
         const defaultpropview = outliner.VIEWAS_boring_default
-        const tr = outliner.propertyTR(dom, st, false)
-        const predicateCell = tr.firstChild as HTMLElement
-        predicateCell.textContent = '' // Was initialized to 'Contains'
-        predicateCell.classList.add('folderPanePredicateCell')
-        tr.appendChild(
-          outliner.outlineObjectTD(obj, defaultpropview, undefined, st)
+        const li = dom.createElement('li')
+        li.classList.add('folder-listing__item')
+        ;(li as any).AJAR_statement = st
+        const cell = outliner.outlineObjectTD(
+          obj, defaultpropview, undefined, st, 'div'
         )
-        // UI.widgets.makeDraggable(tr, obj)
-        return tr
+        li.appendChild(cell)
+        return li
       })
     }
 
@@ -92,16 +95,22 @@ export default {
       const packageDiv = div.appendChild(dom.createElement('div'))
       packageDiv.classList.add('folderPanePackageDiv')
       kb.fetcher.load(indexThing.doc()).then(function () {
-        mainTable = packageDiv.appendChild(dom.createElement('table'))
-        mainTable.classList.add('folderPaneMainTable')
+        // The "package" branch — when the container holds an index.ttl, we
+        // delegate rendering to GotoSubject and just need a host element.
+        // A <div> works fine here since we're not laying out rows ourselves.
+        mainTable = packageDiv.appendChild(dom.createElement('div'))
+        mainTable.classList.add('folderPanePackageContents')
         context
           .getOutliner(dom)
           .GotoSubject(indexThing, true, undefined, false, undefined, mainTable)
       })
       return div
     } else {
-      mainTable = div.appendChild(dom.createElement('table'))
-      mainTable.classList.add('folderPaneMainTable')
+      // Listing of LDP contents — every row has the same predicate, so this
+      // is a list of resources, not a 2-column table. Render as <ul>.
+      mainTable = div.appendChild(dom.createElement('ul'))
+      mainTable.classList.add('folder-listing')
+      mainTable.setAttribute('aria-label', 'Contents of ' + (UI.utils.label(subject) || 'folder'))
       mainTable.refresh = refresh
       refresh()
       // addDownstreamChangeListener is a high level function which when someone else changes the resource,

src/styles/folderPane.css

@@ -27,39 +27,31 @@
   overflow-x: auto;
 }
 
-.folderPaneMainTable {
-  display: table;
+/* LDP container listing — a list of resources, not a data table.
+   Every entry has the same predicate (ldp:contains), so a 2-column table
+   was always wrong here. <ul>/<li> is announced as "list, N items" by AT. */
+.folder-listing {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--spacing-lg, 1.5625rem) 0;
   width: 100%;
   max-width: none;
-  table-layout: auto;
   text-align: left;
-  margin-left: 0;
-  margin-right: auto;
-  margin-bottom: var(--spacing-lg, 1.5625rem);
 }
 
-.folderPaneMainTable td,
-.folderPaneMainTable th {
-  text-align: left;
-  vertical-align: top;
+.folder-listing__item {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
-/* manager.js sets inline padding:0 on object cells; use an important override here */
-.folderPaneMainTable > tr > td.obj,
-.folderPaneMainTable > tbody > tr > td.obj {
-  padding-left: var(--spacing-lg, 1.5625rem) !important;
+.folder-listing__item > .obj {
+  padding-left: var(--spacing-lg, 1.5625rem);
 }
 
-.folderPanePredicateCell {
-  width: 0;
-  min-width: 0;
-  max-width: 0;
-  padding: 0 !important;
-  margin: 0 !important;
-  border: 0 !important;
-  overflow: hidden;
+/* Package branch falls back to GotoSubject rendering inside this host. */
+.folderPanePackageContents {
+  display: block;
+  width: 100%;
 }
 
 .folderPaneCreationDiv {