test(ci): separate mobile menu checks from a11y suite

.github/workflows/test-mobile-menu.yml

@@ -0,0 +1,61 @@
+name: Mobile Menu Tests
+
+on:
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: mobile-menu-${{ github.head_ref || github.ref_name }}
+  cancel-in-progress: true
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  mobile-menu:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.156.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          submodules: recursive
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.26"
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: npm
+
+      - name: Setup Hugo
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Chromium
+        run: npx playwright install chromium
+
+      - name: Build site
+        run: npm run build
+
+      - name: Run mobile menu tests
+        run: npm run test:mobile-menu
+
+      - name: Upload report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: mobile-menu-report
+          path: playwright-report/
+          retention-days: 14

README.fa.md

@@ -23,6 +23,7 @@
 - **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی.
 - **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند.
 - **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است.
+- **پشتیبانی از دسترس‌پذیری** - اجزای تعاملی از نشانه‌گذاری معنایی، رفتار سازگار با صفحه‌کلید و بررسی‌های خودکار دسترس‌پذیری استفاده می‌کنند تا رابط کاربری در گردش‌کارهای رایج فناوری‌های کمکی قابل استفاده بماند.
 
 ## شروع کنید
 

README.md

@@ -23,6 +23,7 @@ Demo → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
 - **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no extra configuration required.
 - **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated.
 - **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
+- **Accessibility Support** - Interactive components use semantic markup, keyboard-friendly behavior, and automated accessibility checks to keep the UI usable across common assistive workflows.
 
 ## Quick Start
 

README.zh-cn.md

@@ -23,6 +23,7 @@
 - **全文搜索** - 集成了 Flexsearch 的全文搜索, 无需额外的配置.
 - **功能齐全** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。
 - **多语言和 SEO Ready** - Hugo 的多语言模式使得构建多语言网站更简单. 具有 SEO tags, Open Graph, 和 Twitter Cards 等诸多开箱即用的功能.
+- **无障碍支持** - 交互组件使用语义化标记、友好的键盘交互以及自动化无障碍检查，以便在常见辅助技术工作流中保持良好的可用性。
 
 ## 快速开始
 

docs/content/docs/_index.fa.md

@@ -20,6 +20,7 @@ Hextra یک پوسته مدرن، سریع و کامل برای [Hugo][hugo] ا
 - **جستجوی تمام‌متن** - جستجوی تمام‌متن آفلاین داخلی با قدرت FlexSearch، بدون نیاز به پیکربندی اضافی.
 - **کامل و آماده استفاده** - عناصر Markdown، برجسته‌سازی سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و Shortcodes برای غنی‌تر کردن محتوای شما. فهرست مطالب، مسیرهای ناوبری، صفحه‌بندی، نوار کناری و موارد دیگر همگی به صورت خودکار تولید می‌شوند.
 - **چندزبانه و آماده برای سئو** - ساخت سایت‌های چندزبانه با حالت چندزبانه Hugo آسان شده است. پشتیبانی پیش‌فرض برای تگ‌های سئو، Open Graph و Twitter Cards وجود دارد.
+- **پشتیبانی از دسترس‌پذیری** - اجزای تعاملی از نشانه‌گذاری معنایی، رفتار سازگار با صفحه‌کلید و بررسی‌های خودکار دسترس‌پذیری استفاده می‌کنند تا رابط کاربری در گردش‌کارهای رایج فناوری‌های کمکی قابل استفاده بماند.
 
 ## سوال یا بازخورد دارید؟
 

docs/content/docs/_index.ja.md

@@ -19,6 +19,7 @@ Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダ
 - **全文検索** - FlexSearch を利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
 - **バッテリーインクルード** - コンテンツを強化するための Markdown、シンタックスハイライト、LaTeX 数式、ダイアグラム、ショートコード要素が利用可能です。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどはすべて自動生成されます。
 - **多言語対応とSEO準備完了** - Hugo の多言語モードを利用して、多言語サイトを簡単に構築できます。SEO タグ、Open Graph、Twitter Cards のサポートも標準で提供されています。
