Commit Graph

14 Commits

Author SHA1 Message Date
Xin
88aa6098f0 refactor(a11y): comprehensive WCAG 2.2 AA accessibility improvements (#924)
* refactor(a11y): comprehensive WCAG 2.2 AA accessibility improvements

Add skip-to-content link, landmark regions, ARIA attributes, keyboard
navigation, focus styles, reduced-motion support, and i18n keys across
all layouts, partials, shortcodes, and JS components.

- Add skip nav link in baseof.html and id="content" on all <main> tags
- Fix 404 page lang/dir attributes and add <main> landmark
- Add aria-label to banner close, PDF iframe, search input/results
- Remove aria-hidden from back-to-top button
- Add aria-hidden to decorative external link icon
- Add role="tablist" to tabs, aria-expanded to filetree/dropdowns
- Wrap mermaid diagrams in role="img", asciinema in role="region"
- Change theme toggle <p> items to <button role="menuitem"> with
  full keyboard navigation (Arrow/Home/End/Escape)
- Add arrow-key keyboard navigation to tabs component
- Separate sidebar collapsible button from link for independent
  keyboard access with aria-expanded sync
- Sync aria-expanded on all dropdown toggles (theme, lang, navbar,
  hamburger, page context menu)
- Add aria-live search status announcements
- Add 13 new i18n keys, replace hardcoded aria-label strings
- Add prefers-reduced-motion CSS override and focus-visible base styles
- Add aria-label swap on code copy ("Copied!" feedback for AT)
- Add aria-current to active TOC links
- Wrap filetree in <ul> container for proper list semantics
- Add unique aria-label to blog "Read more" links
- Document accessibility guidelines in AGENTS.md

* feat(a11y): enhance focus styles and accessibility for various components

- Add focus-visible styles to badges, buttons, and links for improved keyboard navigation.
- Update breadcrumb, sidebar, and TOC components to include focus-visible outlines.
- Introduce new classes for focus states in the badge and tabs shortcodes.
- Ensure consistent focus styles across all interactive elements to meet WCAG 2.2 AA standards.

* feat(a11y): implement new focus-visible utilities and enhance accessibility styles

- Introduce new utility classes for focus-visible states to improve keyboard navigation.
- Update various components including badges, buttons, and search inputs to utilize new focus-visible styles.
- Refactor existing focus styles to ensure consistency and compliance with accessibility standards.
- Enhance breadcrumb, sidebar, and TOC components with updated focus-visible classes for better user experience.

* chore: add .gitattributes to collapse generated files in PR diffs

* fix: enhance accessibility and improve documentation

- Added alt attributes to images in multiple language documentation files for better accessibility.
- Updated the navbar title partial to remove unnecessary title attribute.
- Improved search input accessibility by adding autocomplete="off".
- Enhanced search partials in both navbar and sidebar with location context.
- Updated SVG icons in various components to include aria-hidden and focusable attributes for improved accessibility compliance.

* fix: improve giscus theme toggle functionality

- Updated the theme toggle options selector to use a data attribute for better specificity.
- Modified the event listener to use a setTimeout for the theme update, ensuring smoother transitions when the theme switcher is clicked.

* fix: resolve axe-core WCAG AA violations across docs pages

Add aria-labels to Hugo task list checkboxes, fix asciinema player
timer accessible names, make Jupyter output cells keyboard-focusable,
and add missing heading hierarchy in shortcodes docs for fa/ja/zh-cn.

* feat: integrate accessibility testing with Playwright and enhance CI workflow

- Added Playwright configuration for accessibility testing.
- Implemented accessibility tests using axe-core for all English pages.
- Created a GitHub Actions workflow to automate accessibility tests on pull requests.
- Updated package dependencies to include @axe-core/playwright and @playwright/test.
- Enhanced sidebar component with data attributes for improved accessibility styling.

* fix: update base URL and improve accessibility labels across multiple languages

- Changed the base URL in Playwright configuration and CI workflow from localhost:3000 to localhost:1313.
- Added accessibility labels for screen readers in various language files, enhancing user experience for visually impaired users.
- Updated the Asciinema script to dynamically set the playback time label for better accessibility compliance.

* refactor: reorganize accessibility tests and update test directory structure

- Moved accessibility tests from the e2e directory to a new tests directory for better organization.
- Updated the test directory path in Playwright configuration.
- Refactored the accessibility test implementation to improve code clarity and maintainability.

* chore: update .gitignore to include Playwright test output directories

- Added entries for 'playwright-report/' and 'test-results/' to the .gitignore file to prevent cluttering the repository with test artifacts.

* refactor: enhance accessibility and improve focus styles across components

- Removed unused utility for focus visibility in CSS and consolidated focus-visible styles for better maintainability.
- Updated various components to use `role` attributes for improved accessibility, including menu items and buttons.
- Enhanced theme toggle and language switch components with appropriate ARIA roles and attributes for better screen reader support.
- Improved the handling of focus states in the navigation and context menus to ensure a consistent user experience.

* chore: update dependencies and enhance accessibility features

- Updated the 'serve' package version in package.json and package-lock.json for improved performance.
- Removed unused 'xml2js' dependency to streamline the project.
- Enhanced the Playwright configuration to better manage the web server setup for testing.
- Improved accessibility in the language switcher and navigation menu by refining focus management and keyboard interactions.
- Updated the back-to-top button to manage tabindex for better accessibility compliance.

* feat: enhance mobile menu accessibility and keyboard interactions

- Added ARIA attributes to manage visibility of the sidebar on mobile devices.
- Implemented focus management for the sidebar when the menu is toggled.
- Introduced keyboard support to close the menu with the Escape key.
- Improved overall accessibility for the hamburger menu and sidebar interactions.

* fix: refine mobile menu keyboard interaction and enhance navbar accessibility

- Updated the Escape key functionality to close the menu only on mobile devices.
- Added a new ARIA attribute to the hamburger menu button for improved accessibility.
2026-02-14 20:06:35 +00:00
yuri
5028140432 feat(glossary): provide basic term glossary (#869)
* feat(glossary): provide basic term glossary

Enabled a site-wide terminology glossary.

* Added the `term` shortcode displaying term definition.
* Added the /glossary page showing all term definitions.
* Enabled a simplistic search of term definitions.

* refactor(glossary): update glossary page links and add callout for Hugo support

- Removed the glossary entry from the menu and adjusted weights for subsequent items.
- Added informational callouts in the glossary documentation for multiple languages, directing users to the Hugo Glossary Quick Reference.
- Updated links in the glossary documentation to point to the correct pages.

* fix(glossary): update links to glossary page format across multiple languages

- Changed links in the glossary documentation to use Hugo's relref format for consistency.
- Updated links in Persian, Japanese, English, and Simplified Chinese glossary pages.

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>
Co-authored-by: Xin <xin@imfing.com>
2026-01-19 22:33:09 +00:00
Xin
a128fabaf1 feat: add optional alt parameter to card shortcode (#899)
Add support for custom alt text on card images to improve accessibility.
The alt parameter is optional and defaults to the card title if not provided,
maintaining backward compatibility with existing implementations.

Fixes #896
2026-01-04 17:23:33 +00:00
Ludovic Fernandez
ccb63d60f1 feat(tabs): revamp tabs (#815) 2025-09-10 23:54:27 +01:00
Ludovic Fernandez
22f81e2470 feat(card): add tagIcon and tagBorder options (#791) 2025-08-25 16:49:06 +01:00
Lamber
524af14bd1 feat(shortcode): add shortcode for asciinema (#779)
* Add asciinema shortcode and usage examples

* Add asciinema shortcode

* Modify

* Modify

* Modify

* Modify

* Modify

* Remove old blog post and move content to dedicated documentation

* Add remote cast file support

* Fix remote cast file support

* Modify asciinema guide

* Add asciinema controls and idleTimeLimit

* fix the play button position issue and update some details

* Remove forced /casts/ prefix, implement flexible file lookup
2025-08-25 08:50:53 +01:00
Ludovic Fernandez
22c1a4f9df feat(badges): colors and border (#774)
* feat(badges): add more colors and allow to disable the border

* feat(badges): more colors

* chore: generate

* docs: add Others inside the sidebar

* chore: i18n

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>
2025-08-23 14:42:23 +01:00
Ludovic Fernandez
f4d75a4e5b feat(callout): revamp of the callouts (#767)
* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts
2025-08-21 23:31:16 +01:00
Ludovic Fernandez
b2ff662c8e chore: simplify style definition for badge and callout (#763) 2025-08-17 18:44:02 +01:00
Ludovic Fernandez
880084b091 chore: remove unused variables (#758) 2025-08-16 10:17:01 +01:00
Ludovic Fernandez
2033d50005 docs: add documentation on all shortcodes (#753) 2025-08-15 09:09:58 +08:00
Xin
6823cc1fe8 refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes

- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.

* refactor(search): update class names for search components

- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.

* refactor(search): update search component class names for consistency

- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.

* refactor(sidebar): rename sidebar classes for consistency

- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.

* refactor(language & theme): update class names for consistency

- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.

* refactor(css & html): rename classes for consistency and clarity

- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.

* refactor(language): update class names for language options

- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.

* refactor(css & html): rename classes for consistency and clarity

- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.

* feat(typography): add styling for horizontal lines

- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.

* feat(blog): add draft release announcement for Hextra v0.10.0

- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.

* refactor(css & html): rename `hextra-content` class to `content` for consistency

- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.

* refactor(typography & markdown): enhance table styling and markdown syntax

- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.

* fix(blog): update text color for improved accessibility

- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.

* docs(blog): update draft release announcement for Hextra v0.10.0

- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.

* chore: rebuild css
2025-08-13 22:55:38 +08:00
Xin
7b27743159 feat(tabs): implement synchronized tabs switching (#700)
* Sync tabs across groups

* feat(tabs): add optional synchronization

* Move tabs sync setting under page params

* fix: spacing between title and site title (#704)

* docs: document configure opengraph image (#706)

* [Docs] document using og:image

* Make example title page match others

* clarify wording

* chore: update tailwind css to latest version 4.1.8 (#703)

* fix: wrong SRI hash for katex.css (#702)

* Correct URL given in 'dev.toml'

* stylesheet 'katex.css': fix SRI hash

* fix(build): run npm update to fix postcss complaint

* feat(tags): improve usability of tags (#698)

* feat(tags): improve usability of tags

* Tags can be shown also at docs
* Documented tag-related config flags
* Added example tags to the site
* Made rendered tags active

* Move tags listing to ToC

* Hide tags section on no tags

* feat(math): add optional MathJax support (#707)

* feat: add MathJax option

* docs: move math engine note

* refactor: update LaTeX documentation and improve MathJax integration

- Adjusted LaTeX documentation for clarity and formatting.
- Enhanced MathJax configuration in the templates to support both KaTeX and MathJax rendering.
- Removed deprecated comments and streamlined the script loading process for MathJax.
- Updated the passthrough extension settings in the Hugo configuration for better compatibility with LaTeX math expressions.

* docs: simplify LaTeX documentation and clarify configuration steps

- Updated LaTeX documentation to reflect that KaTeX is enabled by default, removing the need for manual activation.
- Added examples for using LaTeX math expressions and clarified the configuration for the passthrough extension in Hugo.
- Enhanced MathJax section to emphasize its use as an alternative rendering engine.

* fix(tabs): add null check for panels container and update example items

* fix(tabs): improve tab group key handling and add validation for items parameter

* refactor(tabs): comment out sync option in configuration and adjust tab formatting in documentation

---------

Co-authored-by: hobobandy <30026704+hobobandy@users.noreply.github.com>
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
Co-authored-by: Andreas Deininger <adeininger@urbanonline.de>
Co-authored-by: yuri <1969yuri1969@gmail.com>
2025-07-21 21:16:44 +01:00
yuri
a44de285b2 chore: adapt theme to new template system (#696)
* Adapted theme's layout to [Hugo v0.146.0](https://gohugo.io/templates/new-templatesystem-overview/)
* Bumped minimal Hugo version to v0.146.0
2025-06-01 00:25:39 +01:00