Collapsible elements need aria-controls and aria-expanded [work on PR #14880/Windows]

[VGRAJED]

Product tabs in Product Details Page and Product facets in Product Listing Page need aria attributes such as aria-controls and aria-expanded.

Probably a service and directive will be helpful to track state of aria-expanded

[developpeurweb]

Adding only aria-controls and aria-expanded will improve the current solution, but will not suffice for full Screen Reader support. It should be complemented with role, aria-label and aria-selected.

My recommendation is to change the Accessible Pattern of both components to fully align with ARIA best practices regarding Keyboard Support and correct Screen Reader narration.

Roles definition and meaningful labelling are crucial in both cases.

PDP Tab group

ARIA Tab group
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

Notes:

• The current arrangement switches from Tabs to Accordions in mobile.
• Future designs of this area contemplates an Accordion arrangement.
• Considering the previous statements, this makes it hard to change the accessible pattern. The ideal solution would be if we could use all 4 arrow keys and make it work for both patterns.

PLP Facets

Combine ARIA design patterns for both, Accordion and Checkbox

ARIA Accordion:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

ARIA Checkbox:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html

Notes:

• Current checkboxes are in fact links, they need a role and aria-checked.
• Currently, the focus lock works by hitting RETURN on the selected group once and then ESC 2x to unlock. This is not a known pattern and falls into the "Custom Widget" category, therefore descriptions and instructions for Screen Readers users should be added otherwise by not communicating the 2x ESC trick the user will be trapped, or change the Accessible Pattern to a known pattern.
• Related ticket: ESC Key potential interaction conflict with Screen Readers #7180

[Xymmer]

best effort for 4.0, or put in 4.x; or split into 2 tickets