Changeset d18c60e in Klonkt for src/views

Timestamp:

07/01/2026 06:55:46 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

0688b5f

Parents:

43273c9

Message:

feat(fediverse): alt text for images (accessibility → AS2 attachment name)

Media federated to the fediverse now carries a description (AS2 name on the
attachment), which Mastodon shows and screen readers read. The cover gets an alt
field in the editor; inline images keep their own <img alt="…">. Also used as the
cover's on-site alt.

• src/config/database.js — posts.cover_alt column.
• src/services/ActivityPubService.js — buildNote carries alt per media URL (cover_alt + inline <img alt>) and emits it as the attachment name (and on the image fallback).
• src/routes/posts.js — capture/store cover_alt on create/save and pass it to the federation hooks.
• src/services/Scheduler.js — carry cover_alt when a scheduled post goes live.
• src/views/pages/post-edit.ejs — "Alt text (description)" field under the cover URL.
• src/views/pages/post.ejs — the on-page cover <img> uses cover_alt.
• src/services/i18n.js — pedit.f_cover_alt + pedit.cover_alt_placeholder (nl/en/de).
• test/media-alt.test.js — cover alt, inline alt, and no-alt = no name.
• CHANGELOG(.nl/.de).md — "Alt text for images" under Unreleased.

Co-Authored-By: Claude <noreply@…>

Location:

src/views/pages

Files:

• post-edit.ejs (modified) (1 diff)
• post.ejs (modified) (1 diff)

src/views/pages/post-edit.ejs

@@ -105 +105 @@
                    inputmode="url" autocapitalize="none" spellcheck="false"
                    placeholder="<%= t('pedit.cover_url_placeholder') %>">
+          </label>
+          <label class="pe-field">
+            <span><%= t('pedit.f_cover_alt') %></span>
+            <input type="text" name="cover_alt" id="cover-alt-field" maxlength="1500"
+                   value="<%= post.cover_alt || '' %>"
+                   placeholder="<%= t('pedit.cover_alt_placeholder') %>">
           </label>
           <%# Muted loop MP4 for an animated cover (auto-made from an animated WebP). Hidden — set by the uploader. %>

src/views/pages/post.ejs

@@ -20 +20 @@
   <% if (post.cover_image_url) { %>
     <figure class="post-cover">
-      <img src="<%= post.cover_image_url %>" alt=""<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
+      <img src="<%= post.cover_image_url %>" alt="<%= post.cover_alt || '' %>"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
     </figure>
   <% } %>