After some investigation I have a solution that fixes the issue "screen readers will enter them, causing the same text to be repeated multiple times". However, I don't yet have a solution that fixes the "group" issue in Chrome. The issue is that browsers other than Safari do not support role="text", which works great in Safari. All other options I've tried would leads to other issues, such as:

Ignore the size of the element and size the focus ring to the text content, which is wrong. The HTML text size is irrelevant because Flutter renders into canvas, so the focus ring looks wrong.
Read out the same label multiple times.

So I will go with the following option:

<flt-semantics role="text" aria-label="the text of the label" style="...positioning and sizing..." />

This still reads "group" or "empty group" on Chrome, but it satisfies everything else:

The element is positioned and sized correctly.
The label text is read exactly once; no entering and leaving and reading the same thing over and over again.
On Safari the element behaves like a text node.

For now I will go with this solution and keep searching for a perfect one, if it exists.

[web]: Semantics differences between iOS/Android and Web #91914

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions