fix: improve accessibility and mobile touch handling

Author: AnmiTaliDev

src/components/Header.astro

@@ -23,37 +23,40 @@ const altUrl = getAlternateUrl(path, altLang);
       </div>
     </a>
 
-    <nav id="main-nav">
-      <ul>
+    <nav id="main-nav" aria-label={lang === 'ru' ? 'Основная навигация' : 'Main navigation'}>
+      <ul role="list">
         <li><a href={navHref('#home')}>{t('nav.home')}</a></li>
         <li><a href={navHref('#about')}>{t('nav.about')}</a></li>
         <li><a href={navHref('#features')}>{t('nav.features')}</a></li>
         <li>
           <a
             href={lang === 'ru' ? '/ru/releases' : '/releases'}
             class:list={[{ active: path.includes('/releases') }]}
+            aria-current={path.includes('/releases') ? 'page' : undefined}
           >{t('nav.download')}</a>
         </li>
         <li>
           <a
             href={lang === 'ru' ? '/ru/team' : '/team'}
             class:list={[{ active: path === '/team' || path === '/ru/team' }]}
+            aria-current={path === '/team' || path === '/ru/team' ? 'page' : undefined}
           >{t('nav.team')}</a>
         </li>
         <li><a href={navHref('#community')}>{t('nav.community')}</a></li>
         <li>
           <a
             href={lang === 'ru' ? '/ru/blog' : '/blog'}
             class:list={[{ active: path.includes('/blog') }]}
+            aria-current={path.includes('/blog') ? 'page' : undefined}
           >{t('nav.blog')}</a>
         </li>
       </ul>
     </nav>
 
     <div class="header-actions">
       <div class="lang-toggle">
-        <a href={getAlternateUrl(path, 'en')} class:list={[{ active: lang === 'en' }]}>EN</a>
-        <a href={getAlternateUrl(path, 'ru')} class:list={[{ active: lang === 'ru' }]}>RU</a>
+        <a href={getAlternateUrl(path, 'en')} class:list={[{ active: lang === 'en' }]} aria-current={lang === 'en' ? 'true' : undefined} aria-label="English">EN</a>
+        <a href={getAlternateUrl(path, 'ru')} class:list={[{ active: lang === 'ru' }]} aria-current={lang === 'ru' ? 'true' : undefined} aria-label="Русский">RU</a>
       </div>
       <button class="menu-toggle" id="menu-toggle" aria-label="Menu" aria-expanded="false" aria-controls="main-nav">
         <span></span>

src/components/blog/BlogCard.astro

@@ -31,14 +31,14 @@ const dateStr = publishedAt
       </div>
     )}
     <h2 class="card-title">
-      <a href={`${blogBase}/${slug}`}>{title}</a>
+      <a href={`${blogBase}/${slug}`} aria-label={title}>{title}</a>
     </h2>
     {description && <p class="card-desc">{description}</p>}
   </div>
   <div class="card-footer">
     {author && <span class="author">{author}</span>}
     {dateStr && <time datetime={publishedAt?.toISOString()}>{dateStr}</time>}
-    <a href={`${blogBase}/${slug}`} class="read-more">{t('blog.read')}</a>
+    <a href={`${blogBase}/${slug}`} class="read-more" aria-hidden="true" tabindex="-1">{t('blog.read')}</a>
   </div>
 </article>
 

src/pages/blog/[slug].astro

@@ -18,7 +18,7 @@ const dateStr = post.data.publishedAt
 <BlogLayout title={`${post.data.title} — NurOS Blog`} description={post.data.description}>
   <article class="post-article">
     <div class="container">
-      <a href="/blog" class="back-link">← Back to blog</a>
+      <a href="/blog" class="back-link"><span aria-hidden="true">←</span> Back to blog</a>
 
       {post.data.tags && post.data.tags.length > 0 && (
         <div class="tags">{post.data.tags.map((tag) => <span class="tag">{tag}</span>)}</div>

src/pages/releases.astro

@@ -39,7 +39,8 @@ const t = useTranslations(lang);
                 <div class="arch-card">
                   <span class="arch-name">{arch.name}</span>
                   {arch.link ? (
-                    <a href={arch.link} class="arch-btn arch-btn--get" target="_blank" rel="noopener">
+                    <a href={arch.link} class="arch-btn arch-btn--get" target="_blank" rel="noopener"
+                       aria-label={`${t('download.get')} NurOS ${edition.id === 'juldyz' ? 'Juldyz' : 'Josh'} — ${arch.name}`}>
                       {t('download.get')}
                       <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                     </a>

src/pages/ru/blog/[slug].astro

@@ -18,7 +18,7 @@ const dateStr = post.data.publishedAt
 <BlogLayout title={`${post.data.title} — NurOS Blog`} description={post.data.description}>
   <article class="post-article">
     <div class="container">
-      <a href="/ru/blog" class="back-link">← Назад к блогу</a>
+      <a href="/ru/blog" class="back-link"><span aria-hidden="true">←</span> Назад к блогу</a>
 
       {post.data.tags && post.data.tags.length > 0 && (
         <div class="tags">{post.data.tags.map((tag) => <span class="tag">{tag}</span>)}</div>

src/pages/ru/releases.astro

@@ -39,7 +39,8 @@ const t = useTranslations(lang);
                 <div class="arch-card">
                   <span class="arch-name">{arch.name}</span>
                   {arch.link ? (
-                    <a href={arch.link} class="arch-btn arch-btn--get" target="_blank" rel="noopener">
+                    <a href={arch.link} class="arch-btn arch-btn--get" target="_blank" rel="noopener"
+                       aria-label={`${t('download.get')} NurOS ${edition.id === 'juldyz' ? 'Juldyz' : 'Josh'} — ${arch.name}`}>
                       {t('download.get')}
                       <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                     </a>

src/styles/global.css

@@ -41,6 +41,12 @@ body {
   padding: 0 var(--spacing-md);
 }
 
+a,
+button {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
 a {
   text-decoration: none;
   color: var(--accent-color);