[web] scale semantic text elements to match the desired focus ring size

[yjbanov]

Due to https://g-issues.chromium.org/issues/40875151?pli=1&authuser=0 and a lack of an ARIA role for plain text nodes (after the removal of role="text" in WebKit recently), there is no way to customize the size of the screen reader focus ring for a plain text element. The focus ring always tightly hugs the text itself.

A workaround implemented in this PR is to match the size of the text exactly to the desired focus ring size. This is done by measuring the size of the text in the DOM, then scaling it both vertically and horizontally to match the size requested by the framework for the corresponding semantics node.

To avoid serious performance penalty, the following optimizations were included:

• Nodes that are satisfiable by just an aria-label do not need this workaround, and are skipped.
• Nodes that must use DOM text (e.g. links, buttons) but have ARIA roles that size them based on the element, do not need this workaround, and are skipped.
• Nodes that do need the workaround are first measured in a single batch, incurring only one page reflow. Then they are all updated in a single batch without taking any further DOM measurements. This ensures that no matter how many text spans are rendered, only one reflow is needed to measure them all.
• Nodes that need the workaround cache the previous label and size, and if they do not change, the size is not updated.

Other changes:

• Rename LeafLabelRepresentation to LabelRepresentation, because labels also apply to non-leaf nodes (e.g. aria-label may be applied to a container).
• Rename labelRepresentation to preferredLabelRepresentation, because a particular label representation cannot be guaranteed. A node that currently looks like a leaf text node may turn out to be an empty container, and after adding children to it must switch from using DOM text to an aria-label. Therefore, role manager only specify a preference, but LabelAndValue ultimately decides which representation is usable.
• Introduce void initState() in PrimaryRoleManager to be used for one-time initialization of state and DOM structure after all objects that are in a one-to-one relationship with each other create all the references needed to establish that relationship (PrimaryRoleManager, SemanticsObject, element, owner, etc). This is not available at the time the constructors are called.

Fixes flutter/flutter#146774.

[mdebbar]

Is this still needed after you apply the scaling?

If you make the span inline-block and you scale it to the desired size, I don't see why text-align: justify is needed. Am I missing something?

[yjbanov]

Let me double-check this. This is because I observed offsetWidth != text width when text broke up into multiple lines.

[yjbanov]

Confirmed that justify is needed: https://jsfiddle.net/yjbanov/mhgdrzek/13/

On my laptop I see this:

Take a look at parent widths 50px, 60px, and 70px. The text is laid out identically, and the screen reader width is the same for all, tightly hugging the text. However, the measured width (based on offsetWidth) is different. If I add text-align: justify, the aaa bbb will stretch the full width of the paragraph, matching offsetWidth.

[mdebbar]

Suggestion: use destructuring.

Suggested change

	final SizedSpanRepresentation representation = measurement.representation;
	final double domWidth = measurement.domSize.width;
	final double domHeight = measurement.domSize.height;
	final ui.Size targetSize = measurement.targetSize;
	final _Measurement(
	:SizedSpanRepresentation representation,
	:double domWidth,
	:double domHeight,
	:ui.Size targetSize,
	) = measurement;

[yjbanov]

Can't. measurement.domSize.width doesn't destructure.

[mdebbar]

Oops! It can still be done like this:

Suggested change

	final SizedSpanRepresentation representation = measurement.representation;
	final double domWidth = measurement.domSize.width;
	final double domHeight = measurement.domSize.height;
	final ui.Size targetSize = measurement.targetSize;
	final _Measurement(
	:SizedSpanRepresentation representation,
	domSize: ui.Size(width: double domWidth, height: double domHeight),
	:ui.Size targetSize,
	) = measurement;

but I think it's less readable than what you had originally.

[mdebbar]

[mdebbar]

This is also possible:

Suggested change

	LabelRepresentation.ariaLabel => AriaLabelRepresentation._(owner),
	LabelRepresentation.domText => DomTextRepresentation._(owner),
	LabelRepresentation.sizedSpan => SizedSpanRepresentation._(owner),
	ariaLabel => AriaLabelRepresentation._(owner),
	domText => DomTextRepresentation._(owner),
	sizedSpan => SizedSpanRepresentation._(owner),