fix(a11y): Volumetric Viewer slider control

[eatyourgreens]

A couple of small fixes for the slider control:

• a labelled button to advance by 10 frames (keyboard and screen reader operability is a level A WCAG requirement for clickable controls.)
• ::moz-range-thumb styling for Firefox.
• fixes the range input so that you can slide it in Firefox.

Tested with Chrome, Firefox, and Safari on MacOS 14.7.3.

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

Package

• lib-subject-viewers

How to Review

You can try out these changes in the storybook. The slider control should be operable from the keyboard on this branch, but not on the main branch.
http://localhost:6008/?path=/story/components-volumetricviewer--volume-64-x-64-x-64

Note that the slider control can't be used with a pointer device (mouse, trackpad etc.) in Firefox. That isn't fixed here. I've also fixed the slider so that you can now use it in Firefox.

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.491%. remained the same
when pulling 958e56c on eatyourgreens:vv-viewer-fixes
into 6900629 on zooniverse:master.

[goplayoutside3]

Hey @eatyourgreens the volumetric viewer is still in active development. @kieftrav has a PR incoming with very similar changes to address both design and some accessibility considerations.

In the future please don't focus on code for features that are not yet publicly launched via a Zooniverse project. In the meantime I'll tag @kieftrav to see if he'd like to review this PR, or include the fix in his own.

[eatyourgreens]

OK but heads up that the code at present fails WCAG level A in several places.

[eatyourgreens]

@kieftrav has a PR incoming with very similar changes to address both design and some accessibility considerations.

It would be very good to fix the expandable panels so that they are coded as accordian panels, not divs with onClick handlers (and zero keyboard or screen reader accessibility.)

Tested in the Volumetric Viewer storybook, using Tab (or VO-RIght Arrow) to access the viewer controls, and VoiceOver to read the panel roles and states.

There's also a complete lack of visual focus indicators, to tell you where keyboard focus is at any time.