Increase default button and input sizing - #3710
Open
jodeleeuw wants to merge 1 commit into
Open
Conversation
.jspsych-btn computed to roughly 38px tall, below the 44px minimum target size given by WCAG 2.5.5 and the Apple Human Interface Guidelines. Raising the font to 16px and the padding to 12px/16px brings it to roughly 48px on every device, so no separate rule for touch pointers is needed. Text inputs move from 14px to 16px for the same reason, and because iOS Safari zooms the viewport when a field below 16px receives focus. BREAKING CHANGE: this alters the rendered appearance of every existing experiment using jspsych.css. Button size can affect motor response times, so studies partway through data collection should not upgrade. Adds docs/support/migration-v9.md with instructions for restoring the previous sizing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 97c7723 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📦 Preview build readyBuilt from PR head Changed packages: Quick-start HTML: <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6641b02beabffb17b1aa8f53511100517a544673/packages/jspsych/dist/index.browser.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6641b02beabffb17b1aa8f53511100517a544673/packages/jspsych/css/jspsych.css">
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6641b02beabffb17b1aa8f53511100517a544673/packages/plugin-html-keyboard-response/dist/index.browser.min.js"></script>All package URLs
Last updated 2026-07-28 23:13 UTC for PR head |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.jspsych-btncomputed to roughly 38px tall — 14px text at a 1.4 line-height, 8px of vertical padding, and a 1px border. That is below the 44px minimum target size given by WCAG 2.5.5 and the Apple Human Interface Guidelines, which makes experiments awkward to use on phones and tablets without custom CSS.This raises the font to 16px and the padding to 12px/16px, bringing the button to roughly 48px on every device. Doing it in the base rule rather than under
@media (pointer: coarse)means there is no separate touch rule to maintain, and mouse users get a more comfortable target too.Text inputs move from 14px to 16px for the same reason, and because iOS Safari zooms the viewport when a field below 16px receives focus, leaving the participant on a partial view of the trial.
Breaking change
This alters the rendered appearance of every existing experiment that uses
jspsych.css, so it is markedmajorand targeted at 9.0.The reason to treat it as breaking rather than cosmetic is specific to this project: button size can influence how quickly participants respond. A lab that upgrades partway through data collection would get a silent change in the motor demands of its task between participants.
docs/support/migration-v9.mdsays so explicitly and shows how to restore the previous sizing.Changes
packages/jspsych/src/index.scss— the two rules, each with a comment explaining the figuredocs/support/migration-v9.md— new; this is the first breaking change queued for 9.0, and v7 and v8 both have migration guidesmkdocs.yml— nav entry for the new guidedocs/overview/style.md— documents the defaults and how to override them.changeset/touch-target-defaults.md—majorNotes for review
🤖 Generated with Claude Code