feat: accessibility improvements #1694

LucasHengelhaupt · 2024-07-04T10:07:46Z

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)
add missing <legend>-elements to form fieldsets (WCAG 1.3.1 - Info and Relationships)
improve keyboard navigation and accessibility
- 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)
- 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)
add password visibility toggle following Microsoft Edge guidelines, use dedicated password component and update error indicator icons

Does this PR Introduce a Breaking Change?

[x] Yes

Open Issues

[ ] check changes of the wishlist feature: #1590 (esp. animated buttons on PDP and "account.wishlists.shared_wishlist.error")
[ ] check b2c favicon