**Summary**
This PR improves web accessibility in Flutter by separating hint from
label in the semantics engine and exposing them via ARIA attributes. The
hint is set using aria-description (or aria-describedby as a fallback
for browsers that do not support aria-description).
**Details**
Hint separation:
The hint is exposed via aria-description if supported, or via
aria-describedby with a hidden node as a fallback.
Browser compatibility:
Uses feature detection to choose between aria-description and
aria-describedby.
Test coverage:
Added/updated tests to verify correct ARIA attribute behavior and
fallback logic.
**How to verify**
All relevant tests pass (semantics_test.dart, semantics_text_test.dart).
**Motivation**
This change brings Flutter web closer to accessibility best practices
and ARIA standards, improving the experience for users of assistive
technologies.
**Before/After Change**
before: https://before-change-hint.web.app/
after: https://after-change-hint.web.app/
after(fallback to aria-describedby):
https://after-change-hint-fallback.web.app/
**Issues fixed**
https://github.com/flutter/flutter/issues/162140
**Note**
Some focus-related tests (e.g., incrementable sends focus events) are
failing, but these failures are also present on the main branch and are
unrelated to the ARIA label/hint changes in this PR.
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
---------
Co-authored-by: Mouad Debbar <mouad.debbar@gmail.com>
Update documentation for `Size` and `Rect` classes in geometry.dart to
correct references for `centerRight` and `bottomCenter` methods.
Co-authored-by: stuuupidcat <stuuupidcat.3@gmail.com>
This adds a debugging utility that allows us to dump counts of the live
skwasm objects in debug mode. This is useful for understanding memory
leaks.
This is not code that runs in production or affects end users, so I'm
not bothering to write specific unit tests for this functionality.
---------
Co-authored-by: Kevin Moore <kevmoo@users.noreply.github.com>
Nearly all parts of the Impeller rendering pipeline now rely on DlPath
and PathSource objects for their path description needs. The impeller
path only exists for impeller's unit tests and benchmarks to have a
local way to construct paths. We implement path construction for the
DlPath object via DlPathBuilder which makes the impeller family of path
objects functionally obsolete and so they are now deleted.
Reduce the number of places where we convert flutter paint to DLpaint
and remove unused tonic overrides. Also does a pass on dl_paint/builder
to remove places we accidentally incremented/decrement shared_ptr ref
counts
<!-- start_original_pr_link -->
Reverts: flutter/flutter#165531
<!-- end_original_pr_link -->
<!-- start_initiating_author -->
Initiated by: matanlurey
<!-- end_initiating_author -->
<!-- start_revert_reason -->
Reason for reverting: Breaks google client tests
<!-- end_revert_reason -->
<!-- start_original_pr_author -->
Original PR Author: ash2moon
<!-- end_original_pr_author -->
<!-- start_reviewers -->
Reviewed By: {chunhtai, reidbaker, hannah-hyj}
<!-- end_reviewers -->
<!-- start_revert_body -->
This change reverts the following previous change:
Resolves partly https://github.com/flutter/flutter/issues/165510
**Context:** This issue originates from
https://github.com/flutter/flutter/issues/99715, where it was reported
that `liveRegion` alone was insufficient for announcing form validation
errors. While `liveRegion` announces the first error encountered,
subsequent submissions with the same error message on Android would not
trigger a re-announcement.
**Original Solution:** Pull request
https://github.com/flutter/flutter/pull/123373 addressed this by
implementing the `announce` event to ensure error messages were
consistently announced, even for repeated submissions.
**Native Android Behavior (Jetpack Compose):** In native Android
development using Jetpack Compose, setting the `isError` property of a
`TextField` to `true` triggers Talkback to announce "Error invalid
input." This announcement occurs *only* on the initial change to the
error state. Subsequent errors, even if the `isError` property remains
`true`, are not re-announced. This behavior closely mirrors the
functionality of `liveRegion`, with the key difference being that
`liveRegion` also announces the specific error text, in addition to the
general error state. Testing in a native Jetpack Compose application
confirms this behavior and provides a valuable comparison point against
the current Flutter form example.
**Suggested Action:** **Fork** the behavior in
https://github.com/flutter/flutter/pull/123373. Reinstate the use of
`liveRegion` for error announcements within `widgets/Form` for Android
and keep other platforms the same.
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
If you need help, consider asking for advice on the #hackers-new channel
on [Discord].
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
<!-- end_revert_body -->
Co-authored-by: auto-submit[bot] <flutter-engprod-team@google.com>
**Description**
This pull request removes the unnecessary setAriaRole('dialog') fallback
in the SemanticRoute class within the Flutter web engine. This line was
an old fallback and is no longer needed
**Before**
https://dialog-0505-before.web.app/
**After**
https://dialog-050502-after.web.app/
**Issue Fixed**
This PR addresses GitHub Issue #168247, which proposes reconsidering the
application of role="dialog" to arbitrary routes.
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [ ] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
This produces a build of Skwasm that works on Firefox and Safari. This
means we use `SkAnimatedImage` for animated gifs and webps and use
builtin ICU data in Skia.
I have unit test suites for Safari and Firefox with dart2wasm and both
`ui` and `engine` test sets. However, there are a few issues with
running these on CI:
* Safari+dart2wasm doesn't work yet until the CI bots are upgraded to
macOS 15, so these have been disabled on CI for now (but you can run the
unit test suite locally).
* Firefox+ui doesn't work because our Linux bots have no GPU and
therefore no WebGL2 support, so that one is disabled. Firefox+dart2wasm
with the `engine` suite is enabled on CI though.
I did make some changes to the host page for our unit test harness so
that Safari actually works though. Even though we're not running on CI,
you can still run locally if you have macOS 15.
In this PR:
- `felt build --experimental-webparagraph` builds a 3rd variant of
CanvasKit to be used for `WebParagraph`.
- `felt test --suite=chrome-dart2js-experimental-webparagraph-ui` runs
`test/ui/` tests against `WebParagraph`.
- `felt test --suite=chrome-dart2js-experimental-webparagraph-ui` runs
Chrome with the extra flag:
- `--enable-experimental-web-platform-features`
In the future:
- Upgrade to Chrome@133.0.6943.53 or above.
- Actual implementation and tests of WebParagraph coming in
https://github.com/flutter/flutter/pull/167559
- Run the `chrome-dart2js-experimental-webparagraph-ui` suite in CI.
- Trim the new experimental build of CK to realize the reduction in
size.
Previously, mnemonics specified in templates that used compiled_action
and compiled_action_foreach would not be forwarded. This made actions
like ImpellerC invocation unable to tag themselves. As Ninja builds
progressed, only a mysterious ACTION label would be emitted for all
ImpellerC edges. Now, the edges tag themselves.
Attempt to speed up vulkan startup by ensuring vulkan driver
initialization happens on raster thread. Prev. we immediately
initialized the impeller::Context, unfortunately setting up the vulkan
context can take upwards of 100ms. This time is running on the platform
thread and blocking startup.
Instead, I attempt to hide/defer as much as possible what backend is
being used - this requires us to access the impeller context via a
shared_future in some cases instead of immediately knowing it is valid.
<!-- start_original_pr_link -->
Reverts: flutter/flutter#167527
<!-- end_original_pr_link -->
<!-- start_initiating_author -->
Initiated by: gmackall
<!-- end_initiating_author -->
<!-- start_revert_reason -->
Reason for reverting: failing postsubmit `Linux_mokey
flutter_engine_group_performance`
<!-- end_revert_reason -->
<!-- start_original_pr_author -->
Original PR Author: jonahwilliams
<!-- end_original_pr_author -->
<!-- start_reviewers -->
Reviewed By: {jason-simmons}
<!-- end_reviewers -->
<!-- start_revert_body -->
This change reverts the following previous change:
Attempt to speed up vulkan startup by ensuring vulkan driver
initialization happens on raster thread. Prev. we immediately
initialized the impeller::Context, unfortunately setting up the vulkan
context can take upwards of 100ms. This time is running on the platform
thread and blocking startup.
Instead, I attempt to hide/defer as much as possible what backend is
being used - this requires us to access the impeller context via a
shared_future in some cases instead of immediately knowing it is valid.
<!-- end_revert_body -->
Co-authored-by: auto-submit[bot] <flutter-engprod-team@google.com>
Attempt to speed up vulkan startup by ensuring vulkan driver
initialization happens on raster thread. Prev. we immediately
initialized the impeller::Context, unfortunately setting up the vulkan
context can take upwards of 100ms. This time is running on the platform
thread and blocking startup.
Instead, I attempt to hide/defer as much as possible what backend is
being used - this requires us to access the impeller context via a
shared_future in some cases instead of immediately knowing it is valid.
This includes a fix for a race seen in
EmbedderTest.PlatformThreadIsolatesWithCustomPlatformTaskRunner
The implementaion of MergedPlatformUIThread::kMergeAfterLaunch required
changing the interface of the TaskObserverAdd/TaskObserverRemove
callbacks so that TaskObserverAdd returned the TaskQueueId where the
observer was added. That TaskQueueId would later be given to
TaskObserverRemove.
The original implementation of this PR updated the embedder library's
implementation of TaskObserverAdd to return TaskQueueId::kInvalid to
signal that the observer was not added. However, this conflicted with
the embedder's EmbedderTaskRunner, whose implementation of
GetTaskQueueId returns TaskQueueId::kInvalid as a placeholder.
This PR reverts the embedder's TaskObserverAdd/TaskObserverRemove to the
original implementation which adds the observer to the current thread's
message loop and does not call GetTaskQueueId.
See https://github.com/flutter/flutter/issues/167418
Fixes https://github.com/flutter/flutter/issues/155265
This includes 2 fixes:
* When the window/iframe loses focus, close the text input connection
instead of grabbing the focus again.
* Do not enable semantics using the placeholder when moving focus using
the "Tab" key.
Bonus: remove the no longer necessary `ViewFocusBinding.isEnabled`
(doesn't fix any issues, just a clean-up).
---------
Co-authored-by: Mouad Debbar <mdebbar@google.com>
If settings.merged_platform_ui_thread is set to kMergeAfterLaunch, then
the engine will be started on the UI thread. After engine setup
completes and the Dart isolate is loaded, the UI task runner will be
merged into the platform thread and all future Dart execution will run
on the platform thread.
This makes it possible for other work to run on the platform thread
while the engine starts.
See https://github.com/flutter/flutter/issues/163064
It turns out `postMessage` is quite a bit more expensive than
`queueMicrotask`. Before dynamic threading, this is what we actually
did, and perf regressed when we started using `postMessage` instead.
This fixes https://github.com/flutter/flutter/issues/166905
This reverts commit 2fc716d, and updates the cross-axis size of the
`_scrollOverflowElement` to be 1px (non-zero), so it is taken into
account by the scrollable elements scrollHeight.
Fixes#160217
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
---------
Co-authored-by: Renzo Olivares <roliv@google.com>
Skwasm was the only renderer that enforced that the root layer cannot be
popped. However, canvaskit and the native engines all allow popping the
root layer. It's just a noop.
Also, `EngineSceneBuilder` called `currentBuilder.build()` before
checking if the layer that's being popped is a root layer. This means
skwasm would call `rootLayer.build()` twice when push/pop are
unbalanced. It is called once on the last `pop()` on the root layer.
Then it is called again in `EngineSceneBuilder.build`.
Not a guarantee, but this may help reduce the skwasm error rates from
DevTools that look like this:
```
org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/error_utils.dart 130:15 | _throwIndexError
org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/error_utils.dart 24:7 | checkIndexBCE
org-dartlang-sdk:///lib/_engine/engine/scene_builder.dart 458:53 | pop
file:///b/s/w/ir/x/w/rc/flutter/packages/flutter/lib/src/rendering/layer.dart 1520:13 | addToScene
file:///b/s/w/ir/x/w/rc/flutter/packages/flutter/lib/src/rendering/layer.dart 721:5 | _addToSceneWithRetainedRendering
file:///b/s/w/ir/x/w/rc/flutter/packages/flutter/lib/src/rendering/layer.dart 1519:5 | addToScene
file:///b/s/w/ir/x/w/rc/flutter/packages/flutter/lib/src/rendering/layer.dart 721:5 | _addToSceneWithRetainedRendering
```
Currently Impeller asks incoming paths to convert themselves into the
impeller::Path class before tessellating their outlines. This wastes
conversion time when the path is only needed to iterate the path
segments. We now tessellate them directly from a path segment dispatcher
saving the conversion cost.
<!-- start_original_pr_link -->
Reverts: flutter/flutter#165589
<!-- end_original_pr_link -->
<!-- start_initiating_author -->
Initiated by: Renzo-Olivares
<!-- end_initiating_author -->
<!-- start_revert_reason -->
Reason for reverting: breaking internal tests
<!-- end_revert_reason -->
<!-- start_original_pr_author -->
Original PR Author: Renzo-Olivares
<!-- end_original_pr_author -->
<!-- start_reviewers -->
Reviewed By: {Piinks}
<!-- end_reviewers -->
<!-- start_revert_body -->
This change reverts the following previous change:
Currently when using a `CustomScrollView`, screen readers cannot list or
move focus to elements that are outside the current Viewport and cache
extent because we do not create semantic nodes for these elements.
This change introduces `SliverEnsureSemantics` which ensures its sliver
child is included in the semantics tree, whether or not it is currently
visible on the screen or within the cache extent. This way screen
readers are aware the elements are there and can navigate to them /
create accessibility traversal menus with this information.
* Under the hood a new flag has been added to `RenderSliver` called
`ensureSemantics`. `RenderViewportBase` uses this in its
`visitChildrenForSemantics` to ensure a sliver is visited when creating
the semantics tree. Previously a sliver was not visited if it was not
visible or within the cache extent. `RenderViewportBase` also uses this
in `describeSemanticsClip` and `describeApproximatePaintClip` to ensure
a sliver child that wants to "ensure semantics" is not clipped out if it
is not currently visible in the viewport or outside the cache extent.
* `RenderSliverMultiBoxAdaptor.semanticBounds` now leverages its first
child as an anchor for assistive technologies to be able to reach it if
the Sliver is a child of `SliverEnsureSemantics`. If not it will still
be dropped from the semantics tree.
* `RenderProxySliver` now considers child overrides of `semanticBounds`.
On the engine side we move from using a joystick method to scroll with
`SemanticsAction.scrollUp` and `SemanticsAction.scrollDown` to using
`SemanticsAction.scrollToOffset` completely letting the browser drive
the scrolling with its current dom scroll position "scrollTop" or
"scrollLeft". This is possible by calculating the total quantity of
content under the scrollable and sizing the scroll element based on
that.
<details open><summary>Code sample</summary>
```dart
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
/// Flutter code sample for [SliverEnsureSemantics].
void main() => runApp(const SliverEnsureSemanticsExampleApp());
class SliverEnsureSemanticsExampleApp extends StatelessWidget {
const SliverEnsureSemanticsExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(home: SliverEnsureSemanticsExample());
}
}
class SliverEnsureSemanticsExample extends StatefulWidget {
const SliverEnsureSemanticsExample({super.key});
@override
State<SliverEnsureSemanticsExample> createState() =>
_SliverEnsureSemanticsExampleState();
}
class _SliverEnsureSemanticsExampleState
extends State<SliverEnsureSemanticsExample> {
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
backgroundColor: theme.colorScheme.inversePrimary,
title: const Text('SliverEnsureSemantics Demo'),
),
body: Center(
child: CustomScrollView(
semanticChildCount: 106,
slivers: <Widget>[
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 0,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Steps to reproduce',
style: theme.textTheme.headlineSmall,
),
),
const Text('Issue description'),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Expected Results',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Actual Results',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Code Sample',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Screenshots',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Logs',
style: theme.textTheme.headlineSmall,
),
),
],
),
),
),
),
),
),
SliverFixedExtentList(
itemExtent: 44.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Item $index'),
),
);
},
childCount: 50,
semanticIndexOffset: 1,
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 51,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Semantics(
header: true,
child: const Text('Footer 1'),
),
),
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 52,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Semantics(
header: true,
child: const Text('Footer 2'),
),
),
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 53,
child: Semantics(link: true, child: const Text('Link #1')),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 54,
child: OverflowBar(
children: <Widget>[
TextButton(
onPressed: () {},
child: const Text('Button 1'),
),
TextButton(
onPressed: () {},
child: const Text('Button 2'),
),
],
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 55,
child: Semantics(link: true, child: const Text('Link #2')),
),
),
),
SliverEnsureSemantics(
sliver: SliverSemanticsList(
sliver: SliverFixedExtentList(
itemExtent: 44.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Semantics(
role: SemanticsRole.listItem,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Second List Item $index'),
),
),
);
},
childCount: 50,
semanticIndexOffset: 56,
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 107,
child: Semantics(link: true, child: const Text('Link #3')),
),
),
),
],
),
),
);
}
}
// A sliver that assigns the role of SemanticsRole.list to its sliver child.
class SliverSemanticsList extends SingleChildRenderObjectWidget {
const SliverSemanticsList({super.key, required Widget sliver})
: super(child: sliver);
@override
RenderSliverSemanticsList createRenderObject(BuildContext context) =>
RenderSliverSemanticsList();
}
class RenderSliverSemanticsList extends RenderProxySliver {
@override
void describeSemanticsConfiguration(SemanticsConfiguration config) {
super.describeSemanticsConfiguration(config);
config.role = SemanticsRole.list;
}
}
```
</details>
Fixes: #160217
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
<!-- end_revert_body -->
Co-authored-by: auto-submit[bot] <flutter-engprod-team@google.com>
Currently when using a `CustomScrollView`, screen readers cannot list or
move focus to elements that are outside the current Viewport and cache
extent because we do not create semantic nodes for these elements.
This change introduces `SliverEnsureSemantics` which ensures its sliver
child is included in the semantics tree, whether or not it is currently
visible on the screen or within the cache extent. This way screen
readers are aware the elements are there and can navigate to them /
create accessibility traversal menus with this information.
* Under the hood a new flag has been added to `RenderSliver` called
`ensureSemantics`. `RenderViewportBase` uses this in its
`visitChildrenForSemantics` to ensure a sliver is visited when creating
the semantics tree. Previously a sliver was not visited if it was not
visible or within the cache extent. `RenderViewportBase` also uses this
in `describeSemanticsClip` and `describeApproximatePaintClip` to ensure
a sliver child that wants to "ensure semantics" is not clipped out if it
is not currently visible in the viewport or outside the cache extent.
* `RenderSliverMultiBoxAdaptor.semanticBounds` now leverages its first
child as an anchor for assistive technologies to be able to reach it if
the Sliver is a child of `SliverEnsureSemantics`. If not it will still
be dropped from the semantics tree.
* `RenderProxySliver` now considers child overrides of `semanticBounds`.
On the engine side we move from using a joystick method to scroll with
`SemanticsAction.scrollUp` and `SemanticsAction.scrollDown` to using
`SemanticsAction.scrollToOffset` completely letting the browser drive
the scrolling with its current dom scroll position "scrollTop" or
"scrollLeft". This is possible by calculating the total quantity of
content under the scrollable and sizing the scroll element based on
that.
<details open><summary>Code sample</summary>
```dart
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
/// Flutter code sample for [SliverEnsureSemantics].
void main() => runApp(const SliverEnsureSemanticsExampleApp());
class SliverEnsureSemanticsExampleApp extends StatelessWidget {
const SliverEnsureSemanticsExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(home: SliverEnsureSemanticsExample());
}
}
class SliverEnsureSemanticsExample extends StatefulWidget {
const SliverEnsureSemanticsExample({super.key});
@override
State<SliverEnsureSemanticsExample> createState() =>
_SliverEnsureSemanticsExampleState();
}
class _SliverEnsureSemanticsExampleState
extends State<SliverEnsureSemanticsExample> {
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
backgroundColor: theme.colorScheme.inversePrimary,
title: const Text('SliverEnsureSemantics Demo'),
),
body: Center(
child: CustomScrollView(
semanticChildCount: 106,
slivers: <Widget>[
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 0,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Steps to reproduce',
style: theme.textTheme.headlineSmall,
),
),
const Text('Issue description'),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Expected Results',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Actual Results',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Code Sample',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Screenshots',
style: theme.textTheme.headlineSmall,
),
),
Semantics(
header: true,
headingLevel: 3,
child: Text(
'Logs',
style: theme.textTheme.headlineSmall,
),
),
],
),
),
),
),
),
),
SliverFixedExtentList(
itemExtent: 44.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Item $index'),
),
);
},
childCount: 50,
semanticIndexOffset: 1,
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 51,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Semantics(
header: true,
child: const Text('Footer 1'),
),
),
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 52,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Semantics(
header: true,
child: const Text('Footer 2'),
),
),
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 53,
child: Semantics(link: true, child: const Text('Link #1')),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 54,
child: OverflowBar(
children: <Widget>[
TextButton(
onPressed: () {},
child: const Text('Button 1'),
),
TextButton(
onPressed: () {},
child: const Text('Button 2'),
),
],
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 55,
child: Semantics(link: true, child: const Text('Link #2')),
),
),
),
SliverEnsureSemantics(
sliver: SliverSemanticsList(
sliver: SliverFixedExtentList(
itemExtent: 44.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Semantics(
role: SemanticsRole.listItem,
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Second List Item $index'),
),
),
);
},
childCount: 50,
semanticIndexOffset: 56,
),
),
),
),
SliverEnsureSemantics(
sliver: SliverToBoxAdapter(
child: IndexedSemantics(
index: 107,
child: Semantics(link: true, child: const Text('Link #3')),
),
),
),
],
),
),
);
}
}
// A sliver that assigns the role of SemanticsRole.list to its sliver child.
class SliverSemanticsList extends SingleChildRenderObjectWidget {
const SliverSemanticsList({super.key, required Widget sliver})
: super(child: sliver);
@override
RenderSliverSemanticsList createRenderObject(BuildContext context) =>
RenderSliverSemanticsList();
}
class RenderSliverSemanticsList extends RenderProxySliver {
@override
void describeSemanticsConfiguration(SemanticsConfiguration config) {
super.describeSemanticsConfiguration(config);
config.role = SemanticsRole.list;
}
}
```
</details>
Fixes: #160217
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
---------
Co-authored-by: Renzo Olivares <roliv@google.com>
