Skip to content

qrcode page accessibility and style#540

Open
peppelinux wants to merge 1 commit into
mainfrom
qrcode-page
Open

qrcode page accessibility and style#540
peppelinux wants to merge 1 commit into
mainfrom
qrcode-page

Conversation

@peppelinux

Copy link
Copy Markdown
Member

This pull request introduces significant improvements to the IT-Wallet integration test frontend, focusing on enhanced branding, internationalization (i18n), and accessibility. The main changes include updating the logo across configurations, adding a robust language dropdown with i18n support, implementing new Italian and English translation files, and improving the frontend's layout and accessibility through new and updated CSS and HTML templates.

Internationalization and Language Support:

  • Added a new language dropdown component in the header, with JavaScript logic (header-lang-dropdown.js) for language switching and accessibility, aligning with developers.italia.it standards. [1] [2]
  • Introduced Italian (qr-it.json) and English (qr-en.json) translation files for all relevant frontend text, including headers, instructions, and footer links. [1] [2]

Branding and Logo Updates:

  • Updated the logo_path in all relevant backend configuration files to use the new IT-Wallet-Logo-Primary-BlueItalia.svg for consistent branding. [1] [2] [3]
  • Updated the HTML template (base_shell.html) to display the new IT-Wallet logo in the header alongside a customizable organization logo.

Frontend Layout and Accessibility Enhancements:

  • Added new CSS rules in style.css to implement a modern, responsive layout for the IT-Wallet page, including header, main content, and sticky footer, with improved handling of logos and separators. Also ensured footer links meet WCAG 2.2 minimum touch target requirements.
  • Introduced a minified CSS file (ita.min.css) for IT-Wallet-specific styles, providing utility classes for font sizing, margins, button styles, and dropdown menus.

Summary of Most Important Changes:

Internationalization and Language Switching

  • Added a language dropdown component with accessible, keyboard-friendly language switching logic in header-lang-dropdown.js, and integrated it into the new base_shell.html template. [1] [2]
  • Created comprehensive Italian and English translation files for all frontend text in qr-it.json and qr-en.json. [1] [2]

Branding Consistency

  • Updated all relevant configuration files to use the new IT-Wallet logo SVG for QR code and page branding. [1] [2] [3]
  • Modified the HTML base template to display both the organization and IT-Wallet logos in the header.

Layout and Accessibility

  • Added new CSS in style.css for a flexible, accessible layout with a sticky footer, improved header, and responsive design, and ensured footer links meet accessibility standards.
  • Introduced ita.min.css with utility classes for consistent IT-Wallet styling.

@peppelinux peppelinux requested a review from mciofo June 24, 2026 06:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant