Repository: spryker/spryker-docs
Pull request #3097: B2B - accessibility improvements
Author: login: fedets-spryker
Created: 2025-04-07T08:04:13Z | Merged: 2025-04-19T06:06:54Z

## PR labels

When the PR is ready for review, add a **TW review needed** label. This lets us keep track of PRs that need to be merged and merge them in time.


## PR Description
Describe the context for your changes and the changes you've made.

## Tickets

If changes are associated with a ticket, add a docs ticket here. 


## Checklist
- [x] I agree with the Code Contribution License Agreement in CONTRIBUTING.md



Diff:
diff --git a/_data/sidebars/dg_dev_sidebar.yml b/_data/sidebars/dg_dev_sidebar.yml
index 862be8d535..2b3f8ba5fc 100644
--- a/_data/sidebars/dg_dev_sidebar.yml
+++ b/_data/sidebars/dg_dev_sidebar.yml
@@ -949,6 +949,10 @@ entries:
       url: /docs/dg/dev/integrate-and-configure/switch-to-arm-architecture-m1-chip.html
     - title: Authorization Enabler
       url: /docs/dg/dev/integrate-and-configure/integrate-authorization-enabler.html
+    - title: Accessibility improvements
+      url: /docs/dg/dev/integrate-and-configure/integrate-accessibility-improvements.html
+    - title: "Tutorial: Integrate accessibility improvements into B2B Demo Shop"
+      url: /docs/dg/dev/integrate-and-configure/tutorial-integrate-accessiblity-improvements-into-b2b-demoshop.html      
     - title: Basic SEO techniques
       url: /docs/dg/dev/integrate-and-configure/integrate-basic-seo-techniques.html
     - title: Graceful shutdown
diff --git a/_data/sidebars/pbc_all_sidebar.yml b/_data/sidebars/pbc_all_sidebar.yml
index a5d05fc088..ca0386a86b 100644
--- a/_data/sidebars/pbc_all_sidebar.yml
+++ b/_data/sidebars/pbc_all_sidebar.yml
@@ -38,7 +38,6 @@ entries:
                   - title: Spryker Core Back Office + Warehouse User Management
                     url: /docs/pbc/all/back-office/unified-commerce/install-and-upgrade/install-the-spryker-core-back-office-warehouse-user-management-feature.html
 
-
       - title: Business Intelligence
         url: /docs/pbc/all/business-intelligence/business-intelligence.html
         include_versions:
@@ -1674,6 +1673,7 @@ entries:
                 nested:
                   - title: ChannelPilot Marketplace
                     url: /docs/pbc/all/merchant-management/marketplace/third-party-integrations/channelpilot-marketplace.html
+
       - title: Miscellaneous
         nested:
           - title: Spryker Core feature overview
@@ -1691,7 +1691,7 @@ entries:
           - title: Push Notification feature overview
             url: /docs/pbc/all/miscellaneous/push-notification-feature-overview.html
           - title: Sitemap feature overview
-            url: /docs/pbc/all/miscellaneous/sitemap.html            
+            url: /docs/pbc/all/miscellaneous/sitemap-feature-overview.html            
             include_versions:
             - "202505.0"  
           - title: Install and upgrade
@@ -4378,7 +4378,6 @@ entries:
                 - "202404.0"
                 - "202410.0"
 
-
       - title: Warehouse Management System
         url: /docs/pbc/all/warehouse-management-system/warehouse-management-system.html
         nested:
