-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Steps to Reproduce
To reproduce as in the attached video you have to have Swedish as your locale in Windows 10. However, the test contains texts of 3 different locales and as web fails to communicate any of them, you should be able to reproduce it in some way regardless of the locale/language of your system. It very likely is possible to reproduce on Mac and Linux as well. I can reproduce it on iPad+Safari with VoiceOver.
flutter create bug_locale- replace lib/main.dart with code sample
flutter run -d chrome- Turn on the screen reader. On windows 10 the shortcut is Win+Ctrl+Enter. If you use iPad/iOS you can ask Siri to turn on VoiceOver.
- Press Narrator key + W to have it read out the contents of the window (Narrator key on my system is Caps Lock and I don't think I've changed the default). If you use an iPad/iOS swipe down with two fingers for it to read out the content.
Expected results:
I expect that the screen reader is using the corresponding voice for the different texts. The texts them self try to convey this and in the sample code there are comments that state the expected language of each text. It is fine for the screen reader to use the system locale for annotations like window, button, link etc.
If I visit other websites like https://flutter.dev Windows Narrator is using an English voice to read out the content. (it uses the system default voice - Swedish - to announce annotations like "link", "image" etc., but content like "Flutter", "Multi-platform", "Development etc. is read out in English. )
On a technical side I expect the rendered dom tree to set lang attribute on the html or a high up node in body to the locale defined by MaterialApp and then leaf-content to have lang set based on the locale overrides I have made in the code. BBC has a short but useful article that explains this - see the HTML sub-heading.
Actual results:
Windows Narrator uses Swedish voice all through the video. In the beginning it says "fönsterruta" which is swedish for window and that is expected and possible also using Swedish to announce the tab title "Flutter Demo". But the content starting with Hello World should be according to what is defined in dart.
https://user-images.githubusercontent.com/4630670/155220124-4fa13ead-caf8-4bea-bf7a-c2803babfa6a.mp4
For reference, here is Flutter.dev where it uses English for content:
https://user-images.githubusercontent.com/4630670/155220504-c67ce585-9ac1-4bf7-8910-ffa9221104ee.mp4
Code sample - lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
supportedLocales: const [
Locale('en', 'UK'),
],
locale: const Locale('en', 'UK'),
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello World!'), // should be voiced with UK Engilsh voice (app default)
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Regular text without locale override. Should use UK voice.'), // should be vocied with UK English vocie (app default)
Container(height: 20.0),
const Text.rich(
TextSpan(children: [
TextSpan(text: 'UK text (no override). '), // should be vocied with UK English vocie (app default)
TextSpan(text: 'UK text (using override). ', locale: Locale('en', 'UK')), // should be voiced with UK English vocie
TextSpan(text: 'American text. ', locale: Locale('en', 'US')), // should be voiced with US English voice
TextSpan(text: 'Dansk text. ', locale: Locale('da', 'DK')), // should be voiced with Danish vocie
]),
),
Container(height: 20.0),
Localizations.override(context: context,
locale: const Locale('da', 'DK'),
child: const Text('Localizations.override på dansk.'), // should be voiced with Danish voice
),
],
),
),
);
}
}Logs
flutter analyze
Analyzing bug_locale...
No issues found! (ran in 4.6s)
flutter doctor -v
[✓] Flutter (Channel stable, 2.10.2, on Microsoft Windows [Version 10.0.19044.1526], locale sv-SE)
• Flutter version 2.10.2 at C:\Users\Leif\Programmering\Libraries\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 097d3313d8 (4 days ago), 2022-02-18 19:33:08 -0600
• Engine revision a83ed0e5e3
• Dart version 2.16.1
• DevTools version 2.9.2
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at K:\Android\android-sdks
• Platform android-31, build-tools 31.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.0.6)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.0.32126.317
• Windows 10 SDK version 10.0.19041.0
[✓] Android Studio (version 2021.1)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
[✓] VS Code, 32-bit edition (version 1.64.2)
• VS Code at C:\Program Files (x86)\Microsoft VS Code
• Flutter extension version 3.34.0
[✓] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.1526]
• Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.82
• Edge (web) • edge • web-javascript • Microsoft Edge 98.0.1108.50
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Sidenote
I have on my todo to also report that the same sample app when built for iOS will also not set the locale for the app using setAccessibilityLanguage. So the system language is used for texts that have no override. Also the Localizations.override part doesn't work on iOS. The TextSpan override do work on iOS meaning that it is a Flutter Web bug that none of the locale is communicated to the browser. But there can be also framework wide bugs connected to some ways of communicating locale to screen readers.