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

examples/flutter_gallery/lib/demo/material/bottom_app_bar_demo.dart

@@ -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

@@ -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,