fix(a11y): reconcile responsive layouts and multilingual UI

www/src/components/LikeViewCounter.astro

@@ -1,11 +1,14 @@
 ---
-const { slug } = Astro.props;
+import { articleMessages } from '../utils/article-messages';
+interface Props { slug: string; lang: string }
+const { slug, lang } = Astro.props;
+const text = articleMessages(lang);
 ---
 <div class="like-view-counter" data-counter>
-  <span aria-label="Article views"><span class="view-count" data-views>0</span> views</span>
-  <span class="like-group">
-    <span class="like-count" data-likes>—</span>
-    <button class="like-button" type="button" data-like data-slug={slug} aria-label="Like this article" aria-pressed="false">
+  <span aria-label={text.articleViews}><span class="view-count" data-views dir={lang === 'ar' ? 'ltr' : undefined}>0</span> {text.views}</span>
+  <span class="like-group" role={lang === 'ar' ? 'group' : undefined} aria-label={lang === 'ar' ? text.likes : undefined}>
+    <span class="like-count" data-likes dir={lang === 'ar' ? 'ltr' : undefined}>—</span>
+    <button class="like-button" type="button" data-like data-slug={slug} aria-label={text.like} aria-pressed="false">
       <svg aria-hidden="true" viewBox="0 0 12 10" width="20" height="20" focusable="false" class="like-icon">
         <path d="m1 4.4c-1-4 2.5-5 4.5-2.5l.5 .6l.5-.6c2-2.5 6-1.5 4.5 2.5q-1 3-5 5q-4-2-5-5z"></path>
       </svg>