Fix date picker calendar tap targets (portrait mode) #169163

bleroux · 2025-05-20T20:23:21Z

Description

This PR fixes the touch target (and Semantic bounds) for day buttons shown in the date picker calendar mode.
To do so it changes the dialog size and buttons padding to conform to the M3 spec, see https://m3.material.io/components/date-pickers/specs#2d53890e-a08f-4c63-a0d9-abd9e95b4245

Before

After

Related Issue

Fixes DateTimePicker date buttons fail touch target size accessibility checks

Tests

Adds 1 test.

Implementation choice

This PR targets only M3 and portrait mode:

M3 because M2 dialog picker was not designed to be accessible (day buttons are 40 pixels).
Portrait mode only, because there are no specification for the landscape mode and existing implementations (Google Calendar, Compose) vary. I will open a separate issue to discuss a possible solution for landscape mode.

flutter-dashboard · 2025-05-21T08:18:15Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha 36ba5ad

dkwingsmt · 2025-05-21T18:22:08Z

Is this PR somehow related to #168284?

bleroux · 2025-05-21T20:04:45Z

Is this PR somehow related to #168284?

While this PR main goal is to fix the accessibility issue it also fixes the button padding to make it compliant with the M3 spec, so yes this PR includes a change similar to #168284 (Adding a 4 pixels padding).

#168284 adds the padding unconditionnaly so it will be wrong on M2 (on M2 spec, there is no padding for buttons and buttons size was 40 pixels). On M3 the button size is 48 with 4.0 padding.

I also did not include a fix for landscape because the solution will need more discussions (I have a fix ready). The difficulty with landscape mode are:

