fix: improve accessibility and remove unnecessary attributes

Enhanced accessibility by wrapping time display in a semantic `<time>` element, ensuring better screen reader support. Removed inline styles and onclick attributes from elements, simplifying the code and improving performance.
ccbikai · Sep 21, 2024 · ff418d8 · ff418d8
1 parent dac74bc
commit ff418d8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/item.astro b/src/components/item.astro
@@ -20,7 +20,9 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) ? datetime.format('H
   <div class="time-box">
     <div class="dot"></div>
     <div class="time">
-      <a href={`${SITE_URL}posts/${post.id}`} title={post.datetime} class="item-link">{timeago}</a>
+      <a href={`${SITE_URL}posts/${post.id}`} title={post.datetime} class="item-link">
+        <time datetime={post.datetime} title={timeago}>{timeago}</time>
+      </a>
     </div>
   </div>
   {post.content.length > 0 && <div class={`text-box content`} set:html={post.content} />}

diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js
@@ -100,9 +100,9 @@ function getReply($, item, { channel }) {
 }
 
 function modifyHTMLContent($, content, { index } = {}) {
-  $(content).find('.emoji')?.attr('style', '')
+  $(content).find('.emoji')?.removeAttr('style')
   $(content).find('a')?.each((_index, a) => {
-    $(a)?.attr('title', $(a)?.text())?.attr('onclick', '')
+    $(a)?.attr('title', $(a)?.text())?.removeAttr('onclick')
   })
   $(content).find('tg-spoiler')?.each((_index, spoiler) => {
     const id = `spoiler-${index}-${_index}`