Skip to content

F
Front-End
Unverified Commit 3aebc070 authored by David Shuckerow's avatar David Shuckerow Committed by GitHub
Browse files
Options

a11y adjustments for the Bottom app bar demo (#16238)

parent 7010bd41
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 70 deletions
examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart
View file @ 3aebc070
......@@ -31,7 +31,7 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
// The index of the currently-selected _FabShapeConfiguration.
int fabShapeIndex = 1;
static const List<_FabShapeConfiguration> _fabShapeConfigurations = const <_FabShapeConfiguration>[
static const List<_FabShapeConfiguration> _fabShapeConfigurations = const <_FabShapeConfiguration>[
const _FabShapeConfiguration('None', null),
const _FabShapeConfiguration('Circular',
const FloatingActionButton(
......@@ -51,6 +51,14 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
// The currently-selected Color for the Bottom App Bar.
Color babColor;
// Accessible names for the colors that a Screen Reader can use to
// identify them.
static final Map<Color, String> colorToName = <Color, String> {
null: 'White',
Colors.orange: 'Orange',
Colors.green: 'Green',
Colors.lightBlue: 'Light blue',
};
static const List<Color> babColors = const <Color> [
null,
Colors.orange,
......@@ -93,25 +101,8 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
'Floating action button',
style: Theme.of(context).textTheme.title,
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(width: 96.0,
child: const Text('Shape: '),
),
new Expanded(child: buildFabShapePicker()),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(
width: 96.0,
child: const Text('Location: '),
),
new Expanded(child: buildFabLocationPicker()),
],
),
buildFabShapePicker(),
buildFabLocationPicker(),
const Divider(),
new Text(
'Bottom app bar options',
......@@ -133,30 +124,51 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
}
Widget buildFabShapePicker() {
return new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
child: const Text('Change'),
onPressed: () {
setState(() {
fabShapeIndex = (fabShapeIndex + 1) % _fabShapeConfigurations.length;
});
},
),
return new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(width: 96.0,
child: const Text('Shape: '),
),
new Expanded(
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
child: const Text('Change shape'),
onPressed: () {
setState(() {
fabShapeIndex = (fabShapeIndex + 1) % _fabShapeConfigurations.length;
});
},
),
),
),
],
);
}
Widget buildFabLocationPicker() {
return new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
child: const Text('Move'),
onPressed: () {
setState(() {
fabLocationIndex = (fabLocationIndex + 1) % _fabLocationConfigurations.length;
});
},
),
return new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(
width: 96.0,
child: const Text('Location: '),
),
new Expanded(
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
child: const Text('Move'),
onPressed: () {
setState(() {
fabLocationIndex = (fabLocationIndex + 1) % _fabLocationConfigurations.length;
});
},
),
),
),
],
);
}
......@@ -166,30 +178,38 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
];
for (Color color in babColors) {
colors.add(
new Radio<Color>(
value: color,
groupValue: babColor,
onChanged: (Color color) {
setState(() {
babColor = color;
});
},
),
);
colors.add(
new Container(
decoration: new BoxDecoration(
color: color,
border: new Border.all(width:2.0, color: Colors.black),
),
child: const SizedBox(width: 20.0, height: 20.0),
new Semantics(
label: 'Set Bottom App Bar color to ${colorToName[color]}',
container: true,
explicitChildNodes: false,
child: new Row(children: <Widget> [
new Radio<Color>(
value: color,
groupValue: babColor,
onChanged: (Color color) {
setState(() {
babColor = color;
});
},
),
new Container(
decoration: new BoxDecoration(
color: color,
border: new Border.all(width:2.0, color: Colors.black),
),
child: const SizedBox(width: 20.0, height: 20.0),
),
const Padding(padding: const EdgeInsets.only(left: 12.0)),
]),
),
);
colors.add(const Padding(padding: const EdgeInsets.only(left: 12.0)));
}
return new Row(
children: colors,
mainAxisAlignment: MainAxisAlignment.center,
return new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Row(
children: colors,
mainAxisAlignment: MainAxisAlignment.center,
),
);
}
......@@ -261,7 +281,8 @@ class _DemoBottomAppBar extends StatelessWidget {
new IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
showModalBottomSheet<Null>(context: context, builder: (BuildContext context) => const _DemoDrawer()); },
showModalBottomSheet<Null>(context: context, builder: (BuildContext context) => const _DemoDrawer());
},
),
new Expanded(
child: new AnimatedCrossFade(
......@@ -290,14 +311,35 @@ class _DemoBottomAppBar extends StatelessWidget {
);
}
rowContents.addAll(<Widget> [
new IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
// Generally, an icon button does not need to be wrapped in a Semantics object.
// When the button has a null onPressed callback, it will be disabled by default.
//
// However, for the purposes of this demo, we don't want the button to appear disabled.
// To achieve this we use a no-op callback instead of a null callback. This allows
// the buttons to appear active, but perform no actions.
//
// To tell the accessibility service that the callback is a no-op, the Semantics widget
// wraps these buttons with `enabled: false`.
new Semantics(
label: 'Search',
container: true,
explicitChildNodes: false,
enabled: false,
child: new IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
),
new Semantics(
label: 'Show more',
container: true,
explicitChildNodes: false,
enabled: false,
child: new IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
new IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
)
]);
return new Row(
children: rowContents,
......
examples/flutter_gallery/lib/gallery/item.dart
View file @ 3aebc070
......@@ -89,7 +89,7 @@ List<GalleryItem> _buildGalleryItems() {
buildRoute: (BuildContext context) => new BackdropDemo(),
),
new GalleryItem(
title: 'Bottom App Bar',
title: 'Bottom app bar',
subtitle: 'With repositionable floating action button',
category: 'Material Components',
routeName: BottomAppBarDemo.routeName,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab