Skip to content

a11y: replace table-as-layout markup with semantic elements#640

Open
m5x5 wants to merge 1 commit into
SolidOS:post-milestone3mfrom
m5x5:a11y/semantic-markup
Open

a11y: replace table-as-layout markup with semantic elements#640
m5x5 wants to merge 1 commit into
SolidOS:post-milestone3mfrom
m5x5:a11y/semantic-markup

Conversation

@m5x5
Copy link
Copy Markdown

@m5x5 m5x5 commented May 12, 2026

Summary

  • The outline and data-content panes built predicate/value lists, rdf:List members, and per-subject blocks as <table>/<tr>/<td>. Screen readers announced them as data tables with rows and columns, which they aren't.
  • appendPropertyTRs now emits <dl class="property-list"> with one <dt> per predicate and one <dd> per value, replacing <tr>s with rowspan tricks for repeated subjects.
  • outlineObjectTD / outlinePredicateTD take an optional elementName argument so callers in non-table contexts (folder-pane list items, property-list <dd>s) get a <div> instead of a stray <td>.
  • The object-cell expand affordance becomes a native <details>/<summary> with a lazy toggle listener — drops the custom expand-icon image and the click wiring around it.
  • rdf:List rendering (Collection branch) switches from <table class="collectionAsTables"> to <ol class="rdf-collection"> with the browser's native marker numbering.
  • dataContentPane per-subject blocks become <section>s with a <dl class="property-list">; nested bnodes get a .nestedBnode class instead of being rendered as nested striped tables.
  • Fix Graph branch crash: paneRegistry.byName('dataContentPane') is not a registered name — use 'dataContents' and fall back to a text node if lookup still fails.
  • Surface swallowed errors: catch sites in manager.js and userInput.js now console.error(e) in addition to rendering the exception pane, so DevTools shows the stack trace.

Addresses SolidOS/profile-pane#310.

Coordinated PRs

The outline + data-content panes used <table>/<tr>/<td> structures for
content that wasn't tabular -- predicate/value lists, rdf:List members,
and per-subject blocks. Screen readers announced them as data tables
with rows and columns, which they weren't.

- appendPropertyTRs (manager.js) now emits <dl class="property-list">
  with one <dt> per predicate and one <dd> per value, instead of <tr>s
  with rowspan tricks for repeated subjects.
- outlineObjectTD / outlinePredicateTD take an optional elementName
  argument so callers in non-table contexts (folder-pane list items,
  property-list <dd>s) get a plain <div> instead of a stray <td>.
- The object-cell expand affordance is now a native <details>/<summary>
  with a lazy 'toggle' listener -- removes a custom expand-icon image
  and the associated event wiring.
- rdf:List rendering (Collection branch) switches from
  <table class="collectionAsTables"> to <ol class="rdf-collection">
  with browser-native marker numbering.
- dataContentPane's per-subject blocks become <section>s with a
  <dl class="property-list">; nested bnodes get a .nestedBnode class
  instead of being rendered as nested striped tables.
- Fix Graph branch crash: paneRegistry.byName('dataContentPane') is
  not a registered name -- use 'dataContents' and fall back to a plain
  text node if the lookup still fails.
- Surface swallowed errors: catch sites in manager.js and userInput.js
  now console.error(e) in addition to rendering the exception pane,
  so DevTools shows the stack trace.
- manager.css: drop margin/border/padding hacks that were applied to
  <td>s and are no-ops on <div>/<dd>; add .property-list grid layout
  and .rdf-collection / .data-content / .obj-disclosure rules.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant