feat: accessibility improvements

[LucasHengelhaupt]

This PR adds accessibility improvements.

PR Type

[x] Feature

What Is the Current Behavior?

Currently, the Intershop Progressive Web App (PWA) has accessibility issues related to color contrast, link identification, tab-focus visibility, semantic order of HTML elements, missing ARIA attributes, touch target sizes and others.

What Is the New Behavior?

The following accessibility issues are fixed:

• add ARIA, lang and title attributes
  • add aria-label to language switch toggle, mini-cart toggle, search input, sorting selectbox, product compare link, recently viewed link, product brand link (WCAG 2.5.3 - Label in Name & WCAG 3.3.2 - Labels or Instructions) and to star-rating on product detail page (WCAG 1.1.1 - Non-text Content)
  • add aria-haspopup, aria-expanded and aria-controls to mini-cart (WCAG 4.1.2 - Name, Role, Value)
  • add aria-required, aria-invalid to form fields (WCAG 3.3.1 - Error Identification) and aria-describedby to form fields with related error test and / or descriptions (WCAG 3.3.2 - Labels or Instructions, based on changes to ngx-formly/bootstrap)
  • add aria-hidden to the "*" character of required fields
  • add corresponding lang attribute to each language select option in the header language switch (WCAG 3.1.2 - Language of Parts)
  • change language options to display the full name (e.g. "English") instead of the shortened version (e.g. "EN") in the header language switch (WCAG 2.5.3 - Label in Name)
  • add title attribute to buttons only when they are used as an icon (WCAG 1.1.1 - Non-text Content)
  • remove invalid role="img" attribute from logo in the header (WCAG 4.1.2 - Name, Role, Value)
• replace <div role="main"> with <main> element for better semantics (WCAG 2.4.1 - Bypass Blocks)
• update tab-focus visibility to use browser's default focus styling (WCAG 2.4.7 - Focus Visible)
• reorder headings to follow a correct, sequentially-descending hierarchy (WCAG 1.3.1 - Info and Relationships)
• adjust colors to meet sufficient contrast ratio requirements (WCAG 1.4.3 - Contrast (Minimum) & WCAG 1.4.11 - Non-text Contrast)
• enlarge touch targets for links (WCAG 2.5.8 - Target Size (Minimum))
• ensure links are distinguishable without relying on color alone, update underline behavior (WCAG 2.4.4 - Link Purpose (In Context))
• add "Skip to main content" link (WCAG 2.4.1 - Bypass Blocks)
• set focus to first invalid form field (WCAG 3.3.1 - Error Identification)
• add missing <legend>-elements to form fieldsets (WCAG 1.3.1 - Info and Relationships)
• make popover elements keyboard accessible with TAB navigation (WCAG 2.1.1 - Keyboard)
• improve TAB key navigation in mini basket by using ngbDropdown (WCAG 2.1.1 - Keyboard)
• add password visibility toggle following Microsoft Edge guidelines, use dedicated password component and update error indicator icons
• fix country select box to keep tab-focus after selecting a country and be operable via arrow keys (WCAG 2.1.1 - Keyboard & WCAG 2.4.7 - Focus Visible)

Does this PR Introduce a Breaking Change?

[x] Yes

Other Information

AB#97976