[Accordion]: accessibility issues related to the component

[NatalliaAlieva]

Case №1

Description

Component "Accordion" doesn't have adaptation design.

Steps to Reproduce

1. Open Accordion component from mobile device.
2. Move to Property Explorer.
3. Set children=Marked up content.
4. Expand accordion located on the right side.

Actual result

When the width of the accordion field is reduced, the buttons are compressed, they become different sizes, and the text on the buttons is difficult to read.

Expected result

When the width of the accordion field is reduced, the buttons move one under the other - need to be clarified with designers. (WGAG 1.4.10)

Case №2

Description

Pressing Space on the accordion header should not change screen position

Precondition

Screen Reader is ON or OFF

Steps to Reproduce

1. Open Accordion component.
2. Using Tab key focus any of the presented Accordions examples.
3. Press Space key.

Actual Result

Section collapsed or expanded and screen position scrolled down.

https://github.com/epam/UUI/assets/57751283/20fc83ff-472f-48c9-9148-fd11c3f1abf9

Expected Result

Pressing Space on the accordion header should only collapse/expand the section. The screen position should remain the same. Failed WCAG Checkpoint: 2.1.1 Keyboard (Level A) https://www.w3.org/TR/WCAG21/#keyboard

[NatalliaAlieva]

Case №1 is fixed as follows: the buttons remain nearby, but their names are shortened if necessary, symbols that do not fit are hidden behind the ellipsis "...".

[NatalliaAlieva]

Released in 5.8.0 ver.