fix(drawing-tools): transcription line handles on smaller screens

[eatyourgreens]

• Adjust the transcription line tool to use smaller handles on screens less than 900px wide. This may help with a problem where the line handles obscure the underlying text on tablets, or smaller desktop viewports.
• Adjust the delete button (for all drawing tools) to have a smaller radius on smaller screens.
• Adjust the delete button position so that it accounts for the angle of a transcription line.
• Delete button position can be configured, in the code, as either before the line start or after the line end.

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

lib-classifier/plugins/drawingTools

Linked Issue and/or Talk Post

• Transcription Task 'cancel' button obscuring text on the subject image #6723

How to Review

The drag handles at the ends of transcription lines should be a more reasonable size here, on smaller screens. I don't think the HANDLE_RADIUS constant affects the delete button, though. Updated to include the delete button too. The delete button position should also adjust when a line is rotated (#6727 (comment))

See #6723 (comment) for a screenshot of the line handles obscuring text on an iPhone.

Documentation Detectives in the dev classifier: https://localhost:8080/?project=bmtcollections/documentation-detectives-transcribing-accession-registers&env=production&workflow=26197

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Bug Fix

• The PR creator has listed user actions to use when testing if bug is fixed
• The bug is fixed
• Unit tests are added or updated

[coveralls]

coverage: 75.525% (+0.03%) from 75.496%
when pulling 9e5d915 on eatyourgreens:transcription-line-handles
into fac6ca6 on zooniverse:master.

[eatyourgreens]

Screenshot for a ~800px tablet screen (emulated in Firefox.) The interactive buttons are a lot smaller. I'm not sure if that makes them easier to use, though.

[eatyourgreens]

This is the delete button position with a negative, rather than positive, buffer ie. button to the left of the first point.

If you're wondering why the delete button is so far away from the start of the line, there's a minimum separation between touch/click targets that I'm trying to adhere too: WCAG 2.5.8: Target Size (minimum.)

The delete button and the drag handle at the start of the line might still fail the overlapping 24px circle test: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html#target-spacing-toolbar

My rough test is: when I have my finger on the first point of the line, is it also clicking the delete button? Is there sufficient affordance for people with shaky hands? Transcription workflows, in particular, might need affordances for an older audience.

[eatyourgreens]

Delete button position now follows the line rotation angle on this branch, so that the delete button always precedes the start of the line.

Screen.Recording.2025-02-28.at.14.35.45.mov