Skip to content
This repository has been archived by the owner on Jun 13, 2024. It is now read-only.

[BottomAppBar Demo] Ensured fab is traversed before bottomAppBar buttons by accessibility… #837

Merged
merged 6 commits into from
Dec 13, 2022
Merged

[BottomAppBar Demo] Ensured fab is traversed before bottomAppBar buttons by accessibility… #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
76c7982
Ensured fab is traversed before bottomAppBar buttons by accessibility…
Dec 6, 2022
8ef79c6
Addressed formatting errors
Dec 6, 2022
ed59ddf
updated code segments
Dec 6, 2022
a79c656
reverted changes in pubspec.lock
Dec 7, 2022
2907d29
added SemanticsNode for BottomAppBar
Dec 9, 2022
9bcb0bc
Merge branch 'main' into bottomAppBar
harperl-lgtm Dec 9, 2022
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
110 changes: 85 additions & 25 deletions lib/codeviewer/code_segments.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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'),
Expand All @@ -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 '),
Expand Down Expand Up @@ -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'),
Expand All @@ -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'),
Expand All @@ -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'),
Expand All @@ -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: '('),
Expand All @@ -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'),
Expand All @@ -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'),
Expand All @@ -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 '),
Expand Down
64 changes: 37 additions & 27 deletions lib/demos/material/bottom_app_bar_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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: () {},
)
],
),
),
),
);
Expand Down
4 changes: 4 additions & 0 deletions lib/l10n/intl_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
4 changes: 4 additions & 0 deletions lib/l10n/intl_en_US.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down