From f03e95dc5c96b9ac5c9d694036b95eb7f8540bef Mon Sep 17 00:00:00 2001
From: lrdj <dug@humansystems.io>
Date: Thu, 28 May 2026 23:05:14 +0100
Subject: [PATCH] use semantic landmarks for the comments widget and compose
 form

client.ts:
wrap injected iframe in <aside aria-label="Comments"> instead of <div>, so AT users get a named complementary landmark to jump to.
new-comment-component.ts:
change compose-form root from <article> to <section aria-label="Write a comment">. Not sure unsent comment is a self-contained composition, so <article> was the wrong element?
---
 src/client.ts                | 6 +++---
 src/new-comment-component.ts | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/client.ts b/src/client.ts
index fe78e553..b52bf8b3 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -76,10 +76,10 @@ const utterancesOrigin = script.src.match(/^https:\/\/utteranc\.es|http:\/\/loca
 const frameUrl = `${utterancesOrigin}/utterances.html`;
 script.insertAdjacentHTML(
   'afterend',
-  `<div class="utterances">
+  `<aside class="utterances" aria-label="Comments">
     <iframe class="utterances-frame" title="Comments" scrolling="no" src="${frameUrl}?${new URLSearchParams(attrs)}" loading="lazy"></iframe>
-  </div>`);
-const container = script.nextElementSibling as HTMLDivElement;
+  </aside>`);
+const container = script.nextElementSibling as HTMLElement;
 script.parentElement!.removeChild(script);
 
 // adjust the iframe's height when the height of it's content changes
diff --git a/src/new-comment-component.ts b/src/new-comment-component.ts
index daae9130..a010d4fc 100644
--- a/src/new-comment-component.ts
+++ b/src/new-comment-component.ts
@@ -30,7 +30,8 @@ export class NewCommentComponent {
     private user: User | null,
     private readonly submit: (markdown: string) => Promise<void>
   ) {
-    this.element = document.createElement('article');
+    this.element = document.createElement('section');
+    this.element.setAttribute('aria-label', 'Write a comment');
     this.element.classList.add('timeline-comment');
 
     this.element.innerHTML = `