Skip to content
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.

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

Enlarge Traffic date picker tap targets #22742

Merged
merged 1 commit into from
Mar 1, 2024

Conversation

guarani
Copy link
Contributor

@guarani guarani commented Mar 1, 2024

Fixes #22728

The goal here is to make the buttons in the date picker easier to tap while maintaining the same design and layout.

  • The period drop-down was made more easily tappable by increasing its dimensions (via padding) while keeping the visible part (grey oval-shaped button) the same size.
  • The arrows were made more easily tappable by increasing their height (via padding)while keeping the arrows themselves the same size.

The date picker should still match the designs, while the invisible touch areas have increased in size.

To test

  1. Navigate to the Traffic tab
  2. Use the date picker (drop-down and left and right arrows) and verify that they are easier to tap than before.

Regression Notes

  1. Potential unintended areas of impact

The Traffic screen's date picker

  1. What I did to test those areas of impact (or what existing automated tests I relied on)

Manual testing using the below testing checklist

  1. What automated tests I added (or what prevented me from doing so)

This is a layout fix, not suitable for UI tests or unit tests

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist:

  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@guarani guarani added this to the 24.4 milestone Mar 1, 2024
@dangermattic
Copy link
Collaborator

2 Warnings
⚠️ View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity.
⚠️ This PR is assigned to the milestone 24.4. This milestone is due in less than 4 days.
Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

@guarani guarani requested a review from staskus March 1, 2024 02:41
@wpmobilebot
Copy link
Contributor

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr22742-f58870b
Version24.3
Bundle IDorg.wordpress.alpha
Commitf58870b
App Center BuildWPiOS - One-Offs #9037
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr22742-f58870b
Version24.3
Bundle IDcom.jetpack.alpha
Commitf58870b
App Center Buildjetpack-installable-builds #8080
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@guarani
Copy link
Contributor Author

guarani commented Mar 1, 2024

One thing I think is worth noting is that the hit targets that iOS puts on the buttons is larger than the size of the buttons themselves (I'mnot sure how many points it is). Before this change, the button's size (determined by their content) was:

With this PR, they change to:

The period drop-down feels much easier to tap for me. The left and right chevron buttons also do but might have room for improvement. I tried to increase their width, but they shifted too much after removing the padding. I'm keen to hear your thoughts on whether this should be improved.

Copy link
Contributor

@staskus staskus left a comment

Choose a reason for hiding this comment

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

The period drop-down feels much easier to tap for me.

Agree.

The left and right chevron buttons also do but might have room for improvement. I tried to increase their width, but they shifted too much after removing the padding. I'm keen to hear your thoughts on whether this should be improved.

It does feel better as well, I think the only other improvement would be to increase the chevron size itself. We can wait for feedback about that!

@staskus staskus merged commit 619b7c6 into trunk Mar 1, 2024
25 of 30 checks passed
@staskus staskus deleted the task/increase-date-picker-tap-targets branch March 1, 2024 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Increase the touch area of Traffic date picker buttons
4 participants