feat: Expand tile drag handle hit area from 34px to 48px [CLUE-398]#2751
feat: Expand tile drag handle hit area from 34px to 48px [CLUE-398]#2751dougmartin wants to merge 1 commit intomasterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR expands the invisible hit target area for the tile drag handle from 34×34px to 48×48px to improve usability, particularly for iFrameInteractive tiles where embedded content can interfere with the small corner target. The visual appearance of the drag handle icon remains unchanged.
Changes:
- Added a new Sass variable
$drag-handle-hit-size(48px) that meets WCAG 2.2 Level AAA touch target recommendations - Restructured the drag handle CSS to separate the 48×48px hit area wrapper from the 34×34px visual icon using flexbox positioning
- Added comprehensive requirements and implementation documentation
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/vars.scss | Adds $drag-handle-hit-size variable for the expanded 48px touch target |
| src/components/tiles/tile-component.scss | Separates wrapper (48×48px hit area) from icon (34×34px visual), positions icon via flexbox |
| specs/CLUE-398-iframeinteractive-tile-hard-to-select/requirements.md | Provides detailed requirements, technical context, and accessibility considerations |
| specs/CLUE-398-iframeinteractive-tile-hard-to-select/implementation.md | Documents the implementation approach and CSS restructuring |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2751 +/- ##
==========================================
- Coverage 86.81% 86.80% -0.02%
==========================================
Files 829 829
Lines 44549 44549
Branches 11456 11456
==========================================
- Hits 38675 38669 -6
- Misses 5525 5531 +6
Partials 349 349
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
collaborative-learning
|
||||||||||||||||||||||||||||
| Project |
collaborative-learning
|
| Branch Review |
CLUE-398-increase-drag-thumb-hitarea
|
| Run status |
|
| Run duration | 08m 01s |
| Commit |
|
| Committer | Doug Martin |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
3
|
Pending
|
4
|
Skipped
|
0
|
Passing
|
158
|
| View all changes introduced in this branch ↗︎ | |
The drag handle in the top-right corner of tiles was difficult to grab, especially on iFrameInteractive tiles where Leaflet map attribution links overlap the handle. This expands the invisible hit target area while keeping the visual gripper icon unchanged. Changes: - Add $drag-handle-hit-size variable (48px) to vars.scss - Style .tool-tile-drag-handle-wrapper as 48×48px hit area - Keep .tool-tile-drag-handle icon at 34×34px, positioned via flexbox - Include commented-out option for grab cursor on full hit area The 48px size meets WCAG 2.2 Level AAA touch target recommendations.
dougmartin
force-pushed
the
CLUE-398-increase-drag-thumb-hitarea
branch
from
604093a to
a92a4f9
Compare
emcelroy
left a comment
emcelroy
left a comment
There was a problem hiding this comment.
Looks good 👍 I did wonder how this might affect certain tile types like the drawing tile. It does make that corner a little awkward to work in, but it's not too bad. And I see that was described as an acceptable tradeoff in requirements.md. I'm assuming the humans involved thought so, too? It's not 100% clear because that's in the "Self-Review" section.
2 participants
The drag handle in the top-right corner of tiles was difficult to grab, especially on iFrameInteractive tiles where Leaflet map attribution links overlap the handle. This expands the invisible hit target area while keeping the visual gripper icon unchanged.
Changes:
The 48px size meets WCAG 2.2 Level AAA touch target recommendations.