diff --git a/docs/dg/dev/integrate-and-configure/integrate-accessibility-improvements.md b/docs/dg/dev/integrate-and-configure/integrate-accessibility-improvements.md
new file mode 100644
index 0000000000..62c0ef502d
--- /dev/null
+++ b/docs/dg/dev/integrate-and-configure/integrate-accessibility-improvements.md
@@ -0,0 +1,88 @@
+---
+title: Integrate accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Accessibility improvements include the following changes:
+
+- Enhanced accessibility: Improved interface navigation with better **Tab** key logic and more accurate screen reader descriptions for UI elements
+- Keyboard-friendly search: Users can now interact with search suggestions using the keyboard
+- Better visual clarity: Adjusted the color scheme so text stands out better from its background, making it easier to read
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update the required modules:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add the glossary keys:
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+
+3. Import the glossary:
+```bash
+  console data:import glossary
+```
+
+4. To enable users to adjust scaling, update the `viewportUserScaleable` variable. This variable controls the `user-scalable` attribute in the viewport meta tag: `<meta name="viewport" content="..., user-scalable=no">`.
+
+**src/Pyz/Yves/ShopUi/Theme/default/templates/page-blank/page-blank.twig**
+<!-- {% raw %} -->
+```twig
+    {% block template %}
+        ...
+        {% set viewportUserScaleable = 'yes' %}
+
+        {{ parent() }}
+    {% endblock %}
+ ```
+<!-- {% endraw %} -->
+
+5. To enable `skip-link`, pass `navigationId` into the `header` organism:
+ 
+**src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig**
+<!-- {% raw %} -->
+```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    }  only %}
+        ...
+    {% endembed %}
+```
+<!-- {% endraw %} -->
+
+6. Build Javascript and CSS changes:
+
+```bash
+  console frontend:project:install-dependencies
+  console frontend:yves:build -e production
+```
+
+## Next step
+
+This document describes how to install the core of this functionality. The integration also requires project-specific frontend changes. For an example integration, see [Tutorial: Integrate accessibility improvements into B2B Demo Shop](/docs/dg/dev/integrate-and-configure/tutorial-integrate-accessiblity-improvements-into-b2b-demoshop.html).
\ No newline at end of file
diff --git a/docs/dg/dev/integrate-and-configure/tutorial-integrate-accessiblity-improvements-into-b2b-demoshop.md b/docs/dg/dev/integrate-and-configure/tutorial-integrate-accessiblity-improvements-into-b2b-demoshop.md
new file mode 100644
index 0000000000..1b1d3faa9e
--- /dev/null
+++ b/docs/dg/dev/integrate-and-configure/tutorial-integrate-accessiblity-improvements-into-b2b-demoshop.md
@@ -0,0 +1,276 @@
+---
+title: "Tutorial: Integrate accessibility improvements into B2B Demo Shop"
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+This document describes an example integration of accessibility improvements into the B2B demo shop. Use it as a references for integrating this functionality into your projects.
+
+For all changes described in this document, see the [integration PR](https://github.com/spryker-shop/b2b-demo-marketplace/pull/532).
+
+
+## Prerequisites
+
+[Integrate accessibility improvements](/docs/dg/dev/integrate-and-configure/integrate-accessibility-improvements.html)
+
+## Update modules
+
+```bash
+composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+
+{% info_block warningBox "Verification" %}
+
+Make sure that the following modules have been installed:
+
+| Module                                  | Version     |
+|-----------------------------------------|-------------|
+| spryker-shop/catalog-page               | 1.29.0    |
+| spryker-shop/company-page               | 1.32.0    |
+| spryker-shop/customer-page              | 1.58.0    |
+| spryker-shop/product-group-widget       | 1.11.1    |
+| spryker-shop/product-review-widget      | 1.16.2   |
+| spryker-shop/shop-ui                    | 1.84.0   |
+
+{% endinfo_block %}
+
+
+## Adjust templates on the project level
+
+<!-- {% raw %} -->
+
+1. In `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`, rename `{% block body %}` to `{% block viewport %}`.
+
+2. To enable the `skip-link` feature, pass the `navigationId` attribute (using the `navigationId` variable from the core) from `page-layout-main.twig` to the `header` organism:
+
+**src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig**
+```twig
+  {% embed organism('header') with {
+      data: {
+          ...
+      },
+      attributes: {
+          navigationId: navigationId,
+      },
+  } only %}
+```
+
+
+
+
+<!-- {% endraw %} -->
+
+3. Define the `navigationId` attribute and use it as an ID for the navigation component. 
+
+<!-- {% raw %} -->
+**src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig**
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+4. Add `skip-link` and ID attribute for its target: 
+
+**src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig**
+<!-- {% raw %} -->
+```twig
+{% block content %}
+  {% set catalogProductListId = 'catalog-product-list' %}
+
+  {% include molecule('skip-link') with {
+     data: {
+        href: catalogProductListId,
+        text: 'global.skip-to-products' | trans,
+     },
+  } only %}
+... 
+
+
+<div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+```
+<!-- {% endraw %} -->
+
+ **src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig**
+<!-- {% raw %} -->
+```twig
+{% block content %}
+ {% set contentSectionId = 'company-content' %}
+
+ {% include molecule('skip-link') with {
+   data: {
+     href: contentSectionId,
+     text: 'global.skip-to-content' | trans,
+   },
+ } only %}
+
+ <div id="{{ contentSectionId }}"> //Wrapper for the page content
+```
+ <!-- {% endraw %} -->
+
+**src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig**
+<!-- {% raw %} -->
+```twig
+{% block content %}
+ {% set contentSectionId = 'customer-content' %}
+
+ {% include molecule('skip-link') with {
+   data: {
+     href: contentSectionId,
+     text: 'global.skip-to-content' | trans,
+   },
+ } only %}
+
+ <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+  ...     
+```
+<!-- {% endraw %} -->
+
+5. Adjust `mapEvents` method by adding the `tabIndex` attribute and `focusin` event listener:
+ 
+**src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts** 
+```js
+    protected mapEvents(): void {
+      this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+      this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+      Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+          button.setAttribute('tabindex', '0');
+          button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+      })
+    }
+```
+
+6. Enable the `accessibility` parameter for the image slider configuration:
+
+**src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts**
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+7. Adjust `mapEvents` and add a `browseFileLabelHandler` method:
+
+**src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts**
+```js
+  protected mapEvents(): void {
+    ...
+    this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+  }
+
+  protected browseFileLabelHandler(event: KeyboardEvent): void {
+    if (event.code !== 'Enter') {
+        return;
+    }
+
+    event.preventDefault();
+    this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+  }
+```
+
+8. Add `focusin` and `focusout` event listeners:
+
+**src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts**
+```js
+ protected mapEvents(): void {
+  this.triggers.forEach((trigger: HTMLElement) => {
+      trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+      trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+  });
+  this.triggers.forEach((trigger: HTMLElement) => {
+      trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+      trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+  });
+  ...
+```
+
+9. Add the `parent-class-name` attribute to the call of the `suggest-search` molecule:
+
+**src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig**
+<!-- {% raw %} -->
+```twig
+  {% include molecule('suggest-search') with {
+    attributes: {
+      'parent-class-name': config.name,
+      ...
+```
+<!-- {% endraw %} -->
+ 
+10. Improve text to background contrast in the following files:
+- `src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/slick-carousel/slick-carousel.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/user-navigation/user-navigation.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/navigation-top/navigation-top.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/styles/basics/_reset.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/styles/helpers/_outline.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/styles/settings/_z-index.scss`  
+- `src/Pyz/Yves/ShopUi/Theme/default/styles/shared.scss`
+
+  
+11. Build Javascript and CSS changes:
+
+```bash
+  console frontend:project:install-dependencies
+  console frontend:yves:build -e production
+```
+
+12. Generate translation cache for Yves:
+
+```bash
+  console data:import glossary
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pbc/all/miscellaneous/202505.0/sitemap-feature-overview.md b/docs/pbc/all/miscellaneous/202505.0/sitemap-feature-overview.md
index feb5021393..3ccb25c5c4 100644
--- a/docs/pbc/all/miscellaneous/202505.0/sitemap-feature-overview.md
+++ b/docs/pbc/all/miscellaneous/202505.0/sitemap-feature-overview.md
@@ -12,7 +12,7 @@ Sitemap is running under an Early Access Release. Early Access Releases are subj
 
 {% endinfo_block %}
 
-The Sitemap feature generates sitemaps for your Spryker applications to improve SEO by helping search engines index your pages efficiently. The feautre is configurable to tailor the sitemap generation to your project’s needs.
+The Sitemap feature generates sitemaps for your Spryker applications to improve SEO by helping search engines index your pages efficiently. The feature is configurable to tailor the sitemap generation to your project's needs.
 
 
 ## Supported entities


Reviews:
user: login: tolerants
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-07T14:39:42Z
user: login: tolerants
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-10T12:30:12Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T13:11:38Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T13:16:23Z
user: login: tolerants
state: DISMISSED
author_association: NONE
submitted_at: 2025-04-11T13:39:14Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:33:15Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:34:43Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:37:40Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:38:27Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:41:27Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:41:41Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:41:46Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:45:27Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:46:22Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:49:54Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T03:52:35Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T06:40:56Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T06:44:30Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T07:01:54Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:05:05Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:07:03Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:07:38Z
user: login: fedets-spryker
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:07:56Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T07:31:37Z
user: login: andriitserkovnyi
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T08:02:30Z
user: login: tolerants
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-17T08:10:42Z
user: login: tolerants
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-17T08:13:12Z
user: login: tolerants
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-17T08:14:46Z

Review comments:
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Adjusted multiple components to be more accessible via keyboard:
+  - Added `aria-label` attributes to the multiple components to improve screen reader support
+  - Adjusted `tabIndex` attributes to improve keyboard navigation
+- Add a new attribute `parent-class-name` for the `suggest-search` component that helps to improve keyboard accessibility for the product searching process.
+- Improved color schema for better text to background contrast
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+* To update necessary modules run the following command:
+```bash
+  composer update "MODULE_NAME"
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: It's have to be a command to install all the modules.
created_at: 2025-04-07T13:54:45Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Adjusted multiple components to be more accessible via keyboard:
+  - Added `aria-label` attributes to the multiple components to improve screen reader support
+  - Adjusted `tabIndex` attributes to improve keyboard navigation
+- Add a new attribute `parent-class-name` for the `suggest-search` component that helps to improve keyboard accessibility for the product searching process.
+- Improved color schema for better text to background contrast
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+* To update necessary modules run the following command:
+```bash
+  composer update "MODULE_NAME"
+```
+
+2. Adjust templates and files on the project lvl.
+   - Add `skip-link` and ID attribute (href for `skip-link`) to 
+     - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig
+     - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+     - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+    - Adjust `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: It doesn't work. We need to describe it, or maybe we can link a reference PR, but we haven't done it before. We can discuss it with TW/AA probably.
created_at: 2025-04-07T14:00:12Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Adjusted multiple components to be more accessible via keyboard:
+  - Added `aria-label` attributes to the multiple components to improve screen reader support
+  - Adjusted `tabIndex` attributes to improve keyboard navigation
+- Add a new attribute `parent-class-name` for the `suggest-search` component that helps to improve keyboard accessibility for the product searching process.
+- Improved color schema for better text to background contrast
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: - Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.

- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.

- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
created_at: 2025-04-07T14:34:37Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Not sure if I get this description.
created_at: 2025-04-07T14:35:14Z
author_association: NONE
diff_hunk: @@ -0,0 +1,35 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Introduced a new `skip-link` element to skip to main content
+  - Allows customer to skip navigation and go directly to the main content of the page 
+  - Become visible on the page when the user presses the `Tab` key.
+- Adjusted multiple components to be more accessible via keyboard (form elements, navigation, etc.):
+  - Added `aria-label` attribute to improve screen reader support
+  - Added `tabIndex` attributes to improve keyboard navigation
+  - Introduced new TWIG variable `viewportUserScaleable` to control `user-scalable` options of the  `meta name="viewport"` attribute.
+    - Accepted values - `yes`, `no`
+- Improved `suggest-search` component so customer can use `search` functionality with keyboard.
+  - Introduced new attribute `parent-class-name` for the `suggest-search` molecule. 
+- Improved color schema for better text to background contrast
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Can you please adjust following my suggestion for a previous article?
created_at: 2025-04-07T14:37:31Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Adjusted multiple components to be more accessible via keyboard:
+  - Added `aria-label` attributes to the multiple components to improve screen reader support
+  - Adjusted `tabIndex` attributes to improve keyboard navigation
+- Add a new attribute `parent-class-name` for the `suggest-search` component that helps to improve keyboard accessibility for the product searching process.
+- Improved color schema for better text to background contrast
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+* To update necessary modules run the following command:
+```bash
+  composer update "MODULE_NAME"
+```
+
+2. Adjust templates and files on the project lvl.
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: ```suggestion
2. Adjust templates and files on the project level.
```
created_at: 2025-04-07T14:38:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,35 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Introduced a new `skip-link` element to skip to main content
+  - Allows customer to skip navigation and go directly to the main content of the page 
+  - Become visible on the page when the user presses the `Tab` key.
+- Adjusted multiple components to be more accessible via keyboard (form elements, navigation, etc.):
+  - Added `aria-label` attribute to improve screen reader support
+  - Added `tabIndex` attributes to improve keyboard navigation
+  - Introduced new TWIG variable `viewportUserScaleable` to control `user-scalable` options of the  `meta name="viewport"` attribute.
+    - Accepted values - `yes`, `no`
+- Improved `suggest-search` component so customer can use `search` functionality with keyboard.
+  - Introduced new attribute `parent-class-name` for the `suggest-search` molecule. 
+- Improved color schema for better text to background contrast
+
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: There are no integration details? Like no changes on the project side?
created_at: 2025-04-07T14:38:37Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Adjusted multiple components to be more accessible via keyboard:
+  - Added `aria-label` attributes to the multiple components to improve screen reader support
+  - Adjusted `tabIndex` attributes to improve keyboard navigation
+- Add a new attribute `parent-class-name` for the `suggest-search` component that helps to improve keyboard accessibility for the product searching process.
+- Improved color schema for better text to background contrast
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+* To update necessary modules run the following command:
+```bash
+  composer update "MODULE_NAME"
+```
+
+2. Adjust templates and files on the project lvl.
+   - Add `skip-link` and ID attribute (href for `skip-link`) to 
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Usually we are providing code samples for better understading.
created_at: 2025-04-07T14:39:35Z
author_association: NONE
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer update spryker-shop/catalog-page spryker-shop/company-page spryker-shop/customer-page spryker-shop/product-group-widget spryker-shop/product-review-widget spryker-shop/shop-ui
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Please specify versions.
created_at: 2025-04-10T12:22:27Z
author_association: NONE
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update necessary modules with the following command:
+```bash
+  composer update spryker-shop/shop-ui
+```
+
+2. Generate translation cache for Yves:
+- Add glossary keys for the new accessibility improvements.
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: It's not about generation of translation cache. So suggest to put it into the separate section.
created_at: 2025-04-10T12:24:41Z
author_association: NONE
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update necessary modules with the following command:
+```bash
+  composer update spryker-shop/shop-ui
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Please specify the version.
created_at: 2025-04-10T12:25:12Z
author_association: NONE
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Why description is the same for both docs?
created_at: 2025-04-10T12:26:47Z
author_association: NONE
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer update spryker-shop/catalog-page spryker-shop/company-page spryker-shop/customer-page spryker-shop/product-group-widget spryker-shop/product-review-widget spryker-shop/shop-ui
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
+
+  ```js
+    protected mapEvents(): void {
+      ...
+      this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+    }
+  
+    protected browseFileLabelHandler(event: KeyboardEvent): void {
+      if (event.code !== 'Enter') {
+          return;
+      }
+  
+      event.preventDefault();
+      this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+    }
+  ```
+- Adjust `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts` by adding `focusin` and `focusout` event listeners
+  ```js
+   protected mapEvents(): void {
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+        trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+    });
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+        trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+    });
+    ...
+  ```
+- Add `parent-class-name` attribute to the call of the `suggest-search` molecule at `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig`
+
+<!-- {% raw %} -->
+  ```twig
+    {% include molecule('suggest-search') with {
+      attributes: {
+        'parent-class-name': config.name,
+        ...
+  ```
+<!-- {% endraw %} -->
+ 
+- Adjust styles for the following components
+  - src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/slick-carousel/slick-carousel.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/user-navigation/user-navigation.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/organisms/navigation-top/navigation-top.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/basics/_reset.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/helpers/_outline.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/settings/_z-index.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/shared.scss
+  
+1. Build Javascript and CSS changes:
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Something is wrong with numeration. 
created_at: 2025-04-10T12:28:16Z
author_association: NONE
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer update spryker-shop/catalog-page spryker-shop/company-page spryker-shop/customer-page spryker-shop/product-group-widget spryker-shop/product-review-widget spryker-shop/shop-ui
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
+
+  ```js
+    protected mapEvents(): void {
+      ...
+      this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+    }
+  
+    protected browseFileLabelHandler(event: KeyboardEvent): void {
+      if (event.code !== 'Enter') {
+          return;
+      }
+  
+      event.preventDefault();
+      this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+    }
+  ```
+- Adjust `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts` by adding `focusin` and `focusout` event listeners
+  ```js
+   protected mapEvents(): void {
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+        trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+    });
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+        trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+    });
+    ...
+  ```
+- Add `parent-class-name` attribute to the call of the `suggest-search` molecule at `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig`
+
+<!-- {% raw %} -->
+  ```twig
+    {% include molecule('suggest-search') with {
+      attributes: {
+        'parent-class-name': config.name,
+        ...
+  ```
+<!-- {% endraw %} -->
+ 
+- Adjust styles for the following components
+  - src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/slick-carousel/slick-carousel.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/user-navigation/user-navigation.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/organisms/navigation-top/navigation-top.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/basics/_reset.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/helpers/_outline.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/settings/_z-index.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/shared.scss
+  
+1. Build Javascript and CSS changes:
+
+```bash
+  console frontend:project:install-dependencies
+  console frontend:yves:build -e production
+```
+
+2. Generate translation cache for Yves:
+
+```bash
+  console data:import glossary
+```
+<hr />
+
+#### Link to the repository with this changes
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: ```suggestion
#### Integration PR with an example:
```
created_at: 2025-04-10T12:28:46Z
author_association: NONE
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer update spryker-shop/catalog-page spryker-shop/company-page spryker-shop/customer-page spryker-shop/product-group-widget spryker-shop/product-review-widget spryker-shop/shop-ui
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
+
+  ```js
+    protected mapEvents(): void {
+      ...
+      this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+    }
+  
+    protected browseFileLabelHandler(event: KeyboardEvent): void {
+      if (event.code !== 'Enter') {
+          return;
+      }
+  
+      event.preventDefault();
+      this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+    }
+  ```
+- Adjust `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts` by adding `focusin` and `focusout` event listeners
+  ```js
+   protected mapEvents(): void {
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+        trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+    });
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+        trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+    });
+    ...
+  ```
+- Add `parent-class-name` attribute to the call of the `suggest-search` molecule at `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig`
+
+<!-- {% raw %} -->
+  ```twig
+    {% include molecule('suggest-search') with {
+      attributes: {
+        'parent-class-name': config.name,
+        ...
+  ```
+<!-- {% endraw %} -->
+ 
+- Adjust styles for the following components
+  - src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/slick-carousel/slick-carousel.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/molecules/user-navigation/user-navigation.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/components/organisms/navigation-top/navigation-top.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/basics/_reset.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/helpers/_outline.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/settings/_z-index.scss
+  - src/Pyz/Yves/ShopUi/Theme/default/styles/shared.scss
+  
+1. Build Javascript and CSS changes:
+
+```bash
+  console frontend:project:install-dependencies
+  console frontend:yves:build -e production
+```
+
+2. Generate translation cache for Yves:
+
+```bash
+  console data:import glossary
+```
+<hr />
+
+#### Link to the repository with this changes
+https://github.com/spryker-shop/b2b-demo-marketplace/tree/8ce31915e05e5c6f0e6f8058d2a387156608deb6
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Suggest to put a link to PR.
created_at: 2025-04-10T12:29:58Z
author_association: NONE
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Because in both cases changes were the same in common for the core and project levels.
created_at: 2025-04-10T13:11:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,35 @@
+---
+title: Install the Spryker core keyboard accessibility improvements
+description: Learn how to the Spryker core keyboard accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Introduced a new `skip-link` element to skip to main content
+  - Allows customer to skip navigation and go directly to the main content of the page 
+  - Become visible on the page when the user presses the `Tab` key.
+- Adjusted multiple components to be more accessible via keyboard (form elements, navigation, etc.):
+  - Added `aria-label` attribute to improve screen reader support
+  - Added `tabIndex` attributes to improve keyboard navigation
+  - Introduced new TWIG variable `viewportUserScaleable` to control `user-scalable` options of the  `meta name="viewport"` attribute.
+    - Accepted values - `yes`, `no`
+- Improved `suggest-search` component so customer can use `search` functionality with keyboard.
+  - Introduced new attribute `parent-class-name` for the `suggest-search` molecule. 
+- Improved color schema for better text to background contrast
+
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Changes for the project level presented below 
created_at: 2025-04-10T13:16:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Why not list the elements?
created_at: 2025-04-16T03:33:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: ```suggestion
- Keyboard-Friendly Search: Users can now interact with search suggestions using the keyboard.
```
created_at: 2025-04-16T03:34:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Why are there two changes and only one code snippet?
created_at: 2025-04-16T03:37:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Use where?
created_at: 2025-04-16T03:38:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: What are you trying to explain by the info in parentheses? 
created_at: 2025-04-16T03:41:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Instructions missing
created_at: 2025-04-16T03:41:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Instructions missing
created_at: 2025-04-16T03:41:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: ```suggestion
- In `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`, adjust `mapEvents` and add a `browseFileLabelHandler` method: 
```
created_at: 2025-04-16T03:45:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
+
+  ```js
+    protected mapEvents(): void {
+      ...
+      this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+    }
+  
+    protected browseFileLabelHandler(event: KeyboardEvent): void {
+      if (event.code !== 'Enter') {
+          return;
+      }
+  
+      event.preventDefault();
+      this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+    }
+  ```
+- Adjust `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts` by adding `focusin` and `focusout` event listeners
+  ```js
+   protected mapEvents(): void {
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+        trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+    });
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+        trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+    });
+    ...
+  ```
+- Add `parent-class-name` attribute to the call of the `suggest-search` molecule at `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig`
+
+<!-- {% raw %} -->
+  ```twig
+    {% include molecule('suggest-search') with {
+      attributes: {
+        'parent-class-name': config.name,
+        ...
+  ```
+<!-- {% endraw %} -->
+ 
+- Adjust styles for the following components
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: What exactly needs to be done?
created_at: 2025-04-16T03:46:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update necessary modules with the following command:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add glossary keys for the new accessibility improvements.
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
+- Run the following command to import the glossary:
+```bash
+  console data:import glossary
+```
+
+4. Enable user scalable option in the project:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: What is a user scalable option?
created_at: 2025-04-16T03:49:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Feed this document to chatgpt and it'll give you a proper description
created_at: 2025-04-16T03:52:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Text was changed. First line does not code snippet as it's just a word change 
created_at: 2025-04-16T06:40:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Changed
created_at: 2025-04-16T06:44:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Single instruction for different templates  
created_at: 2025-04-16T07:01:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'customer-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content 
+          ...     
+       ```
+       <!-- {% endraw %} -->
+
+- Adjust `mapEvents` method by adding `tabIndex` attribute and `focusin` event listener at `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+   
+  ```js
+      protected mapEvents(): void {
+        this.thumbnailSlider.on('mouseenter', '.slick-slide', (event: Event) => this.onThumbnailHover(event));
+        this.thumbnailSlider.on('afterChange', (event: Event, slider: $) => this.onAfterChange(event, slider));
+        Array.from(this.querySelectorAll(`.slick-slide`)).forEach((button: HTMLButtonElement) => {
+            button.setAttribute('tabindex', '0');
+            button.addEventListener('focusin', (event: Event) => this.onThumbnailHover(event));
+        })
+      }
+  ```
+- Enable `accessibility` param for the image slider config at the `src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.ts`
+
+  <!-- {% raw %} -->
+    ```twig
+    {% define attributes = {
+      'config-thumbnail-slider': '{
+        ...
+        "accessibility": true,
+    ```
+  <!-- {% endraw %} -->
+
+- Adjust `mapEvents` and add new `browseFileLabelHandler` method and `src/Pyz/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-file-upload/quick-order-file-upload.ts`
+
+  ```js
+    protected mapEvents(): void {
+      ...
+      this.browseFileLabel.addEventListener('keydown', (event: KeyboardEvent) => this.browseFileLabelHandler(event));
+    }
+  
+    protected browseFileLabelHandler(event: KeyboardEvent): void {
+      if (event.code !== 'Enter') {
+          return;
+      }
+  
+      event.preventDefault();
+      this.browseFileLabel.dispatchEvent(new MouseEvent('click'));
+    }
+  ```
+- Adjust `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-multilevel/navigation-multilevel.ts` by adding `focusin` and `focusout` event listeners
+  ```js
+   protected mapEvents(): void {
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseover', (event: Event) => this.onTriggerOver(event));
+        trigger.addEventListener('focusin', (event: Event) => this.onTriggerOver(event));
+    });
+    this.triggers.forEach((trigger: HTMLElement) => {
+        trigger.addEventListener('mouseout', (event: Event) => this.onTriggerOut(event));
+        trigger.addEventListener('focusout', (event: Event) => this.onTriggerOut(event));
+    });
+    ...
+  ```
+- Add `parent-class-name` attribute to the call of the `suggest-search` molecule at `src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig`
+
+<!-- {% raw %} -->
+  ```twig
+    {% include molecule('suggest-search') with {
+      attributes: {
+        'parent-class-name': config.name,
+        ...
+  ```
+<!-- {% endraw %} -->
+ 
+- Adjust styles for the following components
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Changed text 
created_at: 2025-04-16T09:05:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Because changes were not for some specific element but for the site UI in general. Some elements have new components inside and some of them have only UI changes   
created_at: 2025-04-16T09:07:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Adjusted
created_at: 2025-04-16T09:07:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,203 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update modules:
+  - Update the `spryker-shop/catalog-page` module to version `1.29.0` or later.
+  - Update the `spryker-shop/company-page` module to version `1.32.0` or later.
+  - Update the `spryker-shop/customer-page` module to version `1.58.0` or later.1.2
+  - Update the `spryker-shop/product-group-widget` module to version `1.11.1` or later.
+  - Update the `spryker-shop/product-review-widget` module to version `1.16.2` or later.
+  - Update the `spryker-shop/shop-ui` module to version `1.84.0` or later.
+
+* To update necessary modules run the following command:
+```bash
+    composer require spryker-shop/catalog-page:^1.29.0 spryker-shop/company-page:^1.32.0 spryker-shop/customer-page:^1.58.0 spryker-shop/product-group-widget:^1.11.1 spryker-shop/product-review-widget:^1.16.2 spryker-shop/shop-ui:^1.84.0
+```
+<!-- {% raw %} -->
+2. Adjust templates and files on the project level.
+- Rename `{% block body %}` to `{% block viewport %}` at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+- Pass `navigationId` attribute with its value as `navigationId` (variable from the Spryker Core) to the call of the `header` organism at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig` to enable `skip-link`. Pass this attribute into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`
+
+  ```twig
+    {% embed organism('header') with {
+        data: {
+            ...
+        },
+        attributes: {
+            navigationId: navigationId,
+        },
+    } only %}
+  ```
+<!-- {% endraw %} -->
+
+- Define and use as navigation ID `navigationId` attribute at `src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.twig`
+
+<!-- {% raw %} -->
+```twig
+  {% define attributes = {
+    navigationId: '',
+  } %}
+ 
+  ...
+  
+  <div class="{{ config.name }}__navigation" id="{{ attributes.navigationId }}">
+```
+<!-- {% endraw %} -->
+
+- Add `skip-link` and ID attribute (href for `skip-link`) to 
+  - src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig (`catalogProductListId` is the ID for the `skip-link`)
+       <!-- {% raw %} -->
+       ```twig
+       {% block content %}
+          {% include molecule('skip-link') with {
+             data: {
+                href: catalogProductListId,
+                text: 'global.skip-to-products' | trans,
+             },
+          } only %}
+       ... 
+    
+    
+       <div class="col col--sm-12 col--lg-8 col--xl-9" id="{{ catalogProductListId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CompanyPage/Theme/default/templates/page-layout-company/page-layout-company.twig
+       <!-- {% raw %} -->
+       ```twig
+       {% set contentSectionId = 'company-content' %}
+     
+       {% block content %}
+         {% include molecule('skip-link') with {
+           data: {
+             href: contentSectionId,
+             text: 'global.skip-to-content' | trans,
+           },
+         } only %}
+ 
+         <div id="{{ contentSectionId }}"> //Wrapper for the page content
+       ```
+       <!-- {% endraw %} -->
+
+       - src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig
path: docs/pbc/all/accessibility-improvement/202410.0/b2b/install-the-spryker-accessibility-improvements.md
user: login: fedets-spryker
body: Single instruction for different templates
created_at: 2025-04-16T09:07:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,93 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Accessibility improvements include the following changes:
+
+- Enhanced accessibility: Improved interface navigation with better **Tab** key logic and more accurate screen reader descriptions for UI elements.
+- Keyboard-friendly search: Users can now interact with search suggestions using the keyboard.
+- Better visual clarity: Adjusted the color scheme so text stands out better from its background, making it easier to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update the required modules:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add the glossary keys:
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: Command missing
created_at: 2025-04-17T07:31:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,92 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Accessibility improvements include the following changes:
+
+- Enhanced accessibility: Improved interface navigation with better **Tab** key logic and more accurate screen reader descriptions for UI elements.
+- Keyboard-friendly search: Users can now interact with search suggestions using the keyboard.
+- Better visual clarity: Adjusted the color scheme so text stands out better from its background, making it easier to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update the required modules:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add the glossary keys:
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
+
+
+
+
+
+4. Import the glossary:
+```bash
+  console data:import glossary
+```
+
+4. To enable users to adjust scaling, update the `viewportUserScaleable` variable. This variable controls the `user-scalable` attribute in the viewport meta tag: `<meta name="viewport" content="..., user-scalable=no">`.
+
+**src/Pyz/Yves/ShopUi/Theme/default/templates/page-blank/page-blank.twig**
+<!-- {% raw %} -->
+```twig
+    {% block template %}
+        ...
+        {% set viewportUserScaleable = 'yes' %}
+
+        {{ parent() }}
+    {% endblock %}
+ ```
+<!-- {% endraw %} -->
+
+5. To enable `skip-link`, pass `navigationId` into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: andriitserkovnyi
body: ```suggestion
5. To enable `skip-link`, pass `navigationId` into the `header` organism in `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`:
```
created_at: 2025-04-17T08:02:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,92 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Accessibility improvements include the following changes:
+
+- Enhanced accessibility: Improved interface navigation with better **Tab** key logic and more accurate screen reader descriptions for UI elements.
+- Keyboard-friendly search: Users can now interact with search suggestions using the keyboard.
+- Better visual clarity: Adjusted the color scheme so text stands out better from its background, making it easier to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update the required modules:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add the glossary keys:
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
+
+
+
+
+
+4. Import the glossary:
+```bash
+  console data:import glossary
+```
+
+4. To enable users to adjust scaling, update the `viewportUserScaleable` variable. This variable controls the `user-scalable` attribute in the viewport meta tag: `<meta name="viewport" content="..., user-scalable=no">`.
+
+**src/Pyz/Yves/ShopUi/Theme/default/templates/page-blank/page-blank.twig**
+<!-- {% raw %} -->
+```twig
+    {% block template %}
+        ...
+        {% set viewportUserScaleable = 'yes' %}
+
+        {{ parent() }}
+    {% endblock %}
+ ```
+<!-- {% endraw %} -->
+
+5. To enable `skip-link`, pass `navigationId` into the `header` organism from `src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig`:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: Looks good for me.
created_at: 2025-04-17T08:10:42Z
author_association: NONE
diff_hunk: @@ -0,0 +1,93 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Accessibility improvements include the following changes:
+
+- Enhanced accessibility: Improved interface navigation with better **Tab** key logic and more accurate screen reader descriptions for UI elements.
+- Keyboard-friendly search: Users can now interact with search suggestions using the keyboard.
+- Better visual clarity: Adjusted the color scheme so text stands out better from its background, making it easier to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update the required modules:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add the glossary keys:
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: ```suggestion
3. Import glossary:

```bash
  console data:import glossary
```
```
created_at: 2025-04-17T08:13:12Z
author_association: NONE
diff_hunk: @@ -0,0 +1,83 @@
+---
+title: Accessibility improvements
+description: Learn how install accessibility improvements.
+last_updated: March 31, 2025
+template: feature-integration-guide-template
+---
+
+Keyboard accessibility improvements include the following changes:
+
+- Enhanced Accessibility: Made several interface elements more accessible. You can now navigate more logically using the Tab key, and screen readers provide better descriptions of elements.
+- Keyboard-Friendly Search: Improved the way keyboard users can interact with the product search suggestions.
+- Better Visual Clarity: Adjusted the color scheme across the site to ensure text stands out better from its background, making it easier for everyone to read.
+
+To install Yves keyboard accessibility improvements, take the following steps:
+
+1. Update necessary modules with the following command:
+```bash
+  composer require spryker-shop/shop-ui:^1.84.0
+```
+
+2. Add glossary keys for the new accessibility improvements.
+
+| Key                                         | Translation (de_DE)                                | Translation (en_US)                                |
+|---------------------------------------------|---------------------------------------------------|---------------------------------------------------|
+| global.skip-to-navigation                   | Zur Navigation springen                           | Skip to navigation                                |
+| global.skip-to-products                     | Zu den Produkten springen                         | Skip to products                                  |
+| global.skip-to-content                      | Zum Inhalt springen                               | Skip to content                                   |
+| global.search.hint                          | Suchhinweis                                       | Search hint                                       |
+| product_group_widget.product.view.in.color  | Produkt ansehen in %color%                        | View product in %color%                           |
+| product_review_widget.product_review.summary.mark | %mark% Sterne                                 | %mark% stars                                      |
+| price_widget.aria_label.price_mode.switcher | Preismodus auswählen                              | Select price mode                                 |
+| currency_widget.aria_label.currency.switcher | Währung auswählen                                 | Select currency                                   |
+| language_switcher_widget.aria_label.language.switcher | Sprache auswählen                           | Select language                                   |
+| store_widget.aria_label.store.switcher      | Shop auswählen                                    | Select store                                      |
+| shop_ui.aria_label.suggest_search.hint      | Produkte suchen                                   | Search for products                               |
+| shop_ui.aria_label.counter.input            | Zähler Eingabe, geben Sie eine Zahl ein           | Counter input, enter a number                     |
+| product_review_widget.aria_label.current.rating | Aktuelle Bewertung ist %s%                    | Current rating is %s%                             |
+| product_bundle_widget.aria_label.view.details | Details für %productName% anzeigen             | View details for %productName%                    |
+| customer_reorder_widget.aria_label.check.product.to.reorder | Überprüfen Sie das Produkt %productName%, um es erneut zu bestellen | Check the product %productName% to reorder |
+
+3. Generate translation cache for Yves:
+- Run the following command to import the glossary:
+```bash
+  console data:import glossary
+```
+
+4. Enable user scalable option in the project:
path: docs/pbc/all/accessibility-improvement/202410.0/base-shop/install-the-spryker-accessibility-improvements.md
user: login: tolerants
body: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element#user-scalable
created_at: 2025-04-17T08:14:33Z
author_association: NONE

PR comments:
user: login: netlify[bot]
created_at: 2025-04-07T08:04:30Z
body: ### <span aria-hidden="true">❌</span> Deploy Preview for *spryker-docs-test* failed.


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 575b5a7bb6bec1676ba79ff6def27f8998d33f15 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/spryker-docs-test/deploys/67f386fe62908d0008558887 |
author_association: NONE
user: login: netlify[bot]
created_at: 2025-04-07T08:05:27Z
body: ### <span aria-hidden="true">❌</span> Deploy Preview for *spryker-docs* failed.


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 0d74ec8af7f96da5df362a0143a197ac0b90ad39 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/spryker-docs/deploys/6800c1be7f14fc0008252f39 |
author_association: NONE