Use explicit labels for TaskInput components (#5738)

* Use explicit labels for TaskInput components - Clarify the naming of the task label and text for `TaskInput` components. - Give each input a unique ID, based on the input type, task key and index. - Explicitly label each input with the HTML `for` attribute. - Clarify the naming of the label text in `TaskInputLabel`. * Use the inline markdown parser * Remove an unused export --------- Co-authored-by: Delilah C <[email protected]>
zooniverse · Dec 20, 2023 · 995a00e · 995a00e
1 parent fb179c5
commit 995a00e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 39 deletions.
diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js
@@ -36,7 +36,7 @@ function getHoverStyles (props, active = false) {
   }
 }
 
-export const StyledTaskLabel = styled(Text)`
+const StyledText = styled(Text)`
   align-items: baseline;
   ${props => props.theme.dark ?
     css`background: transparent;` :
@@ -50,27 +50,27 @@ export const StyledTaskLabel = styled(Text)`
   margin-bottom: .5em;
 `
 
-export const StyledTaskInput = styled.label`
+const StyledLabel = styled.label`
   position: relative;
 
   input {
     opacity: 0.01;
     position: absolute;
   }
 
-  input:enabled + ${StyledTaskLabel}:hover {
+  input:enabled + ${StyledText}:hover {
     ${props => getHoverStyles(props)}
   }
 
-  input:focus + ${StyledTaskLabel} {
+  input:focus + ${StyledText} {
     ${props => getHoverStyles(props)}
   }
 
-  input:enabled:active + ${StyledTaskLabel} {
+  input:enabled:active + ${StyledText} {
     ${props => getHoverStyles(props, true)}
   }
 
-  input:checked + ${StyledTaskLabel} {
+  input:checked + ${StyledText} {
     ${props => css`background: ${props.theme.global.colors.brand};`}
     ${props => props.theme.dark ?
       css`border: 2px solid ${props.theme.global.colors['light-1']};` :
@@ -79,8 +79,8 @@ export const StyledTaskInput = styled.label`
     ${props => props.theme.dark ? css`color: ${props.theme.global.colors.text.dark};` : css`color: white;`}
   }
 
-  input:focus:checked + ${StyledTaskLabel},
-  input:checked + ${StyledTaskLabel}:hover {
+  input:focus:checked + ${StyledText},
+  input:checked + ${StyledText}:hover {
     ${props => props.theme.dark ?
       css`border: 2px solid ${props.theme.global.colors['light-1']};` :
       css`border: 2px solid ${props.theme.global.colors['neutral-1']};`
@@ -91,7 +91,7 @@ export const StyledTaskInput = styled.label`
     }
   }
 
-  input:checked + ${StyledTaskLabel}:hover {
+  input:checked + ${StyledText}:hover {
     > div > span > p {
       ${props => props.theme.dark ?
         css`color: ${props.theme.global.colors.text.dark};` :
@@ -103,7 +103,7 @@ export const StyledTaskInput = styled.label`
 
 const DEFAULT_HANDLER = () => true
 
-export function TaskInput ({
+export function TaskInput({
   autoFocus = false,
   checked = false,
   className = '',
@@ -112,28 +112,30 @@ export function TaskInput ({
   label = '',
   labelIcon = null,
   labelStatus = null,
-  name = '',
+  name,
   onChange = DEFAULT_HANDLER,
   type
 }) {
-
+  const id = `${type}-${name}-${index}`
   return (
-    <StyledTaskInput
+    <StyledLabel
       className={className}
+      htmlFor={id}
     >
       <input
         autoFocus={autoFocus}
         checked={checked}
         disabled={disabled}
+        id={id}
         name={name}
         onChange={onChange}
         type={type}
         value={index}
       />
-      <StyledTaskLabel margin={{ vertical: 'small', horizontal: 'none' }}>
+      <StyledText margin={{ vertical: 'small', horizontal: 'none' }}>
         <TaskInputLabel label={label} labelIcon={labelIcon} labelStatus={labelStatus} />
-      </StyledTaskLabel>
-    </StyledTaskInput>
+      </StyledText>
+    </StyledLabel>
   )
 }
 
@@ -146,7 +148,7 @@ TaskInput.propTypes = {
   label: PropTypes.string,
   labelIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
   labelStatus: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   type: PropTypes.string.isRequired
 }

diff --git a/...sifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js b/...sifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Markdownz } from '@zooniverse/react-components'
 import { doesTheLabelHaveAnImage } from '../../helpers'
 
-export const StyledTaskInputLabelWrapper = styled.span`
+const StyledTaskInputLabelWrapper = styled.span`
   &:first-child {
     margin-top: 0;
   }
@@ -14,7 +14,9 @@ export const StyledTaskInputLabelWrapper = styled.span`
   }
 `
 
-export const StyledLabel = styled(Text)`
+const StyledText = styled(Text)`
+  display: block;
+  margin: 1em 0;
   padding-left: 15px;
   padding-right: 15px;
 
@@ -24,16 +26,11 @@ export const StyledLabel = styled(Text)`
   }
 `
 
-const StyledSpan = styled.span`
-  display: block;
-  margin: 1em 0;
-`
-
-const inlineComponents = {
-  p: StyledSpan
-}
-
-export default function TaskInputLabel ({ label, labelIcon, labelStatus }) {
+export default function TaskInputLabel({
+  label = '',
+  labelIcon = null,
+  labelStatus = null
+}) {
   const howShouldTheLabelBeAligned = ((label && doesTheLabelHaveAnImage(label)) || (label && labelIcon))
     ? 'start'
     : 'center'
@@ -47,21 +44,15 @@ export default function TaskInputLabel ({ label, labelIcon, labelStatus }) {
     >
       {labelIcon &&
         labelIcon}
-      <StyledLabel>
-        <Markdownz components={inlineComponents}>{label}</Markdownz>
-      </StyledLabel>
+      <StyledText>
+        <Markdownz inline >{label}</Markdownz>
+      </StyledText>
       {labelStatus &&
         labelStatus}
     </Box>
   )
 }
 
-TaskInputLabel.defaultProps = {
-  label: '',
-  labelIcon: null,
-  labelStatus: null
-}
-
 TaskInputLabel.propTypes = {
   label: PropTypes.string,
   labelIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),

diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/index.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/index.js
@@ -1 +1 @@
-export { default, StyledTaskInput } from './TaskInput'
+export { default } from './TaskInput'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default, StyledTaskInput } from './TaskInput'
		export { default } from './TaskInput'