Firefox Transcription Task 'page jumping' after viewing completed transcriptions

[snblickhan]

FEM

Choose from the list:

• [ ] app-content-pages
• [ ] app-project
• [x] lib-classifier
• [ ] lib-panoptes-js
• [ ] lib-react-components
• [ ] unknown

Describe the bug

When classifying on Transcription Task projects in FEM on Firefox, opening a completed (grey) annotation and closing it causes the page to 'reset' to the top of the page, even if the view was scrolled down to the bottom when the modal was opened. This does not happen when clicking into pink lines or when placing a new transcription, only when closing the grey 'view finished transcription' box. Note: this does not happen on Chrome, and shouldn't happen at all, as it's a bad experience for the user.

To Reproduce

Steps to reproduce the behavior:

1. Open Firefox
2. Go to https://www.zooniverse.org/projects/printmigrationnetwork/print/classify/workflow/20199/subject-set/111064/subject/84319114
3. Scroll down to bottom of the subject image (so that top of the image is not in viewport)
4. Click on a grey line to view finished transcription
5. Click on 'x' to close the view transcription box
6. See error (screen will jump to top of the classify page)

Screenshots

Screen recording 1: grey box behavior only on Beyond Borders on Firefox

https://github.com/user-attachments/assets/ce2fbc1f-5698-4a6b-a2e6-4fffe0ed8568

Screen recording 2: grey box behavior on PRINT on Firefox, also w/ proof that other uses of the Transcription Task don't cause this same kind of 'jump'

https://github.com/user-attachments/assets/281e672f-ea86-47f0-97f2-74c177c21000

Expected behavior

Closing a modal shouldn't change the page focus at all.

Device information

Desktop (please complete the following information):

• OS: MacOS Ventura 13.6.9
• Browser: Firefox
• Version: 127.0.2

Additional context

Originally reported on Talk: https://www.zooniverse.org/projects/mainehistory/beyond-borders-transcribing-historic-maine-land-documents/talk/4453/3428338?comment=5631500

[snblickhan]

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

https://github.com/user-attachments/assets/64440326-f251-480c-8d8d-e5c0120680e3

[eatyourgreens]

Poor focus management strikes again. This is also an accessibility issue, specifically WCAG 2.4.3, which is a level A requirement.

A Web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set within the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.

https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Focus order must be predictable. In this case, focus should return to the grey line when the modal closes.

EDIT: it’s also possible that the grey line is focused, but Firefox isn’t scrolling it into view for some reason. In that case, you can store the window scroll position and manually restore it. https://github.com/zooniverse/front-end-monorepo/blob/9dc3dc3fc4fa70ed5929f9f90d81e13a3bca3b3b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js#L34-L42

[eatyourgreens]

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

This is caused by the viewer layout changing when you move from one task to another (which is weird because the viewer styling is supposed to be independent of the task.) Watch how grid-template-columns changes here. In particular, the width of the first column changes from 90px (drawing task) to 75px (question task.) The subject controls are switching into small-screen layout for some reason.

https://github.com/user-attachments/assets/a38a4159-18d8-46e3-b032-a5514ec9799b

The height of the task navigation buttons, and the width of the subject controls (play button etc.) change from the drawing task to the question task. Design and layout should be consistent!

EDIT: the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG <rect> that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?

Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.

[eatyourgreens]

Sorry, something else I've noticed in that Science Scribbler video. On the question task, the pencil button is active, even though drawing is disabled.

The layout reflow bug is also specific to Science Scribbler. I have a workflow with two drawing tasks followed by a question task: https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3370?env=staging

That workflow does not reflow the layout when you go from the drawing tasks to the question task.

[eatyourgreens]

6272 fixes the focus management bug for transcription tasks in Firefox, where focus is jumping to the document body when the consensus popup closes.

You probably want to open a separate issue for the subject viewer changing size in Science Scribbler. Incidentally, there's still an open issue for Science Scribbler where the thickness of the rendered SVG paths varies depending on the size of the subject image (#6167.)

[eatyourgreens]

I moved all the Science Scribbler comments to #6275.