Skip to content

Commit c4b5b41

Browse files
authored
Fix time picker period selector a11y touch targets (flutter#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.](flutter#168245) ## Tests Adds 2 tests. Updates 5 tests.
1 parent 9d4db1d commit c4b5b41

File tree

3 files changed

+374
-202
lines changed

3 files changed

+374
-202
lines changed

0 commit comments

Comments
 (0)