diff --git a/.github/workflows/accessibility.yml b/.github/workflows/test-accessibility.yml similarity index 100% rename from .github/workflows/accessibility.yml rename to .github/workflows/test-accessibility.yml diff --git a/.github/workflows/test-mobile-menu.yml b/.github/workflows/test-mobile-menu.yml new file mode 100644 index 0000000..286fb2f --- /dev/null +++ b/.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 diff --git a/README.fa.md b/README.fa.md index 0ec4a88..a57bfb3 100644 --- a/README.fa.md +++ b/README.fa.md @@ -23,6 +23,7 @@ - **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی. - **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند. - **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است. +- **پشتیبانی از دسترس‌پذیری** - اجزای تعاملی از نشانه‌گذاری معنایی، رفتار سازگار با صفحه‌کلید و بررسی‌های خودکار دسترس‌پذیری استفاده می‌کنند تا رابط کاربری در گردش‌کارهای رایج فناوری‌های کمکی قابل استفاده بماند. ## شروع کنید diff --git a/README.md b/README.md index 2b2f98c..89a1f7d 100644 --- a/README.md +++ b/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 diff --git a/README.zh-cn.md b/README.zh-cn.md index 82be7fa..8691f0e 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -23,6 +23,7 @@ - **全文搜索** - 集成了 Flexsearch 的全文搜索, 无需额外的配置. - **功能齐全** - Markdown, 代码高亮, LaTex 数学公式, diagrams 图表和 Shortcodes 都可以用于丰富你的内容. 目录, 面包屑导航, 分页, 侧边栏等均由 Hextra 自动生成。 - **多语言和 SEO Ready** - Hugo 的多语言模式使得构建多语言网站更简单. 具有 SEO tags, Open Graph, 和 Twitter Cards 等诸多开箱即用的功能. +- **无障碍支持** - 交互组件使用语义化标记、友好的键盘交互以及自动化无障碍检查，以便在常见辅助技术工作流中保持良好的可用性。 ## 快速开始 diff --git a/docs/content/docs/_index.fa.md b/docs/content/docs/_index.fa.md index ce7f5e3..db4f6b1 100644 --- a/docs/content/docs/_index.fa.md +++ b/docs/content/docs/_index.fa.md @@ -20,6 +20,7 @@ Hextra یک پوسته مدرن، سریع و کامل برای [Hugo][hugo] ا - **جستجوی تمام‌متن** - جستجوی تمام‌متن آفلاین داخلی با قدرت FlexSearch، بدون نیاز به پیکربندی اضافی. - **کامل و آماده استفاده** - عناصر Markdown، برجسته‌سازی سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و Shortcodes برای غنی‌تر کردن محتوای شما. فهرست مطالب، مسیرهای ناوبری، صفحه‌بندی، نوار کناری و موارد دیگر همگی به صورت خودکار تولید می‌شوند. - **چندزبانه و آماده برای سئو** - ساخت سایت‌های چندزبانه با حالت چندزبانه Hugo آسان شده است. پشتیبانی پیش‌فرض برای تگ‌های سئو، Open Graph و Twitter Cards وجود دارد. +- **پشتیبانی از دسترس‌پذیری** - اجزای تعاملی از نشانه‌گذاری معنایی، رفتار سازگار با صفحه‌کلید و بررسی‌های خودکار دسترس‌پذیری استفاده می‌کنند تا رابط کاربری در گردش‌کارهای رایج فناوری‌های کمکی قابل استفاده بماند. ## سوال یا بازخورد دارید؟ @@ -38,4 +39,4 @@ Hextra یک پوسته مدرن، سریع و کامل برای [Hugo][hugo] ا [hugo]: https://gohugo.io/ [flex-search]: https://github.com/nextapps-de/flexsearch -[tailwind-css]: https://tailwindcss.com/ \ No newline at end of file +[tailwind-css]: https://tailwindcss.com/ diff --git a/docs/content/docs/_index.ja.md b/docs/content/docs/_index.ja.md index 537eb00..f26a4ee 100644 --- a/docs/content/docs/_index.ja.md +++ b/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 のサポートも標準で提供されています。 +- **アクセシビリティ対応** - インタラクティブなコンポーネントは、意味論的なマークアップ、キーボードで使いやすい挙動、自動アクセシビリティチェックを備えており、一般的な支援技術の利用環境でも使いやすさを保ちます。 ## 質問やフィードバック @@ -37,4 +38,4 @@ Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダ [hugo]: https://gohugo.io/ [flex-search]: https://github.com/nextapps-de/flexsearch -[tailwind-css]: https://tailwindcss.com/ \ No newline at end of file +[tailwind-css]: https://tailwindcss.com/ diff --git a/docs/content/docs/_index.md b/docs/content/docs/_index.md index 2e12fc5..39400fd 100644 --- a/docs/content/docs/_index.md +++ b/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? diff --git a/docs/content/docs/_index.zh-cn.md b/docs/content/docs/_index.zh-cn.md index 213441a..6bbd782 100644 --- a/docs/content/docs/_index.zh-cn.md +++ b/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 支持。 +- **无障碍支持** - 交互组件使用语义化标记、友好的键盘交互以及自动化无障碍检查，以便在常见辅助技术工作流中保持良好的可用性。 ## 问题或建议？ @@ -37,4 +38,4 @@ Hextra 是一个基于 [Tailwind CSS][tailwind-css] 构建的现代化、高性 [hugo]: https://gohugo.io/ [flex-search]: https://github.com/nextapps-de/flexsearch -[tailwind-css]: https://tailwindcss.com/ \ No newline at end of file +[tailwind-css]: https://tailwindcss.com/ diff --git a/package.json b/package.json index eaecf6f..42dd117 100644 --- a/package.json +++ b/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", diff --git a/tests/accessibility.spec.ts b/tests/accessibility.spec.ts index b6dec17..71ba85a 100644 --- a/tests/accessibility.spec.ts +++ b/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(); -}); diff --git a/tests/mobile-menu-focus.spec.ts b/tests/mobile-menu.spec.ts similarity index 54% rename from tests/mobile-menu-focus.spec.ts rename to tests/mobile-menu.spec.ts index 6aa7415..cafe8f3 100644 --- a/tests/mobile-menu-focus.spec.ts +++ b/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(); +});