fix: link form-item label to field via aria-labelledby

[vursen]

Description

The PR makes screen readers announce the form-item label when tabbing to the first field inside the item. This is achieved by linking the label with the field via the aria-labelledby attribute on:

• the ARIA target element when the field specifies the ariaTarget property (that typically refers to a slotted input)
• the field element itself otherwise

Fixes #1145

Type of change

• Feature

Checklist

• I have read the contribution guide: https://vaadin.com/docs-beta/latest/guide/contributing/overview/
• I have added a description following the guideline.
• The issue is created in the corresponding repository and I have referenced it.
• I have added tests to ensure my change is effective and works as intended.
• New and existing tests are passing locally with my change.
• I have performed self-review and corrected misspellings.

[vursen]

I realized that the feature is not fully completed yet. In the Designer, it is possible to dynamically replace the label with a new one as well as fields can be re-arranged or replaced so that the label id should be properly unlinked in the case of the order change or the removal of a field. All this will presumably require more observers.

[vursen]

I realized that the feature is not fully completed yet. In the Designer, it is possible to dynamically replace the label with a new one as well as fields can be re-arranged or replaced so that the label id should be properly unlinked in the case of the order change or the removal of a field. All this will presumably require more observers.

On the other hand, this is probably not a significant problem for the user since it turns out that the form-item label accessibility can be only violated temporarily, as long as constructing a View in the Designer. Note, as a result of the Designer, there is always a static View where every field has its static place and nothing changes dynamically.

From that perspective, the dynamic re-arranging of fields is probably not necessary to be supported because the feature targets only single field form-items, while supporting dynamic adding a label still seems useful.

[web-padawan]

From that perspective, the dynamic re-arranging of fields is probably not necessary to support

I agree it might bring unnecessary complexity. Let's not aim to cover all the possible edge cases.
Please revert the logic in a separate commit so we can compare the diff.

[vursen]

Pushed b557ead where I simplified the form-item a little bit in a way that it doesn't care anymore about cleaning the label id and aria-labelledby for removed nodes since I considered such a behavior worthless for the real applications: it can possibly violate the accessibility only in the Designer and only for as long as a View is being constructed.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[vaadin-bot]

Hi @vursen , this commit cannot be picked to 22.0 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick ffe5d0d
error: could not apply ffe5d0d... fix: link form-item label to field via aria-labelledby (#3088)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add ' or 'git rm '
hint: and commit the result with 'git commit'

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.alpha1 and is also targeting the upcoming stable 23.0.0 version.