Make various images in gallery accessible (#14467)
Discovered during an a11y review of the gallery.
diff --git a/examples/flutter_gallery/lib/demo/colors_demo.dart b/examples/flutter_gallery/lib/demo/colors_demo.dart
index b3e9e99..d3b188f 100644
--- a/examples/flutter_gallery/lib/demo/colors_demo.dart
+++ b/examples/flutter_gallery/lib/demo/colors_demo.dart
@@ -60,20 +60,23 @@
@override
Widget build(BuildContext context) {
- return new Container(
- height: kColorItemHeight,
- padding: const EdgeInsets.symmetric(horizontal: 16.0),
- color: color,
- child: new SafeArea(
- top: false,
- bottom: false,
- child: new Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: <Widget>[
- new Text('$prefix$index'),
- new Text(colorString()),
- ],
+ return new Semantics(
+ container: true,
+ child: new Container(
+ height: kColorItemHeight,
+ padding: const EdgeInsets.symmetric(horizontal: 16.0),
+ color: color,
+ child: new SafeArea(
+ top: false,
+ bottom: false,
+ child: new Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: <Widget>[
+ new Text('$prefix$index'),
+ new Text(colorString()),
+ ],
+ ),
),
),
);
diff --git a/examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart b/examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
index b452371..cac8020 100644
--- a/examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
+++ b/examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
@@ -218,12 +218,18 @@
),
new CupertinoButton(
padding: EdgeInsets.zero,
- child: const Icon(CupertinoIcons.plus_circled, color: CupertinoColors.activeBlue),
+ child: const Icon(CupertinoIcons.plus_circled,
+ color: CupertinoColors.activeBlue,
+ semanticLabel: 'Add',
+ ),
onPressed: () { },
),
new CupertinoButton(
padding: EdgeInsets.zero,
- child: const Icon(CupertinoIcons.share, color: CupertinoColors.activeBlue),
+ child: const Icon(CupertinoIcons.share,
+ color: CupertinoColors.activeBlue,
+ semanticLabel: 'Share',
+ ),
onPressed: () { },
),
],
diff --git a/examples/flutter_gallery/lib/demo/images_demo.dart b/examples/flutter_gallery/lib/demo/images_demo.dart
index 7b0c2cf..0b4e00b 100644
--- a/examples/flutter_gallery/lib/demo/images_demo.dart
+++ b/examples/flutter_gallery/lib/demo/images_demo.dart
@@ -14,13 +14,19 @@
tabName: 'ANIMATED WEBP',
description: '',
exampleCodeTag: 'animated_image',
- demoWidget: new Image.asset('packages/flutter_gallery_assets/animated_flutter_stickers.webp'),
+ demoWidget: new Semantics(
+ label: 'Example of animated WEBP',
+ child: new Image.asset('packages/flutter_gallery_assets/animated_flutter_stickers.webp'),
+ ),
),
new ComponentDemoTabData(
tabName: 'ANIMATED GIF',
description: '',
exampleCodeTag: 'animated_image',
- demoWidget: new Image.asset('packages/flutter_gallery_assets/animated_flutter_lgtm.gif'),
+ demoWidget: new Semantics(
+ label: 'Example of animated GIF',
+ child:new Image.asset('packages/flutter_gallery_assets/animated_flutter_lgtm.gif'),
+ ),
),
]
);
diff --git a/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart b/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart
index 45a6ec4..79cca01 100644
--- a/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart
+++ b/examples/flutter_gallery/lib/demo/material/bottom_navigation_demo.dart
@@ -7,14 +7,15 @@
class NavigationIconView {
NavigationIconView({
Widget icon,
- Widget title,
+ String title,
Color color,
TickerProvider vsync,
}) : _icon = icon,
_color = color,
+ _title = title,
item = new BottomNavigationBarItem(
icon: icon,
- title: title,
+ title: new Text(title),
backgroundColor: color,
),
controller = new AnimationController(
@@ -29,6 +30,7 @@
final Widget _icon;
final Color _color;
+ final String _title;
final BottomNavigationBarItem item;
final AnimationController controller;
CurvedAnimation _animation;
@@ -56,7 +58,10 @@
color: iconColor,
size: 120.0,
),
- child: _icon,
+ child: new Semantics(
+ label: 'Placeholder for $_title tab',
+ child: _icon,
+ ),
),
),
);
@@ -95,31 +100,31 @@
_navigationViews = <NavigationIconView>[
new NavigationIconView(
icon: const Icon(Icons.access_alarm),
- title: const Text('Alarm'),
+ title: 'Alarm',
color: Colors.deepPurple,
vsync: this,
),
new NavigationIconView(
icon: new CustomIcon(),
- title: const Text('Box'),
+ title: 'Box',
color: Colors.deepOrange,
vsync: this,
),
new NavigationIconView(
icon: const Icon(Icons.cloud),
- title: const Text('Cloud'),
+ title: 'Cloud',
color: Colors.teal,
vsync: this,
),
new NavigationIconView(
icon: const Icon(Icons.favorite),
- title: const Text('Favorites'),
+ title: 'Favorites',
color: Colors.indigo,
vsync: this,
),
new NavigationIconView(
icon: const Icon(Icons.event_available),
- title: const Text('Event'),
+ title: 'Event',
color: Colors.pink,
vsync: this,
)
diff --git a/examples/flutter_gallery/lib/demo/material/page_selector_demo.dart b/examples/flutter_gallery/lib/demo/material/page_selector_demo.dart
index 73cdf5c..33dc588 100644
--- a/examples/flutter_gallery/lib/demo/material/page_selector_demo.dart
+++ b/examples/flutter_gallery/lib/demo/material/page_selector_demo.dart
@@ -7,7 +7,7 @@
class _PageSelector extends StatelessWidget {
const _PageSelector({ this.icons });
- final List<IconData> icons;
+ final List<Icon> icons;
void _handleArrowButtonPress(BuildContext context, int delta) {
final TabController controller = DefaultTabController.of(context);
@@ -46,18 +46,23 @@
)
),
new Expanded(
- child: new TabBarView(
- children: icons.map((IconData icon) {
- return new Container(
- key: new ObjectKey(icon),
- padding: const EdgeInsets.all(12.0),
- child: new Card(
- child: new Center(
- child: new Icon(icon, size: 128.0, color: color)
+ child: new IconTheme(
+ data: new IconThemeData(
+ size: 128.0,
+ color: color,
+ ),
+ child: new TabBarView(
+ children: icons.map((Icon icon) {
+ return new Container(
+ padding: const EdgeInsets.all(12.0),
+ child: new Card(
+ child: new Center(
+ child: icon,
+ ),
),
- ),
- );
- }).toList()
+ );
+ }).toList()
+ ),
),
),
],
@@ -68,13 +73,13 @@
class PageSelectorDemo extends StatelessWidget {
static const String routeName = '/material/page-selector';
- static final List<IconData> icons = <IconData>[
- Icons.event,
- Icons.home,
- Icons.android,
- Icons.alarm,
- Icons.face,
- Icons.language,
+ static final List<Icon> icons = <Icon>[
+ const Icon(Icons.event, semanticLabel: 'Event'),
+ const Icon(Icons.home, semanticLabel: 'Home'),
+ const Icon(Icons.android, semanticLabel: 'Android'),
+ const Icon(Icons.alarm, semanticLabel: 'Alarm'),
+ const Icon(Icons.face, semanticLabel: 'Face'),
+ const Icon(Icons.language, semanticLabel: 'Language'),
];
@override
diff --git a/examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart b/examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart
index 6569b57..f2534de 100644
--- a/examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart
+++ b/examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart
@@ -117,6 +117,7 @@
page.icon,
color: iconColor,
size: 128.0,
+ semanticLabel: 'Placeholder for ${page.text} tab',
),
),
),
