Unverified Commit be0c4888 authored by Michael Goderbauer's avatar Michael Goderbauer Committed by GitHub

Make various images in gallery accessible (#14467)

Discovered during an a11y review of the gallery.
parent 0da6bad6
...@@ -60,20 +60,23 @@ class ColorItem extends StatelessWidget { ...@@ -60,20 +60,23 @@ class ColorItem extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Container( return new Semantics(
height: kColorItemHeight, container: true,
padding: const EdgeInsets.symmetric(horizontal: 16.0), child: new Container(
color: color, height: kColorItemHeight,
child: new SafeArea( padding: const EdgeInsets.symmetric(horizontal: 16.0),
top: false, color: color,
bottom: false, child: new SafeArea(
child: new Row( top: false,
mainAxisAlignment: MainAxisAlignment.spaceBetween, bottom: false,
crossAxisAlignment: CrossAxisAlignment.center, child: new Row(
children: <Widget>[ mainAxisAlignment: MainAxisAlignment.spaceBetween,
new Text('$prefix$index'), crossAxisAlignment: CrossAxisAlignment.center,
new Text(colorString()), children: <Widget>[
], new Text('$prefix$index'),
new Text(colorString()),
],
),
), ),
), ),
); );
......
...@@ -218,12 +218,18 @@ class Tab1RowItem extends StatelessWidget { ...@@ -218,12 +218,18 @@ class Tab1RowItem extends StatelessWidget {
), ),
new CupertinoButton( new CupertinoButton(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.plus_circled, color: CupertinoColors.activeBlue), child: const Icon(CupertinoIcons.plus_circled,
color: CupertinoColors.activeBlue,
semanticLabel: 'Add',
),
onPressed: () { }, onPressed: () { },
), ),
new CupertinoButton( new CupertinoButton(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.share, color: CupertinoColors.activeBlue), child: const Icon(CupertinoIcons.share,
color: CupertinoColors.activeBlue,
semanticLabel: 'Share',
),
onPressed: () { }, onPressed: () { },
), ),
], ],
......
...@@ -14,13 +14,19 @@ class ImagesDemo extends StatelessWidget { ...@@ -14,13 +14,19 @@ class ImagesDemo extends StatelessWidget {
tabName: 'ANIMATED WEBP', tabName: 'ANIMATED WEBP',
description: '', description: '',
exampleCodeTag: 'animated_image', 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( new ComponentDemoTabData(
tabName: 'ANIMATED GIF', tabName: 'ANIMATED GIF',
description: '', description: '',
exampleCodeTag: 'animated_image', 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'),
),
), ),
] ]
); );
......
...@@ -7,14 +7,15 @@ import 'package:flutter/material.dart'; ...@@ -7,14 +7,15 @@ import 'package:flutter/material.dart';
class NavigationIconView { class NavigationIconView {
NavigationIconView({ NavigationIconView({
Widget icon, Widget icon,
Widget title, String title,
Color color, Color color,
TickerProvider vsync, TickerProvider vsync,
}) : _icon = icon, }) : _icon = icon,
_color = color, _color = color,
_title = title,
item = new BottomNavigationBarItem( item = new BottomNavigationBarItem(
icon: icon, icon: icon,
title: title, title: new Text(title),
backgroundColor: color, backgroundColor: color,
), ),
controller = new AnimationController( controller = new AnimationController(
...@@ -29,6 +30,7 @@ class NavigationIconView { ...@@ -29,6 +30,7 @@ class NavigationIconView {
final Widget _icon; final Widget _icon;
final Color _color; final Color _color;
final String _title;
final BottomNavigationBarItem item; final BottomNavigationBarItem item;
final AnimationController controller; final AnimationController controller;
CurvedAnimation _animation; CurvedAnimation _animation;
...@@ -56,7 +58,10 @@ class NavigationIconView { ...@@ -56,7 +58,10 @@ class NavigationIconView {
color: iconColor, color: iconColor,
size: 120.0, size: 120.0,
), ),
child: _icon, child: new Semantics(
label: 'Placeholder for $_title tab',
child: _icon,
),
), ),
), ),
); );
...@@ -95,31 +100,31 @@ class _BottomNavigationDemoState extends State<BottomNavigationDemo> ...@@ -95,31 +100,31 @@ class _BottomNavigationDemoState extends State<BottomNavigationDemo>
_navigationViews = <NavigationIconView>[ _navigationViews = <NavigationIconView>[
new NavigationIconView( new NavigationIconView(
icon: const Icon(Icons.access_alarm), icon: const Icon(Icons.access_alarm),
title: const Text('Alarm'), title: 'Alarm',
color: Colors.deepPurple, color: Colors.deepPurple,
vsync: this, vsync: this,
), ),
new NavigationIconView( new NavigationIconView(
icon: new CustomIcon(), icon: new CustomIcon(),
title: const Text('Box'), title: 'Box',
color: Colors.deepOrange, color: Colors.deepOrange,
vsync: this, vsync: this,
), ),
new NavigationIconView( new NavigationIconView(
icon: const Icon(Icons.cloud), icon: const Icon(Icons.cloud),
title: const Text('Cloud'), title: 'Cloud',
color: Colors.teal, color: Colors.teal,
vsync: this, vsync: this,
), ),
new NavigationIconView( new NavigationIconView(
icon: const Icon(Icons.favorite), icon: const Icon(Icons.favorite),
title: const Text('Favorites'), title: 'Favorites',
color: Colors.indigo, color: Colors.indigo,
vsync: this, vsync: this,
), ),
new NavigationIconView( new NavigationIconView(
icon: const Icon(Icons.event_available), icon: const Icon(Icons.event_available),
title: const Text('Event'), title: 'Event',
color: Colors.pink, color: Colors.pink,
vsync: this, vsync: this,
) )
......
...@@ -7,7 +7,7 @@ import 'package:flutter/material.dart'; ...@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
class _PageSelector extends StatelessWidget { class _PageSelector extends StatelessWidget {
const _PageSelector({ this.icons }); const _PageSelector({ this.icons });
final List<IconData> icons; final List<Icon> icons;
void _handleArrowButtonPress(BuildContext context, int delta) { void _handleArrowButtonPress(BuildContext context, int delta) {
final TabController controller = DefaultTabController.of(context); final TabController controller = DefaultTabController.of(context);
...@@ -46,18 +46,23 @@ class _PageSelector extends StatelessWidget { ...@@ -46,18 +46,23 @@ class _PageSelector extends StatelessWidget {
) )
), ),
new Expanded( new Expanded(
child: new TabBarView( child: new IconTheme(
children: icons.map((IconData icon) { data: new IconThemeData(
return new Container( size: 128.0,
key: new ObjectKey(icon), color: color,
padding: const EdgeInsets.all(12.0), ),
child: new Card( child: new TabBarView(
child: new Center( children: icons.map((Icon icon) {
child: new Icon(icon, size: 128.0, color: color) return new Container(
padding: const EdgeInsets.all(12.0),
child: new Card(
child: new Center(
child: icon,
),
), ),
), );
); }).toList()
}).toList() ),
), ),
), ),
], ],
...@@ -68,13 +73,13 @@ class _PageSelector extends StatelessWidget { ...@@ -68,13 +73,13 @@ class _PageSelector extends StatelessWidget {
class PageSelectorDemo extends StatelessWidget { class PageSelectorDemo extends StatelessWidget {
static const String routeName = '/material/page-selector'; static const String routeName = '/material/page-selector';
static final List<IconData> icons = <IconData>[ static final List<Icon> icons = <Icon>[
Icons.event, const Icon(Icons.event, semanticLabel: 'Event'),
Icons.home, const Icon(Icons.home, semanticLabel: 'Home'),
Icons.android, const Icon(Icons.android, semanticLabel: 'Android'),
Icons.alarm, const Icon(Icons.alarm, semanticLabel: 'Alarm'),
Icons.face, const Icon(Icons.face, semanticLabel: 'Face'),
Icons.language, const Icon(Icons.language, semanticLabel: 'Language'),
]; ];
@override @override
......
...@@ -117,6 +117,7 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke ...@@ -117,6 +117,7 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke
page.icon, page.icon,
color: iconColor, color: iconColor,
size: 128.0, size: 128.0,
semanticLabel: 'Placeholder for ${page.text} tab',
), ),
), ),
), ),
......
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