The LabXchange project requires custom styling of the radio/checkbox problems, which, due to the element structure, could not be done with CSS alone. We made some changes to the DOM to facilitate these customizations, which this PR submits upstream:
Move the `<input>` items out of their `<label>`, to be siblings, as [is already done in Paragon](https://github.com/edx/paragon/blob/01861049f8f75fec0b0f7d0dbc40e8def58938e1/.storybook/__snapshots__/Storyshots.test.js.snap#L3293-L3313).
This is required so that CSS selectors like these can be used which target the dynamic attributes of the input element:
input:hover + label,
input:checked + label
This is not possible without using sibling selectors, until [browsers begin supporting `:has`](https://caniuse.com/#search=%3Ahas) yet. See [stackoverflow thread](https://stackoverflow.com/questions/45031573/apply-style-to-wrapping-label-of-checked-checkbox) for more info.
Move the `.status` icon out of the radio button label.
This makes the status display more consistent with the checkbox multiple choice items (see screenshot below).
Adds a `submitted` class to mark radio/checkbox items which were submitted as answers during the previous attempt.
This allows us to style these options differently in LabXchange.
*JIRA tickets*: OSPR
Status icon for radio button problems moved:
The other UI changes do not change the appearance of the CAPA problems.
*Sandbox URL*: TBD - sandbox is being provisioned.
*Merge deadline*: None
[ ] @symbolist
[ ] edX reviewer[s] TBD