Sitelet https://github.com/flutter/flutter/pull/60141/files
Skip to content

Tweaking Material Chip a11y semantics to match buttons #60141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nscobie merged 2 commits into from
Jun 26, 2020
Merged

Tweaking Material Chip a11y semantics to match buttons #60141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7319acf
Tweaking Material Chip a11y semantics to match buttons
gnscobie Jun 23, 2020
207e952
added a newline to the end of chip_test.dart
gnscobie Jun 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/flutter/lib/src/material/chip.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1944,9 +1944,10 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
),
);
return Semantics(
button: widget.tapEnabled,

@gaaclarke gaaclarke Jun 24, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like the right property to for this:

  /// For example, the [Chip] class sets this to false because it can't be
  /// disabled, even if no callbacks are set on it, since it is used for
  /// displaying information only.

Looking good =)

container: true,
selected: widget.selected,
enabled: canTap ? widget.isEnabled : null,
enabled: widget.tapEnabled ? canTap : null,
child: result,
);
}
Expand Down
150 changes: 149 additions & 1 deletion packages/flutter/test/material/chip_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1624,6 +1624,10 @@ void main() {
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
],
),
],
),
Expand Down Expand Up @@ -1662,6 +1666,10 @@ void main() {
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
],
children: <TestSemantics>[
TestSemantics(
label: 'Delete',
Expand Down Expand Up @@ -1712,6 +1720,7 @@ void main() {
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
SemanticsFlag.isEnabled,
SemanticsFlag.isFocusable,
],
Expand Down Expand Up @@ -1763,6 +1772,7 @@ void main() {
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
SemanticsFlag.isEnabled,
SemanticsFlag.isFocusable,
],
Expand Down Expand Up @@ -1808,6 +1818,7 @@ void main() {
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
SemanticsFlag.isEnabled,
SemanticsFlag.isFocusable,
SemanticsFlag.isSelected,
Expand Down Expand Up @@ -1853,7 +1864,10 @@ void main() {
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[],
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
],
actions: <SemanticsAction>[],
),
],
Expand All @@ -1867,6 +1881,140 @@ void main() {

semanticsTester.dispose();
});

testWidgets('tapEnabled explicitly false', (WidgetTester tester) async {
final SemanticsTester semanticsTester = SemanticsTester(tester);

await tester.pumpWidget(const MaterialApp(
home: Material(
child: RawChip(
tapEnabled: false,
label: Text('test'),
),
),
));

expect(semanticsTester, hasSemantics(
TestSemantics.root(
children: <TestSemantics>[
TestSemantics(
textDirection: TextDirection.ltr,
children: <TestSemantics>[
TestSemantics(
children: <TestSemantics>[
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.scopesRoute],
children: <TestSemantics>[
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[], // Must not be a button when tapping is disabled.
actions: <SemanticsAction>[],
),
],
),
],
),
],
),
],
), ignoreTransform: true, ignoreId: true, ignoreRect: true));

semanticsTester.dispose();
});

testWidgets('enabled when tapEnabled and canTap', (WidgetTester tester) async {
final SemanticsTester semanticsTester = SemanticsTester(tester);

// These settings make a Chip which can be tapped, both in general and at this moment.
await tester.pumpWidget(MaterialApp(
home: Material(
child: RawChip(
isEnabled: true,
tapEnabled: true,
onPressed: () {},
label: const Text('test'),
),
),
));

expect(semanticsTester, hasSemantics(
TestSemantics.root(
children: <TestSemantics>[
TestSemantics(
textDirection: TextDirection.ltr,
children: <TestSemantics>[
TestSemantics(
children: <TestSemantics>[
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.scopesRoute],
children: <TestSemantics>[
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
SemanticsFlag.isEnabled,
SemanticsFlag.isFocusable,
],
actions: <SemanticsAction>[SemanticsAction.tap],
),
],
),
],
),
],
),
],
), ignoreTransform: true, ignoreId: true, ignoreRect: true));

semanticsTester.dispose();
});

testWidgets('disabled when tapEnabled but not canTap', (WidgetTester tester) async {
final SemanticsTester semanticsTester = SemanticsTester(tester);
// These settings make a Chip which _could_ be tapped, but not currently (ensures `canTap == false`).
await tester.pumpWidget(const MaterialApp(
home: Material(
child: RawChip(
isEnabled: true,
tapEnabled: true,
label: Text('test'),
),
),
));

expect(semanticsTester, hasSemantics(
TestSemantics.root(
children: <TestSemantics>[
TestSemantics(
textDirection: TextDirection.ltr,
children: <TestSemantics>[
TestSemantics(
children: <TestSemantics>[
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.scopesRoute],
children: <TestSemantics>[
TestSemantics(
label: 'test',
textDirection: TextDirection.ltr,
flags: <SemanticsFlag>[
SemanticsFlag.hasEnabledState,
SemanticsFlag.isButton,
],
),
],
),
],
),
],
),
],
), ignoreTransform: true, ignoreId: true, ignoreRect: true));

semanticsTester.dispose();
});
});

testWidgets('can be tapped outside of chip delete icon', (WidgetTester tester) async {
Expand Down