[a11y] Fix date picker cannot focus on the edit field (#143117)
fixes: [DatePicker edit field](https://github.com/flutter/flutter/issues/143116) https://b.corp.google.com/issues/322173632
This commit is contained in:
parent
3f09b23338
commit
846719ecaf
@ -394,6 +394,7 @@ class _DatePickerModeToggleButtonState extends State<_DatePickerModeToggleButton
|
|||||||
label: MaterialLocalizations.of(context).selectYearSemanticsLabel,
|
label: MaterialLocalizations.of(context).selectYearSemanticsLabel,
|
||||||
excludeSemantics: true,
|
excludeSemantics: true,
|
||||||
button: true,
|
button: true,
|
||||||
|
container: true,
|
||||||
child: SizedBox(
|
child: SizedBox(
|
||||||
height: _subHeaderHeight,
|
height: _subHeaderHeight,
|
||||||
child: InkWell(
|
child: InkWell(
|
||||||
|
@ -867,7 +867,9 @@ class _DatePickerHeader extends StatelessWidget {
|
|||||||
|
|
||||||
switch (orientation) {
|
switch (orientation) {
|
||||||
case Orientation.portrait:
|
case Orientation.portrait:
|
||||||
return SizedBox(
|
return Semantics(
|
||||||
|
container: true,
|
||||||
|
child: SizedBox(
|
||||||
height: _datePickerHeaderPortraitHeight,
|
height: _datePickerHeaderPortraitHeight,
|
||||||
child: Material(
|
child: Material(
|
||||||
color: backgroundColor,
|
color: backgroundColor,
|
||||||
@ -887,16 +889,22 @@ class _DatePickerHeader extends StatelessWidget {
|
|||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Expanded(child: title),
|
Expanded(child: title),
|
||||||
if (entryModeButton != null)
|
if (entryModeButton != null)
|
||||||
entryModeButton!,
|
Semantics(
|
||||||
|
container: true,
|
||||||
|
child: entryModeButton,
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
case Orientation.landscape:
|
case Orientation.landscape:
|
||||||
return SizedBox(
|
return Semantics(
|
||||||
|
container: true,
|
||||||
|
child:SizedBox(
|
||||||
width: _datePickerHeaderLandscapeWidth,
|
width: _datePickerHeaderLandscapeWidth,
|
||||||
child: Material(
|
child: Material(
|
||||||
color: backgroundColor,
|
color: backgroundColor,
|
||||||
@ -922,11 +930,15 @@ class _DatePickerHeader extends StatelessWidget {
|
|||||||
if (entryModeButton != null)
|
if (entryModeButton != null)
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||||
|
child: Semantics(
|
||||||
|
container: true,
|
||||||
child: entryModeButton,
|
child: entryModeButton,
|
||||||
),
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -256,11 +256,14 @@ class _InputDatePickerFormFieldState extends State<InputDatePickerFormField> {
|
|||||||
?? theme.inputDecorationTheme.border
|
?? theme.inputDecorationTheme.border
|
||||||
?? (useMaterial3 ? const OutlineInputBorder() : const UnderlineInputBorder());
|
?? (useMaterial3 ? const OutlineInputBorder() : const UnderlineInputBorder());
|
||||||
|
|
||||||
return TextFormField(
|
return Semantics(
|
||||||
|
container: true,
|
||||||
|
child: TextFormField(
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
hintText: widget.fieldHintText ?? localizations.dateHelpText,
|
hintText: widget.fieldHintText ?? localizations.dateHelpText,
|
||||||
labelText: widget.fieldLabelText ?? localizations.dateInputLabel,
|
labelText: widget.fieldLabelText ?? localizations.dateInputLabel,
|
||||||
).applyDefaults(inputTheme
|
).applyDefaults(
|
||||||
|
inputTheme
|
||||||
.merge(datePickerTheme.inputDecorationTheme)
|
.merge(datePickerTheme.inputDecorationTheme)
|
||||||
.copyWith(border: effectiveInputBorder),
|
.copyWith(border: effectiveInputBorder),
|
||||||
),
|
),
|
||||||
@ -271,6 +274,7 @@ class _InputDatePickerFormFieldState extends State<InputDatePickerFormField> {
|
|||||||
autofocus: widget.autofocus,
|
autofocus: widget.autofocus,
|
||||||
controller: _controller,
|
controller: _controller,
|
||||||
focusNode: widget.focusNode,
|
focusNode: widget.focusNode,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,7 @@ import 'package:flutter/foundation.dart';
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/services.dart';
|
import 'package:flutter/services.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
import '../widgets/clipboard_utils.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
TestWidgetsFlutterBinding.ensureInitialized();
|
TestWidgetsFlutterBinding.ensureInitialized();
|
||||||
@ -1577,6 +1578,13 @@ void main() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('input mode', (WidgetTester tester) async {
|
testWidgets('input mode', (WidgetTester tester) async {
|
||||||
|
// Fill the clipboard so that the Paste option is available in the text
|
||||||
|
// selection menu.
|
||||||
|
final MockClipboard mockClipboard = MockClipboard();
|
||||||
|
tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(SystemChannels.platform, mockClipboard.handleMethodCall);
|
||||||
|
await Clipboard.setData(const ClipboardData(text: 'Clipboard data'));
|
||||||
|
addTearDown(() => tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(SystemChannels.platform, null));
|
||||||
|
|
||||||
final SemanticsHandle semantics = tester.ensureSemantics();
|
final SemanticsHandle semantics = tester.ensureSemantics();
|
||||||
|
|
||||||
initialEntryMode = DatePickerEntryMode.input;
|
initialEntryMode = DatePickerEntryMode.input;
|
||||||
@ -1596,7 +1604,20 @@ void main() {
|
|||||||
isFocusable: true,
|
isFocusable: true,
|
||||||
));
|
));
|
||||||
|
|
||||||
// The semantics of the InputDatePickerFormField are tested in its tests.
|
expect(tester.getSemantics(find.byType(EditableText)), matchesSemantics(
|
||||||
|
label: 'Enter Date',
|
||||||
|
isTextField: true,
|
||||||
|
isFocused: true,
|
||||||
|
value: '01/15/2016',
|
||||||
|
hasTapAction: true,
|
||||||
|
hasSetTextAction: true,
|
||||||
|
hasSetSelectionAction: true,
|
||||||
|
hasCopyAction: true,
|
||||||
|
hasCutAction: true,
|
||||||
|
hasPasteAction: true,
|
||||||
|
hasMoveCursorBackwardByCharacterAction: true,
|
||||||
|
hasMoveCursorBackwardByWordAction: true,
|
||||||
|
));
|
||||||
|
|
||||||
// Ok/Cancel buttons
|
// Ok/Cancel buttons
|
||||||
expect(tester.getSemantics(find.text('OK')), matchesSemantics(
|
expect(tester.getSemantics(find.text('OK')), matchesSemantics(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user