From c1ed8326a052732fbf6a59e8f50981f7b75362cc Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Wed, 13 May 2026 00:38:44 +0200
Subject: [PATCH] a11y: render LDP container contents as <ul>, not a 2-column
 <table>

Every row in a folder listing has the same predicate (ldp:contains), so the
markup is a list of resources, not a data table. Screen readers now announce
"list, N items" instead of an opaque table.

- mainTable: <table class="folderPaneMainTable"> -> <ul class="folder-listing">
  with aria-label "Contents of <folder>". Each entry is a <li> wrapping the
  outliner's object cell (passed elementName='div' so it emits a <div>, not
  a stray <td> outside any table context).
- Package branch (container with index.ttl): host element is a <div
  class="folderPanePackageContents"> instead of <table> -- rendering is
  delegated to GotoSubject and no row layout is needed.
- CSS: drop .folderPaneMainTable / td / th / .folderPanePredicateCell rules;
  add .folder-listing / .folder-listing__item rules.
---
 src/folderPane.ts         | 33 +++++++++++++++++++++------------
 src/styles/folderPane.css | 36 ++++++++++++++----------------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/folderPane.ts b/src/folderPane.ts
index 13f8f72..163be5c 100644
--- a/src/folderPane.ts
+++ b/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,
diff --git a/src/styles/folderPane.css b/src/styles/folderPane.css
index d0ef151..46bb01d 100644
--- a/src/styles/folderPane.css
+++ b/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 {