+- **アクセシビリティ対応** - インタラクティブなコンポーネントは、意味論的なマークアップ、キーボードで使いやすい挙動、自動アクセシビリティチェックを備えており、一般的な支援技術の利用環境でも使いやすさを保ちます。
 
 ## 質問やフィードバック
 

docs/content/docs/_index.md

@@ -20,6 +20,7 @@ Designed for building beautiful websites for documentation, blogs, and websites,
 - **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no additional configuration required.
 - **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated.
 - **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
+- **Accessibility Support** - Interactive components use semantic markup, keyboard-friendly behavior, and automated accessibility checks to keep the UI usable across common assistive workflows.
 
 ## Questions or Feedback?
 

docs/content/docs/_index.zh-cn.md

@@ -19,6 +19,7 @@ Hextra 是一个基于 [Tailwind CSS][tailwind-css] 构建的现代化、高性
 - **全文搜索** - 内置基于 FlexSearch 的离线全文搜索功能，零配置开箱即用。
 - **功能完备** - 支持 Markdown 语法高亮、LaTeX 数学公式、图表和 Shortcodes 等丰富内容元素。自动生成目录导航、面包屑、分页及侧边栏等组件。
 - **多语言与 SEO 友好** - 通过 Hugo 多语言模式轻松构建国际化站点，原生集成 SEO 标签、Open Graph 和 Twitter Cards 支持。
+- **无障碍支持** - 交互组件使用语义化标记、友好的键盘交互以及自动化无障碍检查，以便在常见辅助技术工作流中保持良好的可用性。
 
 ## 问题或建议？
 

package.json

@@ -5,7 +5,8 @@
     "build:css": "npx postcss --config postcss.config.mjs --env production assets/css/styles.css -o assets/css/compiled/main.css",
     "build": "hugo --gc --minify --themesDir=../.. --source=docs",
     "test": "npx playwright test",
-    "test:a11y": "npx playwright test tests/accessibility.spec.ts"
+    "test:a11y": "npx playwright test tests/accessibility.spec.ts",
+    "test:mobile-menu": "npx playwright test tests/mobile-menu.spec.ts"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",

tests/accessibility.spec.ts

@@ -90,15 +90,3 @@ test("all English pages pass axe-core WCAG AA", async ({ page, baseURL }) => {
     `Accessibility violations found:\n\n${failures.join("\n\n")}`,
   ).toHaveLength(0);
 });
-
-test("mobile sidebar exposes main menu dropdown children", async ({ page }) => {
-  await page.setViewportSize({ width: 390, height: 844 });
-  await page.goto("/", { waitUntil: "load" });
-
-  await page.getByRole("button", { name: "Menu" }).click();
-
-  const sidebar = page.locator("aside.hextra-sidebar-container");
-  await expect(sidebar.getByRole("link", { name: "Development ↗" })).toBeVisible();
-  await expect(sidebar.getByRole("link", { name: "v0.10 ↗" })).toBeVisible();
-  await expect(sidebar.getByRole("link", { name: "v0.11 ↗" })).toBeVisible();
-});

tests/mobile-menu.spec.ts

@@ -19,3 +19,15 @@ test("clicking mobile hamburger does not focus the sidebar search input", async
   await expect(menuButton).toHaveAttribute("aria-expanded", "true");
   await expect(sidebarSearchInput).not.toBeFocused();
 });
+
+test("mobile sidebar exposes main menu dropdown children", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto("/", { waitUntil: "load" });
+
+  await page.getByRole("button", { name: "Menu" }).click();
+
+  const sidebar = page.locator("aside.hextra-sidebar-container");
+  await expect(sidebar.getByRole("link", { name: "Development ↗" })).toBeVisible();
+  await expect(sidebar.getByRole("link", { name: "v0.10 ↗" })).toBeVisible();
+  await expect(sidebar.getByRole("link", { name: "v0.11 ↗" })).toBeVisible();
+});