fix(a11y): Fix invalid task input labels

[eatyourgreens]

Replace div with span in task input labels.

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

Package

• lib-classifier

Linked Issue and/or Talk Post

• closes A11y: invalid HTML in TaskInputLabel #6547.

How to Review

This shouldn't change any visible behaviour of task input labels. It should silence any React dev warnings about invalid DOM nesting in task input components. Similarly, any warnings in the Storybook should be fixed (does the Storybook check for invalid HTML?)

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: 77.39% (+0.04%) from 77.354%
when pulling c2b3e2c on eatyourgreens:patch-1
into 3e8f2ee on zooniverse:master.

[goplayoutside3]

Oops this was introduced by me in #6532 thanks for catching it!

It should silence any React dev warnings about invalid DOM nesting in task input components.

No dev warnings in the console even with div inside the input.

Similarly, any warnings in the Storybook should be fixed (does the Storybook check for invalid HTML?)

Also no console warnings or invalid html flagged by addon-a11y. Any easy thing to miss.

[eatyourgreens]

No dev warnings in the console even with div inside the input.

That's interesting. I've been using React 19 on another project (which uses Material UI.) It warns about potential hydration errors on every instance of invalid HTML.

Also no console warnings or invalid html flagged by addon-a11y. Any easy thing to miss.

The storybook runs axe, which used to warn about invalid HTML but might not now that the requirement for valid HTML was removed/relaxed in WCAG 2.2.