Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web] Fix semantic node order for webkit #23601

Merged
ferhatb merged 11 commits into from
Jan 14, 2021
Merged

[web] Fix semantic node order for webkit #23601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9f9d624
Fix semantic node order for webkit
ferhatb Jan 11, 2021
ad00d01
update test for ios
ferhatb Jan 11, 2021
286ee5c
Merge remote-tracking branch 'upstream/master' into voiceover_order
ferhatb Jan 11, 2021
c120aaa
fix test for non MacOs
ferhatb Jan 12, 2021
54799d2
Cleanup semantics positioning code
ferhatb Jan 12, 2021
1cb25d4
Change comment placement
ferhatb Jan 12, 2021
e394bb4
Remove unused import
ferhatb Jan 13, 2021
1a97a04
Merge remote-tracking branch 'upstream/master' into voiceover_order
ferhatb Jan 13, 2021
1b689f4
refactor element/container offsets
ferhatb Jan 13, 2021
753d2c8
Merge remote-tracking branch 'upstream/master' into voiceover_order
ferhatb Jan 13, 2021
b082026
Fix analyzer error
ferhatb Jan 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 37 additions & 38 deletions lib/web_ui/lib/src/engine/semantics/semantics.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -853,25 +853,9 @@ class SemanticsObject {
hasIdentityTransform &&
verticalContainerAdjustment == 0.0 &&
horizontalContainerAdjustment == 0.0) {
if (isDesktop) {
element.style
..removeProperty('transform-origin')
..removeProperty('transform');
} else {
element.style
..removeProperty('top')
..removeProperty('left');
}
_resetElementOffsets(element);
if (containerElement != null) {
if (isDesktop) {
containerElement.style
..removeProperty('transform-origin')
..removeProperty('transform');
} else {
containerElement.style
..removeProperty('top')
..removeProperty('left');
}
_resetElementOffsets(containerElement);
}
return;
}
Expand Down Expand Up @@ -905,11 +889,15 @@ class SemanticsObject {
effectiveTransformIsIdentity = false;
}

if (!effectiveTransformIsIdentity) {
if (!effectiveTransformIsIdentity || isMacOrIOS) {
if (effectiveTransformIsIdentity) {
effectiveTransform = Matrix4.identity();
}
if (isDesktop) {
element.style
..transformOrigin = '0 0 0'
..transform = matrix4ToCssTransform(effectiveTransform);
..transform = (effectiveTransformIsIdentity ? 'translate(0px 0px 0px)'
: matrix4ToCssTransform(effectiveTransform));
} else {
// Mobile screen readers observed to have errors while calculating the
// semantics focus borders if css `transform` properties are used.
Expand All @@ -927,20 +915,13 @@ class SemanticsObject {
..height = '${rect.height}px';
}
} else {
_resetElementOffsets(element);
// TODO: https://github.com/flutter/flutter/issues/73347
if (isDesktop) {
element.style
..removeProperty('transform-origin')
..removeProperty('transform');
} else {
element.style
..removeProperty('top')
..removeProperty('left');
}
}

if (containerElement != null) {
if (!hasZeroRectOffset ||
isMacOrIOS ||
verticalContainerAdjustment != 0.0 ||
horizontalContainerAdjustment != 0.0) {
final double translateX = -_rect!.left + horizontalContainerAdjustment;
Expand All @@ -955,15 +936,33 @@ class SemanticsObject {
..left = '${translateX}px';
}
} else {
if (isDesktop) {
containerElement.style
..removeProperty('transform-origin')
..removeProperty('transform');
} else {
containerElement.style
..removeProperty('top')
..removeProperty('left');
}
_resetElementOffsets(containerElement);
}
}
}

// On Mac OS and iOS, VoiceOver requires left=0 top=0 value to correctly
// handle order. See https://github.com/flutter/flutter/issues/73347.
static void _resetElementOffsets(html.Element element) {
if (isMacOrIOS) {
if (isDesktop) {
element.style
..transformOrigin = '0 0 0'
..transform = 'translate(0px, 0px)';
} else {
element.style
..top = '0px'
..left = '0px';
Copy link
Contributor

@yjbanov yjbanov Jan 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if we use top/left in all browsers?

Copy link
Contributor Author

@ferhatb ferhatb Jan 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea was that layout faster with transform.

}
} else {
if (isDesktop) {
element.style
..removeProperty('transform-origin')
..removeProperty('transform');
} else {
element.style
..removeProperty('top')
..removeProperty('left');
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions lib/web_ui/lib/src/engine/util.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,9 +446,9 @@ const Set<String> _genericFontFamilies = <String>{
/// For iOS, default to -apple-system, where it should be available, otherwise
/// default to Arial. BlinkMacSystemFont is used for Chrome on iOS.
final String _fallbackFontFamily =
_isMacOrIOS ? '-apple-system, BlinkMacSystemFont' : 'Arial';
isMacOrIOS ? '-apple-system, BlinkMacSystemFont' : 'Arial';

bool get _isMacOrIOS =>
bool get isMacOrIOS =>
operatingSystem == OperatingSystem.iOs ||
operatingSystem == OperatingSystem.macOs;

Expand All @@ -460,7 +460,7 @@ String? canonicalizeFontFamily(String? fontFamily) {
if (_genericFontFamilies.contains(fontFamily)) {
return fontFamily;
}
if (_isMacOrIOS) {
if (isMacOrIOS) {
// Unlike Safari, Chrome on iOS does not correctly fallback to cupertino
// on sans-serif.
// Map to San Francisco Text/Display fonts, use -apple-system,
Expand Down
Loading