[BottomAppBar Demo] Ensured fab is traversed before bottomAppBar butt…

…ons by accessibility… (#837) * Ensured fab is traversed before bottomAppBar buttons by accessibility focus
flutter · Dec 13, 2022 · f62712c · f62712c
1 parent d8ac3e2
commit f62712c
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 52 deletions.
diff --git a/lib/codeviewer/code_segments.dart b/lib/codeviewer/code_segments.dart
@@ -1111,6 +1111,13 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
  TextSpan(style: codeStyle.keywordStyle, text: 'import'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(
+ style: codeStyle.stringStyle,
+ text: '\u0027package:flutter/rendering.dart\u0027'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ';'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a'),
+ TextSpan(style: codeStyle.keywordStyle, text: 'import'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(
  style: codeStyle.stringStyle,
  text:
@@ -1713,22 +1720,43 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: 'value\u000a '),
  TextSpan(style: codeStyle.punctuationStyle, text: '?'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '('),
+ TextSpan(
+ style: codeStyle.baseStyle, text: '\u000a container'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.keywordStyle, text: 'true'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ','),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a sortKey'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.keywordStyle, text: 'const'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.classStyle, text: 'OrdinalSortKey'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '('),
+ TextSpan(style: codeStyle.numberStyle, text: '0'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a child'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'FloatingActionButton'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
  TextSpan(
- style: codeStyle.baseStyle, text: '\u000a onPressed'),
+ style: codeStyle.baseStyle, text: '\u000a  onPressed'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '()'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '{},'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a tooltip'),
+ TextSpan(
+ style: codeStyle.baseStyle, text: '\u000a tooltip'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' localizations'),
  TextSpan(style: codeStyle.punctuationStyle, text: '.'),
  TextSpan(style: codeStyle.baseStyle, text: 'buttonTextCreate'),
  TextSpan(style: codeStyle.punctuationStyle, text: ','),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a child'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  child'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -1739,6 +1767,8 @@ class CodeSegments {
  TextSpan(style: codeStyle.punctuationStyle, text: '.'),
  TextSpan(style: codeStyle.baseStyle, text: 'add'),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
  TextSpan(style: codeStyle.punctuationStyle, text: ')'),
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
@@ -1885,18 +1915,43 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
  TextSpan(style: codeStyle.keywordStyle, text: 'return'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '('),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a sortKey'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.keywordStyle, text: 'const'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.classStyle, text: 'OrdinalSortKey'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '('),
+ TextSpan(style: codeStyle.numberStyle, text: '1'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a container'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
+ TextSpan(style: codeStyle.keywordStyle, text: 'true'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ','),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a label'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' localizations'),
+ TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+ TextSpan(style: codeStyle.baseStyle, text: 'bottomAppBar'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ','),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a child'),
+ TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+ TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'BottomAppBar'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a shape'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  shape'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' shape'),
  TextSpan(style: codeStyle.punctuationStyle, text: ','),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a child'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  child'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'IconTheme'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a data'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  data'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'IconThemeData'),
@@ -1914,19 +1969,20 @@ class CodeSegments {
  TextSpan(style: codeStyle.punctuationStyle, text: '.'),
  TextSpan(style: codeStyle.baseStyle, text: 'onPrimary'),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a child'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  child'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'Row'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a children'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  children'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '['),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.classStyle, text: 'IconButton'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a tooltip'),
+ TextSpan(
+ style: codeStyle.baseStyle, text: '\u000a tooltip'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'MaterialLocalizations'),
@@ -1937,7 +1993,7 @@ class CodeSegments {
  TextSpan(style: codeStyle.punctuationStyle, text: ').'),
  TextSpan(style: codeStyle.baseStyle, text: 'openAppDrawerTooltip'),
  TextSpan(style: codeStyle.punctuationStyle, text: ','),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a icon'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  icon'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -1949,15 +2005,15 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: 'menu'),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(
- style: codeStyle.baseStyle, text: '\u000a onPressed'),
+ style: codeStyle.baseStyle, text: '\u000a  onPressed'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '()'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '{},'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.keywordStyle, text: 'if'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
@@ -1972,16 +2028,17 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.classStyle, text: 'Spacer'),
  TextSpan(style: codeStyle.punctuationStyle, text: '(),'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.classStyle, text: 'IconButton'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a tooltip'),
+ TextSpan(
+ style: codeStyle.baseStyle, text: '\u000a tooltip'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' localizations'),
  TextSpan(style: codeStyle.punctuationStyle, text: '.'),
  TextSpan(style: codeStyle.baseStyle, text: 'starterAppTooltipSearch'),
  TextSpan(style: codeStyle.punctuationStyle, text: ','),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a icon'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  icon'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -1993,24 +2050,25 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: 'search'),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(
- style: codeStyle.baseStyle, text: '\u000a onPressed'),
+ style: codeStyle.baseStyle, text: '\u000a  onPressed'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '()'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '{},'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  '),
  TextSpan(style: codeStyle.classStyle, text: 'IconButton'),
  TextSpan(style: codeStyle.punctuationStyle, text: '('),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a tooltip'),
+ TextSpan(
+ style: codeStyle.baseStyle, text: '\u000a tooltip'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' localizations'),
  TextSpan(style: codeStyle.punctuationStyle, text: '.'),
  TextSpan(style: codeStyle.baseStyle, text: 'starterAppTooltipFavorite'),
  TextSpan(style: codeStyle.punctuationStyle, text: ','),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a icon'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a  icon'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -2022,16 +2080,18 @@ class CodeSegments {
  TextSpan(style: codeStyle.baseStyle, text: 'favorite'),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(
- style: codeStyle.baseStyle, text: '\u000a onPressed'),
+ style: codeStyle.baseStyle, text: '\u000a  onPressed'),
  TextSpan(style: codeStyle.punctuationStyle, text: ':'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '()'),
  TextSpan(style: codeStyle.baseStyle, text: ' '),
  TextSpan(style: codeStyle.punctuationStyle, text: '{},'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.punctuationStyle, text: ')'),
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
- TextSpan(style: codeStyle.punctuationStyle, text: '),'),
- TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
  TextSpan(style: codeStyle.punctuationStyle, text: '],'),
+ TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
+ TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),
  TextSpan(style: codeStyle.punctuationStyle, text: '),'),
  TextSpan(style: codeStyle.baseStyle, text: '\u000a '),

diff --git a/lib/demos/material/bottom_app_bar_demo.dart b/lib/demos/material/bottom_app_bar_demo.dart
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_gen/gen_l10n/gallery_localizations.dart';
 
 // BEGIN bottomAppBarDemo
@@ -127,10 +128,14 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo>
  ],
  ),
  floatingActionButton: _showFab.value
- ? FloatingActionButton(
- onPressed: () {},
- tooltip: localizations.buttonTextCreate,
- child: const Icon(Icons.add),
+ ? Semantics(
+ container: true,
+ sortKey: const OrdinalSortKey(0),
+ child: FloatingActionButton(
+ onPressed: () {},
+ tooltip: localizations.buttonTextCreate,
+ child: const Icon(Icons.add),
+ ),
  )
  : null,
  floatingActionButtonLocation: _fabLocations[_currentFabLocation.value],
@@ -159,29 +164,34 @@ class _DemoBottomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  final localizations = GalleryLocalizations.of(context)!;
- return BottomAppBar(
- shape: shape,
- child: IconTheme(
- data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
- child: Row(
- children: [
- IconButton(
- tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
- icon: const Icon(Icons.menu),
- onPressed: () {},
- ),
- if (centerLocations.contains(fabLocation)) const Spacer(),
- IconButton(
- tooltip: localizations.starterAppTooltipSearch,
- icon: const Icon(Icons.search),
- onPressed: () {},
- ),
- IconButton(
- tooltip: localizations.starterAppTooltipFavorite,
- icon: const Icon(Icons.favorite),
- onPressed: () {},
- ),
- ],
+ return Semantics(
+ sortKey: const OrdinalSortKey(1),
+ container: true,
+ label: localizations.bottomAppBar,
+ child: BottomAppBar(
+ shape: shape,
+ child: IconTheme(
+ data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
+ child: Row(
+ children: [
+ IconButton(
+ tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
+ icon: const Icon(Icons.menu),
+ onPressed: () {},
+ ),
+ if (centerLocations.contains(fabLocation)) const Spacer(),
+ IconButton(
+ tooltip: localizations.starterAppTooltipSearch,
+ icon: const Icon(Icons.search),
+ onPressed: () {},
+ ),
+ IconButton(
+ tooltip: localizations.starterAppTooltipFavorite,
+ icon: const Icon(Icons.favorite),
+ onPressed: () {},
+ )
+ ],
+ ),
  ),
  ),
  );

diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
@@ -2234,6 +2234,10 @@
  "@demo": {
  "description": "Used in the title of the demos."
  },
+ "bottomAppBar": "Bottom app bar",
+ "@bottomAppBar": {
+ "description": "Used as semantic label for a BottomAppBar."
+ },
  "loading": "Loading",
  "@loading": {
  "description": "Indicates the loading process."

diff --git a/lib/l10n/intl_en_US.xml b/lib/l10n/intl_en_US.xml
@@ -2101,6 +2101,10 @@
  name="demo"
  description="Used in the title of the demos."
  >Demo</string>
+ <string
+ name="bottomAppBar"
+ description="Used as semantic label for a BottomAppBar."
+ >Bottom app bar</string>
  <string
  name="loading"
  description="Indicates the loading process."