This task is part of improving the describe step of the Upload Wizard on Commons T358765. Refer to overall design discovery and design goals in this ticket T358614
In order to simplify the information that users need to fill out describe step, the following changes to the UI are proposed
- **Visual improvements:** Improve the overall layout by following new styling and spacing for the form and its fields
- **Copy improvements:** Changing headers and helper text for each of the field
- **Required field:** Making caption a required field
- **Changes to description field:** Adding an option for users to copy their caption to description
=====
**Title**
**[[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2702-56529&mode=design&t=JqnF0FEUMSUZuyUa-4 | Link to UI ]]**
[x] Update the label for the title field from image title to title
[x] Remove the label description from the title field
[x] Show a single line input box
[x] Do not show any error message on load of the page. Error messages will only be shown when the user proceeds without entering required input.
[x] Update the copy for the current error message for when the title is not unique as show [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2724-2419&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[x] If the user proceeds without a title show the error as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2726-28911&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[] Pre-fill the title using file name if it matches the descriptive criteria, if not leave it blank
[] Update the copy for the current error message for when the user has not entered a descriptive title as show [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2724-20478&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]].
[] ~~Update the copy on the "view example" dialog as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2727-27686&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]~~ (pending community review see discussion below)
**Caption**
**[[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2741-25494&mode=design&t=JqnF0FEUMSUZuyUa-4 | Link to UI ]]**
[] Make the caption field a required field. Remove the optional label
[] Update the label description to the following copy: "One-line explanation"
[] Have the language selector take the full width of the input box
[] Remove the delete icon for the first caption
[] Show the delete icon for all the subsequent language captions that users adds as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2724-22543&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[] Show a single line caption input box
[] If the user proceeds without entering a caption show an error message as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2724-23632&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
**Description**
**[[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2741-25804&mode=design&t=JqnF0FEUMSUZuyUa-4| Link to UI ]]**
[] Description remains a required field
[] Update the label description to the following copy: "We recommend providing detailed information on this work if you can"
[] Automatically copy caption to description by default unless the "same as caption" box is unchecked
[] Hide the description input box and show "same as caption" checkbox selected by default as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2702-56529&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[] When the "same as caption" checkbox is unselected, reveal the description blank input box as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2726-29868&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[] Remove the delete icon for the first caption
[] Show the delete icon for all the subsequent language descriptions that users adds as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2741-26114&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]
[] Show a multi line description input box ~~with the ability for the user to expand the input box using a corner handle.~~ Keep the current functionality of it auto expanding as one needs more space.
[] If the user proceeds without entering a description show an error message as shown [[ https://www.figma.com/file/PSsy485pa5YAiMsUrcoOui/Commons-upload-wizard?type=design&node-id=2726-30522&mode=design&t=JqnF0FEUMSUZuyUa-4 | here ]]