Use semantic landmarks for comments wrapper and compose form#686
Open
lrdj wants to merge 1 commit into
Open
Conversation
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?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Two small semantic-HTML changes to improve screen-reader navigation:
src/client.ts: the wrapper injected around the comments iframe is now<aside aria-label="Comments">instead of<div class="utterances">. Thisexposes the comments widget as a named complementary landmark, so AT users can
jump straight to it from the host page's landmark list.
src/new-comment-component.ts: the compose-form root is now<section aria-label="Write a comment">instead of<article>. An unsent draft isn't aself-contained published composition, so
<article>was semanticallyincorrect —
<section>with a label is the right fit. Existing commentsrendered in
CommentComponentremain<article>, which is correct.Why
Both elements kept the
.utterances/.timeline-commentclasses, so thereis no visual or styling impact and no change to the public embed API. The
benefit is purely for users of assistive technology and for the document
outline.
Refs
AI/ARIA/apg/practices/landmark-regions/#complementary)
<article>element](https://html.spec.whatwg.org/multipage/sections.html#the-article-element) (self-contained composition)
Testing
Verified:
grepconfirms no selector in the project depends on the changed tag names(
div.utterances,article.timeline-comment) — everything uses classselectors, which are unchanged.
script.nextElementSibling as HTMLElement(wasHTMLDivElement), a widening cast that remains valid.Not verified:
current
lmdbnative dependency (pulled in viaparcel@2.3.x) fails to buildagainst modern Node (Node 24), with V8 API errors from an older
nan.Working around this would have required setting up an older Node toolchain
just for this two-line change, which felt disproportionate. Happy to do so on
request, or to validate against CI output if available.