refactor(classifier): use native browser SVG scaling for drawing tools

[eatyourgreens]

• remove manual scaling code from strokeWidth for all the SVG drawing marks. To be honest, it has never worked very well. When I wrote it, I didn't know that you can disable stroke scaling programmatically in SVG.
• add vector-effect="non-scaling-stroke" to all the SVG drawing marks. This will make the displayed stroke width independent of the scaling of the SVG <image>, at all zoom levels.
• style marks with :focus-visible so that the focus ring is only shown for keyboard interactions.

Screen.Recording.2024-04-28.at.12.06.37.mov

Package

• lib-classifier/plugins/drawingTools

How to Review

This staging workflow has a mixture of drawing tools:
https://localhost:8080/?project=908&workflow=3370

You can also try out the drawing step in the I Fancy Cats workflow or try out a transcription task, with annotations from Caesar:
https://localhost:8080/?project=mainehistory/beyond-borders-transcribing-historic-maine-land-documents&env=production

You can test the focus styling by tabbing through the page, to check that drawn marks have focus styling when focused (WCAG Success Criterion 2.4.7: focus visible.) When a mark has keyboard focus, Enter will open any associated subtask popup, which should also be fully keyboard accessible. Backspace will delete the focused mark (WCAG Success Criterion 2.1.1: Keyboard.)

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

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 79.285% (-0.04%) from 79.323%
when pulling 4fa507f on eatyourgreens:drawing-non-scaling-stroke
into 9a7a630 on zooniverse:master.