feat: update components for improved accessibility and styling

[Maciej D (mdanilowicz)]

This pull request focuses on improving the accessibility (A11y) of the CMS base layer components. The changes include enhancements to ARIA attributes, semantic markup, and the removal of unnecessary or redundant elements to make the UI more accessible. Additionally, there are some dependency updates and minor style adjustments.

Accessibility Improvements:

• Updated ARIA attributes and replaced buttons with more appropriate semantic elements in filter dropdowns and sort menus for better screen reader support (SwSortDropdown.vue, SwFilterPrice.vue, SwFilterProperties.vue, SwFilterRating.vue, SwFilterShippingFree.vue). [1] [2] [3] [4] [5] [6] [7]
• Changed non-semantic elements to semantic ones (e.g., using <h1> for product name, <div> instead of <h3> for option group labels) to improve document structure and accessibility (CmsElementProductName.vue, SwVariantConfigurator.vue). [1] [2]

Dependency and Configuration Updates:

• Added @nuxt/a11y and axe-core as new dependencies to support accessibility testing and improvements (pnpm-lock.yaml). [1] [2] [3] [4]
• Updated some dependency versions and included sass as a dependency for @vitejs/plugin-vue in several places (pnpm-lock.yaml). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Minor Layout and Style Adjustments:

• Adjusted styles for certain CMS blocks and sections to improve layout consistency and accessibility (CmsBlockCenterText.vue, CmsSectionSidebar.vue). [1] [2]

Changelog:

• Added a changeset entry documenting the accessibility improvements as a minor update for @shopware/cms-base-layer.

close #2267

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontends-starter-template-extended	Ready	Preview, Comment	Feb 4, 2026 9:42am
frontends-vue-starter-template	Building	Preview, Comment	Feb 4, 2026 9:42am
old-frontends-demo	Building	Preview, Comment	Feb 4, 2026 9:42am
shopware-frontends-docs	Ready	Preview, Comment	Feb 4, 2026 9:42am

[Copilot]

Pull request overview

This PR improves accessibility and styling across the CMS base-layer components and the Vue starter template, including adding tooling support for automated a11y checks.

Changes:

• Added @nuxt/a11y (and axe-core via lockfile) and enabled the module in the starter template.
• Improved landmark/semantic structure and added ARIA labels in layouts and header controls.
• Updated several CMS base-layer components (filters/sort/product name/sections) to adjust semantics and reduce redundant interactive elements.

Reviewed changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
templates/vue-starter-template/package.json	Adds @nuxt/a11y dependency to the starter template.
templates/vue-starter-template/nuxt.config.ts	Enables @nuxt/a11y module.
templates/vue-starter-template/i18n/pl-PL/layout.json	Adds header translation strings for new aria-label usage.
templates/vue-starter-template/i18n/en-GB/layout.json	Adds header translation strings for new aria-label usage.
templates/vue-starter-template/i18n/de-DE/layout.json	Adds header translation strings for new aria-label usage.
templates/vue-starter-template/app/pages/account/order/details/[id].vue	Adjusts page structure to avoid an extra <main> element.
templates/vue-starter-template/app/layouts/default.vue	Adds an aria-label to the main landmark.
templates/vue-starter-template/app/layouts/checkout.vue	Adds an aria-label to the main landmark for checkout layout.
templates/vue-starter-template/app/layouts/account.vue	Switches sidebar to <nav> with an accessible label.
templates/vue-starter-template/app/components/layout/header/TopNavigation.vue	Refactors top navigation markup and adds ARIA attributes.
templates/vue-starter-template/app/components/layout/footer/NewsletterBox.vue	Adjusts semantics and text styling for footer newsletter box.
templates/vue-starter-template/app/components/layout/Header.vue	Adds localized aria-labels to icon buttons (account/cart).
templates/vue-starter-template/app/components/form/BaseInput.vue	Tweaks input styling and placeholder color for better contrast/readability.
templates/vue-starter-template/app/components/FrontendNavigationPage.vue	Adds a category title heading and wraps page content in a container.
pnpm-lock.yaml	Locks new dependencies and updates transitive dependency resolution.
packages/cms-base-layer/app/components/public/cms/section/CmsSectionSidebar.vue	Replaces nested <main> with <div> in section layout.
packages/cms-base-layer/app/components/public/cms/element/CmsElementProductName.vue	Attempts to make product name semantic by wrapping in <h1>.
packages/cms-base-layer/app/components/public/cms/block/CmsBlockCenterText.vue	Adjusts image styling in center-text block.
packages/cms-base-layer/app/components/listing-filters/SwFilterShippingFree.vue	Removes nested icon button and makes chevron decorative.
packages/cms-base-layer/app/components/listing-filters/SwFilterRating.vue	Removes nested icon button and makes chevron decorative.
packages/cms-base-layer/app/components/listing-filters/SwFilterProperties.vue	Removes redundant click handling; relies on checkbox/label semantics.
packages/cms-base-layer/app/components/listing-filters/SwFilterPrice.vue	Removes nested icon button and makes chevron decorative.
packages/cms-base-layer/app/components/SwVariantConfigurator.vue	Adjusts option group label semantics.
packages/cms-base-layer/app/components/SwSortDropdown.vue	Improves aria-expanded behavior and adjusts chevron accessibility.
.changeset/lazy-mirrors-learn.md	Documents the CMS base-layer a11y improvements as a minor bump.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.