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

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

@@ -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,21 +124,39 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
   }
 
   Widget buildFabShapePicker() {
-    return new Padding(
+    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'),
+              child: const Text('Change shape'),
               onPressed: () {
                 setState(() {
                   fabShapeIndex = (fabShapeIndex + 1) % _fabShapeConfigurations.length;
                 });
               },
             ),
+          ),
+        ),
+      ],
     );
   }
 
   Widget buildFabLocationPicker() {
-    return new Padding(
+    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'),
@@ -157,6 +166,9 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
                 });
               },
             ),
+          ),
+        ),
+      ],
     );
   }
 
@@ -166,6 +178,11 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
     ];
     for (Color color in babColors) {
       colors.add(
+        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,
@@ -175,8 +192,6 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
                 });
               },
             ),
-      );
-      colors.add(
             new Container(
               decoration: new BoxDecoration(
                 color: color,
@@ -184,12 +199,17 @@ class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
               ),
               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(
+    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(
+      // 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 IconButton(
+      ),
+      new Semantics(
+        label: 'Show more',
+        container: true,
+        explicitChildNodes: false,
+        enabled: false,
+        child: 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,