Screen does not scroll correctly when using an Accessibility Screen Reader #104036
Description
Internal: b/246320262
Steps to Reproduce
Given
-
Flutter web application with content that is greater than the height of the view port
-
Using a Screen Reader ( [NVDA](https://www.nvaccess.org/download/), version: 2021.3.3) to navigate
-
Browsers
- Google Chrome: Version 101.0.4951.67 (Official Build) (64-bit)
- Microsoft Edge: Version 101.0.1210.39 (Official build) (64-bit)
-
Flutter (3.0.0, 2.10.3)
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.0, on Microsoft Windows [Version 10.0.19043.1706], locale en-NZ)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Professional 2019 16.11.5)
[√] Android Studio (version 2021.2)
[√] IntelliJ IDEA Ultimate Edition (version 2022.1)
[√] VS Code (version 1.67.1)
[√] Connected device (3 available)
! Device emulator-5554 is offline.
[√] HTTP Host Availability- No issues found!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.2, on Microsoft Windows [Version 10.0.19043.1706], locale en-NZ)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Professional 2019 16.11.5)
[√] Android Studio (version 2021.2)
[√] IntelliJ IDEA Ultimate Edition (version 2022.1)
[√] VS Code (version 1.67.1)
[√] Connected device (3 available)
[√] HTTP Host Availability- No issues found!
When
- You run the application and adjust the browser view port to 350px
- Then navigate reading with NVDA by pressing “Arrow Down” to read the whole page
Then
- You’ll notice that the page scrolling jumps around, and doesn’t scroll with the items that are being read out.
Expected results:
Page to scroll with the navigation of the screen reader, as it does for other web pages
Actual results:
The page doesn't scroll, and the scrollbar jumps, but doesn't scroll down.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
RendererBinding.instance.setSemanticsEnabled(true);
return MaterialApp(
title: 'Flutter NVDA pageflap',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Screen(),
);
}
}
class Screen extends StatelessWidget {
const Screen({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
maxWidth: 300,
),
padding: const EdgeInsets.all(50.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
'Adjust browser window height to: 350',
),
Text(
'Top. current screen height: ${MediaQuery.of(context).size.height}',
),
const Text(
'Start NVDA, use "Arrow Down" to read the text.',
),
const Text(
'Notice how the scroll jumps',
),
const Text(
'The page should scroll with the reading',
),
const Text(
'1. Start. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 1. End.'),
const Text(
'2. Start. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 2. End'),
const Text(
'3. Start. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 3. End'),
const Text(
'4. Start. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 4. End.'),
const Text(
'Bottom.',
),
],
),
),
);
},
),
);
}
}