lib-classifier: Refactor survey task Choice and Questions styling

[mcbouslog]

Package

• lib-classifier

Linked Issue and/or Talk Post

• closes Survey task: Choice and Questions styling improvements #6239
• related to Survey Task: Choices and ChoiceButton styling updates #6238 and Survey Task: design improvement for deselecting choice #6076 - whose related PR lib-classifier: Refactor survey task Choices and ChoiceButton styling #6494 should be merged to production together with this PR

Describe your changes

• refactors Choice and related components per related Figma: https://www.figma.com/design/ASqNlLhicNRzEDhYDA2t8j/Survey?node-id=55-7053&t=BvyK5fjoLo5qzkDS-4

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX?
  • lib-classifier, staging: https://local.zooniverse.org:8080/?project=1634&workflow=2434
• What user actions should my reviewer step through to review this PR?
  • compare Figma designs to local survey task
  • note new collapsable info (choice description and confused withs)
• Which storybook stories should be reviewed?
  • http://localhost:6006/?path=/story/tasks-survey-choice--default
• Are there plans for follow up PR’s to further fix this bug or develop this feature? yes, see related survey task feedback follow-up issues

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

Post-merge

• This PR adds translations keys to English dictionary(s). See guidance for pulling new keys to Lokalise here.

[coveralls]

coverage: 77.823% (-0.05%) from 77.868%
when pulling 2de6216 on lib-classifier_survey-choice-styling
into c146bdf on master.

[mcbouslog]

Previously, if a previously selected choice was selected again, then "Not this" deleted that choice selection. Should "Cancel" still have the same delete choice selection action for previously selected choices?

[seanmiller26]

Really good catch. I think with the coming change to deselecting Choices, the Cancel button can simply close the Choice box and not delete.

[seanmiller26]

This is looking really good! A couple of very minor styling tweaks, including the few we discussed.

As discussed:

• Content padding - lets reduce the side padding to 0px, top and bottom padding at 20px, as well as deleting the drop shadow.

• Bottom line break - now to be below the Identify buttons and above the Done buttons. Match previous styling.

New issues:

• 'Confused with' styling should be consistent with other choices (rounded corners, matching hover state)

• Headings should be set to #5c5c5c

• Can we adjust the circle Choices to be pill shaped when the content is long? ie. with the '11-50' Choice.

• At mobile size the margin is reduced to 3px. Lets keep that consistent with desktop spacing size.

• There is an extra 10px margin below the last line of Choices. Can we remove that OR reduce the margin above the next heading to be 10px? (Trying to tighten up the overall height of the component wherever possible, to fit entirely on the screen)

• Reduce the Choice name (animal name) box to be 15px or 20x height. (Same concern as above)

Dark Mode:

• A selected Choice font should be #000000. (Note: currently on FEM the selected color is #5c5c5c, but that fails contrast. I wonder if this is a universal dark mode value we should change?)