there are no spec to refer too.
all the day buttons won't fit vertically on the screen (so my fix will introduce a SingleChildScrollView) to scroll vertically (similarly to Google Calendar).
One remaining question will be to decide if we want to enforce the 48x48 tap area on landscape mode (Google Calendar doesn't: it uses 40x40 buttons on landscape mode and 48x48 on portrait).

Because of those complexities for landscape, I prefer to separate the PRs as the second one is more complex and might lead to some revert.

packages/flutter/lib/src/material/calendar_date_picker.dart

flutter-dashboard · 2025-05-22T08:07:16Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha 5e077c4

flutter-dashboard · 2025-05-22T13:56:17Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha 3ce2cb3

packages/flutter/lib/src/material/calendar_date_picker.dart

flutter-dashboard · 2025-05-27T05:37:43Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha 48f7930

bleroux · 2025-05-27T06:12:09Z

@dkwingsmt
When you get a chance, thanks to take a look at the golden changes and the Google testing failures.
The golden changes seems to be expected, for the Google testing failures I don't have access.

dkwingsmt · 2025-06-03T23:33:00Z

@bleroux I've checked the google testing failures. All failures are related to the the branded calendar widget's tap targets in landscape mode, which to my understanding is unexpected. In the failures the buttons are spread further apart horizontally. I'll take a look and see if I can find the cause.

packages/flutter/lib/src/material/calendar_date_picker.dart

flutter-dashboard · 2025-06-04T08:10:37Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha f09df09

packages/flutter/lib/src/material/calendar_date_picker.dart

flutter-dashboard · 2025-06-05T07:21:36Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #169163 at sha a82d987

bleroux · 2025-06-10T20:18:10Z

@dkwingsmt Google testing are ok now. Can you have a last look to this PR?

dkwingsmt

LGTM, thank you!

…er/flutter#169163)

Roll Flutter from 824868f5d1e6 to f79452e3f4ea (94 revisions) flutter/flutter@824868f...f79452e 2025-06-12 [email protected] Roll Skia from 38b9f9b0e496 to b41e7017658e (12 revisions) (flutter/flutter#170514) 2025-06-12 [email protected] Fix `Semantics.identifier` on TextField not working on web (flutter/flutter#170395) 2025-06-12 [email protected] Revert "[a11y] Semantics flag refactor step 2: embedder part" (flutter/flutter#170498) 2025-06-12 [email protected] Copy `packages_autoroller` to `dev/packages_autoroller/run`. (flutter/flutter#170495) 2025-06-11 [email protected] Allow the Slider to always show the value indicator. (flutter/flutter#162223) 2025-06-11 [email protected] Update master branch `CHANGELOG.md` for 3.32.3. (flutter/flutter#170492) 2025-06-11 [email protected] Add time to first frame for `Mac_arm64_ios imitation_game_swiftui` (flutter/flutter#167602) 2025-06-11 [email protected] Make `DropdownMenu` TextField reactive to label changes (flutter/flutter#162062) 2025-06-11 [email protected] Roll Dart SDK from b569246d64bc to 9f741ef8a689 (1 revision) (flutter/flutter#170473) 2025-06-11 [email protected] [impellerc] add GLES shader define. (flutter/flutter#170375) 2025-06-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Pause UIScene migration (#170457)" (flutter/flutter#170487) 2025-06-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix DropdownButtonFormField focusing when replacing FocusNode (#166645)" (flutter/flutter#170477) 2025-06-11 [email protected] Pause UIScene migration (flutter/flutter#170457) 2025-06-11 [email protected] iOS tool dylibs do not need entitlements (flutter/flutter#170448) 2025-06-11 [email protected] Adds getters for different formats of build mode name (flutter/flutter#170251) 2025-06-11 [email protected] Remove all code in `conductor/core` that is now unused (flutter/flutter#170454) 2025-06-11 [email protected] Roll Packages from 974f152 to 0b322a2 (9 revisions) (flutter/flutter#170462) 2025-06-11 [email protected] Roll Skia from b78fdc3ba26b to 38b9f9b0e496 (7 revisions) (flutter/flutter#170453) 2025-06-11 [email protected] Fix remaining iconbuttontheme overrides in listtile (flutter/flutter#169029) 2025-06-11 [email protected] Fix DropdownButtonFormField focusing when replacing FocusNode (flutter/flutter#166645) 2025-06-11 [email protected] Add CupertinoRadio widget of the week video (flutter/flutter#170027) 2025-06-11 [email protected] Docs: Update docs for suffix icon interaction behaviour (flutter/flutter#169828) 2025-06-11 [email protected] [ Widget Preview ] Don't try to load previews with compile-time errors (flutter/flutter#170262) 2025-06-11 [email protected] [canvaskit] Manually trigger `input` event in text editing tests for Safari (flutter/flutter#170022) 2025-06-11 [email protected] Tiny clean-up in triage docs (flutter/flutter#170429) 2025-06-11 [email protected] Roll pub packages (flutter/flutter#170444) 2025-06-11 [email protected] [Impeller] Avoid creating paths when rendering arcs (flutter/flutter#170398) 2025-06-11 [email protected] Fix date picker calendar tap targets (portrait mode) (flutter/flutter#169163) 2025-06-11 [email protected] Add SK_SUPPORT_UNSPANNED_APIS staging flag (flutter/flutter#170139) 2025-06-11 [email protected] Roll Dart SDK from 6290dfd1d88a to b569246d64bc (4 revisions) (flutter/flutter#170430) 2025-06-11 [email protected] Roll Skia from 910070084066 to b78fdc3ba26b (33 revisions) (flutter/flutter#170412) 2025-06-11 [email protected] Use pathops module groups (flutter/flutter#169857) 2025-06-10 [email protected] Roll pub packages (flutter/flutter#170399) 2025-06-10 [email protected] Verify old version of Python has the `lib2to3` import available (flutter/flutter#170187) 2025-06-10 [email protected] Use "flutter pub get" to resolve packages when building the docs snippets tool (flutter/flutter#170381) 2025-06-10 [email protected] [engine] Reland: ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (flutter/flutter#170389) 2025-06-10 [email protected] Revert "Add call to Dart_NotifyDestroyed when the flutter view is des… (flutter/flutter#170309) 2025-06-10 [email protected] fix: set versionCodeOverride when split-per-abi is specified (flutter/flutter#169816) 2025-06-10 [email protected] fix: Skip native assets build test (flaky, takes 15m+) (flutter/flutter#170383) 2025-06-10 [email protected] Marks Linux web_benchmarks_ddc to be unflaky (flutter/flutter#167631) 2025-06-10 [email protected] Marks Linux web_benchmarks_ddc_hot_reload to be unflaky (flutter/flutter#168807) 2025-06-10 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[engine] ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (#170313)" (flutter/flutter#170377) 2025-06-10 [email protected] [a11y] Semantics flag refactor step 2: embedder part (flutter/flutter#167738) 2025-06-10 [email protected] Roll Dart SDK from c26e7ca44805 to 6290dfd1d88a (5 revisions) (flutter/flutter#170363) 2025-06-10 [email protected] Remove `pubspec.lock` files for `flutter_tools` and `widget_preview_scaffold`. (flutter/flutter#170364) 2025-06-10 [email protected] [engine] ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (flutter/flutter#170313) ...

Roll Flutter from 824868f5d1e6 to f79452e3f4ea (94 revisions) flutter/flutter@824868f...f79452e 2025-06-12 [email protected] Roll Skia from 38b9f9b0e496 to b41e7017658e (12 revisions) (flutter/flutter#170514) 2025-06-12 [email protected] Fix `Semantics.identifier` on TextField not working on web (flutter/flutter#170395) 2025-06-12 [email protected] Revert "[a11y] Semantics flag refactor step 2: embedder part" (flutter/flutter#170498) 2025-06-12 [email protected] Copy `packages_autoroller` to `dev/packages_autoroller/run`. (flutter/flutter#170495) 2025-06-11 [email protected] Allow the Slider to always show the value indicator. (flutter/flutter#162223) 2025-06-11 [email protected] Update master branch `CHANGELOG.md` for 3.32.3. (flutter/flutter#170492) 2025-06-11 [email protected] Add time to first frame for `Mac_arm64_ios imitation_game_swiftui` (flutter/flutter#167602) 2025-06-11 [email protected] Make `DropdownMenu` TextField reactive to label changes (flutter/flutter#162062) 2025-06-11 [email protected] Roll Dart SDK from b569246d64bc to 9f741ef8a689 (1 revision) (flutter/flutter#170473) 2025-06-11 [email protected] [impellerc] add GLES shader define. (flutter/flutter#170375) 2025-06-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Pause UIScene migration (#170457)" (flutter/flutter#170487) 2025-06-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix DropdownButtonFormField focusing when replacing FocusNode (#166645)" (flutter/flutter#170477) 2025-06-11 [email protected] Pause UIScene migration (flutter/flutter#170457) 2025-06-11 [email protected] iOS tool dylibs do not need entitlements (flutter/flutter#170448) 2025-06-11 [email protected] Adds getters for different formats of build mode name (flutter/flutter#170251) 2025-06-11 [email protected] Remove all code in `conductor/core` that is now unused (flutter/flutter#170454) 2025-06-11 [email protected] Roll Packages from 974f1522ee03 to 17c02a5 (9 revisions) (flutter/flutter#170462) 2025-06-11 [email protected] Roll Skia from b78fdc3ba26b to 38b9f9b0e496 (7 revisions) (flutter/flutter#170453) 2025-06-11 [email protected] Fix remaining iconbuttontheme overrides in listtile (flutter/flutter#169029) 2025-06-11 [email protected] Fix DropdownButtonFormField focusing when replacing FocusNode (flutter/flutter#166645) 2025-06-11 [email protected] Add CupertinoRadio widget of the week video (flutter/flutter#170027) 2025-06-11 [email protected] Docs: Update docs for suffix icon interaction behaviour (flutter/flutter#169828) 2025-06-11 [email protected] [ Widget Preview ] Don't try to load previews with compile-time errors (flutter/flutter#170262) 2025-06-11 [email protected] [canvaskit] Manually trigger `input` event in text editing tests for Safari (flutter/flutter#170022) 2025-06-11 [email protected] Tiny clean-up in triage docs (flutter/flutter#170429) 2025-06-11 [email protected] Roll pub packages (flutter/flutter#170444) 2025-06-11 [email protected] [Impeller] Avoid creating paths when rendering arcs (flutter/flutter#170398) 2025-06-11 [email protected] Fix date picker calendar tap targets (portrait mode) (flutter/flutter#169163) 2025-06-11 [email protected] Add SK_SUPPORT_UNSPANNED_APIS staging flag (flutter/flutter#170139) 2025-06-11 [email protected] Roll Dart SDK from 6290dfd1d88a to b569246d64bc (4 revisions) (flutter/flutter#170430) 2025-06-11 [email protected] Roll Skia from 910070084066 to b78fdc3ba26b (33 revisions) (flutter/flutter#170412) 2025-06-11 [email protected] Use pathops module groups (flutter/flutter#169857) 2025-06-10 [email protected] Roll pub packages (flutter/flutter#170399) 2025-06-10 [email protected] Verify old version of Python has the `lib2to3` import available (flutter/flutter#170187) 2025-06-10 [email protected] Use "flutter pub get" to resolve packages when building the docs snippets tool (flutter/flutter#170381) 2025-06-10 [email protected] [engine] Reland: ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (flutter/flutter#170389) 2025-06-10 [email protected] Revert "Add call to Dart_NotifyDestroyed when the flutter view is des… (flutter/flutter#170309) 2025-06-10 [email protected] fix: set versionCodeOverride when split-per-abi is specified (flutter/flutter#169816) 2025-06-10 [email protected] fix: Skip native assets build test (flaky, takes 15m+) (flutter/flutter#170383) 2025-06-10 [email protected] Marks Linux web_benchmarks_ddc to be unflaky (flutter/flutter#167631) 2025-06-10 [email protected] Marks Linux web_benchmarks_ddc_hot_reload to be unflaky (flutter/flutter#168807) 2025-06-10 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[engine] ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (#170313)" (flutter/flutter#170377) 2025-06-10 [email protected] [a11y] Semantics flag refactor step 2: embedder part (flutter/flutter#167738) 2025-06-10 [email protected] Roll Dart SDK from c26e7ca44805 to 6290dfd1d88a (5 revisions) (flutter/flutter#170363) 2025-06-10 [email protected] Remove `pubspec.lock` files for `flutter_tools` and `widget_preview_scaffold`. (flutter/flutter#170364) 2025-06-10 [email protected] [engine] ensure engines spawned from an engine using dynamic rendering selection still use the dynamic surface. (flutter/flutter#170313) ...

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels May 20, 2025

bleroux force-pushed the fix_date_picker_calendar_tap_targets_portrait branch from b0d7596 to 36ba5ad Compare May 21, 2025 07:31

flutter-dashboard bot added the will affect goldens Changes to golden files label May 21, 2025

dkwingsmt self-requested a review May 21, 2025 18:21

dkwingsmt approved these changes May 22, 2025

View reviewed changes

packages/flutter/lib/src/material/calendar_date_picker.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/calendar_date_picker.dart Show resolved Hide resolved

bleroux force-pushed the fix_date_picker_calendar_tap_targets_portrait branch from 5e077c4 to 3ce2cb3 Compare May 22, 2025 13:09

dkwingsmt reviewed May 22, 2025

View reviewed changes

packages/flutter/lib/src/material/calendar_date_picker.dart Show resolved Hide resolved

packages/flutter/lib/src/material/calendar_date_picker.dart Outdated Show resolved Hide resolved

bleroux force-pushed the fix_date_picker_calendar_tap_targets_portrait branch from 0d9c857 to 48f7930 Compare May 27, 2025 04:51

bleroux requested a review from dkwingsmt June 2, 2025 06:12

dkwingsmt reviewed Jun 3, 2025

View reviewed changes

packages/flutter/lib/src/material/calendar_date_picker.dart Outdated Show resolved Hide resolved

bleroux force-pushed the fix_date_picker_calendar_tap_targets_portrait branch from 48f7930 to f09df09 Compare June 4, 2025 07:40

dkwingsmt reviewed Jun 4, 2025

View reviewed changes

packages/flutter/lib/src/material/calendar_date_picker.dart Outdated Show resolved Hide resolved

bleroux added 5 commits June 5, 2025 08:48

Fix date picker calendar tap targets (portrait mode)

fd6003f

Add some documentation for row height values

fb8f84e

Update comment per review

0bf3e56

Apply new horizontal padding only for M3 + portrait

3abbe2e

Rename private variable

a82d987

bleroux force-pushed the fix_date_picker_calendar_tap_targets_portrait branch from 11d4e36 to a82d987 Compare June 5, 2025 06:50

bleroux requested a review from dkwingsmt June 5, 2025 09:27

dkwingsmt approved these changes Jun 10, 2025

View reviewed changes

dkwingsmt added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 10, 2025

bleroux added autosubmit Merge PR when tree becomes green via auto submit App and removed autosubmit Merge PR when tree becomes green via auto submit App labels Jun 11, 2025

auto-submit bot added this pull request to the merge queue Jun 11, 2025

Merged via the queue into flutter:master with commit d6b2a95 Jun 11, 2025
76 of 77 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jun 11, 2025

bleroux deleted the fix_date_picker_calendar_tap_targets_portrait branch June 11, 2025 20:41

engine-flutter-autoroll mentioned this pull request Jun 12, 2025

Roll Flutter from 824868f5d1e6 to f79452e3f4ea (94 revisions) flutter/packages#9419

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 12, 2025

d6b2a9521 Fix date picker calendar tap targets (portrait mode) (flutt…

0777d80

…er/flutter#169163)

Piinks mentioned this pull request Jun 13, 2025

Flutter Notable Commits - 2025 #161460

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix date picker calendar tap targets (portrait mode) #169163

Fix date picker calendar tap targets (portrait mode) #169163

bleroux commented May 20, 2025 •

edited

Loading

Uh oh!

flutter-dashboard bot commented May 21, 2025

Uh oh!

dkwingsmt commented May 21, 2025

Uh oh!

bleroux commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 27, 2025

Uh oh!

bleroux commented May 27, 2025

Uh oh!

dkwingsmt commented Jun 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 4, 2025

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 5, 2025

Uh oh!

bleroux commented Jun 10, 2025

Uh oh!

dkwingsmt left a comment

Uh oh!

Uh oh!

Uh oh!

Fix date picker calendar tap targets (portrait mode) #169163

Fix date picker calendar tap targets (portrait mode) #169163

Conversation

bleroux commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Before

After

Related Issue

Tests

Implementation choice

Uh oh!

flutter-dashboard bot commented May 21, 2025

Uh oh!

dkwingsmt commented May 21, 2025

Uh oh!

bleroux commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 27, 2025

Uh oh!

bleroux commented May 27, 2025

Uh oh!

dkwingsmt commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 4, 2025

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 5, 2025

Uh oh!

bleroux commented Jun 10, 2025

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bleroux commented May 20, 2025 •

edited

Loading

dkwingsmt commented Jun 3, 2025 •

edited

Loading