DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity
flutter_flutter/packages/flutter
History
Bruno Leroux c4b5b410c6
Fix time picker period selector a11y touch targets (#170060) 
## Description

This PR fixes the TimePicker day period selector touch targets.

### Before

| Flutter | Google Agenda | Compose |
|--------|--------|--------|
|
![Image](https://github.com/user-attachments/assets/9395a032-0e5c-4255-8620-e2c499bfed44)
|
![Image](https://github.com/user-attachments/assets/5a63b78c-45d2-4958-9088-5bc89c02c7fe)
|
![Image](https://github.com/user-attachments/assets/0b2ac630-9b8d-44ed-936f-297bd2798981)
![Image](https://github.com/user-attachments/assets/f4750ded-fc4b-4d86-8825-f4e9b38b6231)
|

### After

| Flutter | Google Agenda | Compose |
|--------|--------|--------|

|![image](https://github.com/user-attachments/assets/fde7d655-6151-42d8-a162-fe410e2278da)
|
![Image](https://github.com/user-attachments/assets/5a63b78c-45d2-4958-9088-5bc89c02c7fe)
|
![Image](https://github.com/user-attachments/assets/0b2ac630-9b8d-44ed-936f-297bd2798981)
![Image](https://github.com/user-attachments/assets/f4750ded-fc4b-4d86-8825-f4e9b38b6231)
|

## Implementation choice

This PR implements two main changes:
- it expands the `_DayPeriodControl` bounds by reducing some existing
spacing. Doing so the touch area of the AM/PM buttons can grow outside
the day period container and respect the minimum interactive height.
- it changes the tree order to correctly sized the AM/PM buttons
semantics. The solution here is somewhat tricky/hacky:
 
Because the semantics bounds are clipped by their ancestor, the PR
changes the widget order:

Before, the order was `_DayPeriodControl` > `_DayPeriodInputPadding` >
`Material` (with shape and clip) > `Row` (or Column depending on the
orientation) > children [ `Semantics` > AM `InkWell`, `Semantics` > PM
`InkWell` ]
(Which leads to the Semantics being clipped by the Material shape).

After, the order is `_DayPeriodControl` > `_DayPeriodInputPadding` >
`Row` (or Column depending on the orientation) > children [ `Semantics`
> `Material` (with shape and clip) > AM `InkWell`, `Semantics` >
`Material` (with shape and clip) > PM `InkWell` ]

The difficulty here is that the `TimePickerThemeData.dayPeriodShape` is
meant to be the shape for the whole day period container. In order to
change the order, this PR has to set separetly the shapes of the AM and
PM buttons. To do so it adds some logic to 'split' the shape in two
parts. This is ok for the default shape but not possible for any shape,
in that case the original shape will be use for both buttons which gives
a different result than before this PR. This annoyance seems less a
problem than having the default rendering not respecting a11y touch
targets.


## Related Issue

Fixes [touch target size not up to a11y standards for DatePicker day
period selector.](https://github.com/flutter/flutter/issues/168245)

## Tests

Adds 2 tests.
Updates 5 tests.
2025-08-20 06:12:09 +00:00
..
lib
Fix time picker period selector a11y touch targets (#170060)
2025-08-20 06:12:09 +00:00
test
Fix time picker period selector a11y touch targets (#170060)
2025-08-20 06:12:09 +00:00
test_fixes
Add missing deprecations to CupertinoDynamicColor. (#171160)
2025-07-24 08:24:27 +00:00
test_private
…
test_profile
…
test_release
Add error handling for Element lifecycle user callbacks (#173148)
2025-08-14 19:53:20 +00:00
analysis_options.yaml
…
build.yaml
…
dart_test.yaml
…
LICENSE
…
pubspec.yaml
Bump meta to 0.17.0 (#172541)
2025-07-22 17:51:20 +00:00
README.md
…

README.md

Flutter

Flutter is a new way to build high-performance, cross-platform mobile, web, and desktop apps. Flutter is optimized for today's — and tomorrow's — mobile and desktop devices. We are focused on low-latency input and high frame rates on all platforms.

See the getting started guide for information about using Flutter.