bug(a11y): sbb-form-field has an invisible focus step A4A#39

[WalkingOS]

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Bug type

Accessibility

It affects the following packages

Components

Which version of Lyne Components are you using

No response

Operating system

No response

Browser / Browser version

No response

Input mode

None

Additional settings

No response

What happened?

It seems like that you can focus something invisible inside the component in android talkback

Steps to reproduce the issue

1. try to focus some Element on the page
2. navigate to an input element inside a formfield
3. you will have an empty/invisible focus step

Relevant log output

No response

[MarioCastigliano]

From an initial analysis, we were unable to identify the cause of the bug. We will run further tests with the "debug node tree" feature enabled and update the issue if anything relevant emerges.

[MarioCastigliano]

Update: after a thorough analysis of the component, several attempts were made to achieve the goal of either removing the invisible step or making the step visible. Such attempts included:

• A partial refactoring of the component's structure
• A combination of aria attributes and/or roles
• The use of display: contents; on some of the elements that might currently be visible to the screen reader
• A more explicit management of tab indexes inside the component
• Any reasonable combination of the above Other possible solutions that have been considered include: the use of focusin and focusout listeners to manually direct the focus to the wanted element and overriding the shadowRoot.delegatesFocus property. Unfortunately, none of these approaches achieved the desired effect without compromising the component's UX on other platforms.