mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Make various images in gallery accessible (#14467)
Discovered during an a11y review of the gallery.
This commit is contained in:
parent
0da6bad656
commit
be0c4888b0
|
@ -60,20 +60,23 @@ class ColorItem extends StatelessWidget {
|
|||
|
||||
@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()),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
@ -218,12 +218,18 @@ class Tab1RowItem extends StatelessWidget {
|
|||
),
|
||||
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: () { },
|
||||
),
|
||||
],
|
||||
|
|
|
@ -14,13 +14,19 @@ class ImagesDemo extends StatelessWidget {
|
|||
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'),
|
||||
),
|
||||
),
|
||||
]
|
||||
);
|
||||
|
|
|
@ -7,14 +7,15 @@ import 'package:flutter/material.dart';
|
|||
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 @@ class NavigationIconView {
|
|||
|
||||
final Widget _icon;
|
||||
final Color _color;
|
||||
final String _title;
|
||||
final BottomNavigationBarItem item;
|
||||
final AnimationController controller;
|
||||
CurvedAnimation _animation;
|
||||
|
@ -56,7 +58,10 @@ class NavigationIconView {
|
|||
color: iconColor,
|
||||
size: 120.0,
|
||||
),
|
||||
child: _icon,
|
||||
child: new Semantics(
|
||||
label: 'Placeholder for $_title tab',
|
||||
child: _icon,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -95,31 +100,31 @@ class _BottomNavigationDemoState extends State<BottomNavigationDemo>
|
|||
_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,
|
||||
)
|
||||
|
|
|
@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
|
|||
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 @@ class _PageSelector extends StatelessWidget {
|
|||
)
|
||||
),
|
||||
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 _PageSelector extends StatelessWidget {
|
|||
|
||||
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
|
||||
|
|
|
@ -117,6 +117,7 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke
|
|||
page.icon,
|
||||
color: iconColor,
|
||||
size: 128.0,
|
||||
semanticLabel: 'Placeholder for ${page.text} tab',
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue