add id's and htmlFor attributes to labels and inputs (#2281)

maproulette · Mar 8, 2024 · f5a7047 · f5a7047
1 parent 01b3c2e
commit f5a7047
Show file tree

Hide file tree

Showing 26 changed files with 113 additions and 61 deletions.
diff --git a/src/components/ActivityListing/ActivityListing.js b/src/components/ActivityListing/ActivityListing.js
@@ -27,13 +27,14 @@ export const Activity = props => {
          {props.toggleIsGrouped &&
           <React.Fragment>
             <input
+              id="group-label"
               type="checkbox"
               className="mr-checkbox-toggle mr-ml-4 mr-mr-px"
               checked={props.isGrouped}
               onClick={props.toggleIsGrouped}
               onChange={() => null}
             />
-            <label className="mr-ml-2"><FormattedMessage {...messages.groupLabel} /></label>
+            <label htmlFor="group-label" className="mr-ml-2"><FormattedMessage {...messages.groupLabel} /></label>
           </React.Fragment>
          }
          <div className="mr-timeline mr-links-green-lighter">

diff --git a/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.js b/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.js
@@ -999,18 +999,20 @@ function configureCustomTaskStyles(props, configureTaskStyleRules) {
       <div>
         <div className="radio">
           <input
+            id="custom-task-style-default-label" 
             type="radio"
             name="no-styles"
             className="mr-mr-1.5"
             checked={!props.formData}
             onChange={() => props.onChange(false)}
           />
-          <label className="mr-mr-2 mr-text-grey-lighter">
+          <label htmlFor="custom-task-style-default-label" className="mr-mr-2 mr-text-grey-lighter">
             <FormattedMessage {...messages.customTaskStyleDefaultLabel} />
           </label>
         </div>
         <div className="radio">
           <input
+            id="custom-task-style-custom-label"
             type="radio"
             name="custom-styles"
             className="mr-mr-1.5"
@@ -1019,7 +1021,7 @@ function configureCustomTaskStyles(props, configureTaskStyleRules) {
               props.onChange(true);
             }}
           />
-          <label className="mr-text-grey-lighter">
+          <label htmlFor="custom-task-style-custom-label" className="mr-text-grey-lighter">
             <FormattedMessage {...messages.customTaskStyleCustomLabel} />
           </label>
         </div>

diff --git a/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js b/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js
@@ -77,8 +77,14 @@ export default class ProjectOverview extends Component {
                   prompt={<FormattedMessage {...messages.confirmDisablePrompt} />}
                   skipConfirmation={() => !this.props.project.enabled}
                 >
-                  <label className="switch-container" onClick={() => this.props.toggleProjectEnabled(this.props.project)}>
-                    <input type="checkbox" checked={this.props.project.enabled} disabled={!manager.canWriteProject(this.props.project)} onChange={() => null} />
+                  <label htmlFor="switch-input" className="switch-container" onClick={() => this.props.toggleProjectEnabled(this.props.project)}>
+                    <input 
+                      id="switch-input" 
+                      type="checkbox" 
+                      checked={this.props.project.enabled} 
+                      disabled={!manager.canWriteProject(this.props.project)} 
+                      onChange={() => null} 
+                    />
                     <span className="slider round" onClick={() => null}></span>
                   </label>
                 </ConfirmAction>

diff --git a/src/components/AdminPane/Manage/RebuildTasksControl/RebuildTasksControl.js b/src/components/AdminPane/Manage/RebuildTasksControl/RebuildTasksControl.js
@@ -87,10 +87,11 @@ export class RebuildTasksControl extends Component {
     if (challenge.dataSource() === 'local') {
       originDateField = (
         <div>
-          <label className="mr-text-orange mr-mr-2">
+          <label htmlFor="data-origin-date-input" className="mr-text-orange mr-mr-2">
             <FormattedMessage {...messages.dataOriginDateLabel} />
           </label>
           <input
+            id="data-origin-date-input"
             className="mr-text-white mr-bg-transparent mr-border mr-border-white mr-rounded mr-p-2"
             type="date"
             label={this.props.intl.formatMessage(messages.dataOriginDateLabel)}
@@ -168,12 +169,13 @@ export class RebuildTasksControl extends Component {
                 <div className="mr-w-full mr-flex mr-justify-between mr-items-center mr-mt-2">
                   <div>
                     <input
+                      id="remove-unmatched-input"
                       type="checkbox"
                       className="mr-mr-2"
                       checked={this.state.removeUnmatchedTasks}
                       onChange={this.toggleRemoveUnmatchedTasks}
                     />
-                    <label className="mr-text-orange">
+                    <label htmlFor="remove-unmatched-input" className="mr-text-orange">
                       <FormattedMessage {...messages.removeUnmatchedLabel} />
                     </label>
                   </div>

diff --git a/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js b/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js
@@ -25,8 +25,13 @@ export class VisibilitySwitch extends Component {
 
     return (
       <div className="mr-flex mr-justify-center">
-        <label className="switch-container">
-          <input type="checkbox" checked={this.props.challenge.enabled} onChange={() => null}/>
+        <label htmlFor="switch-label" className="switch-container">
+          <input 
+            type="checkbox" 
+            id="switch-label" 
+            checked={this.props.challenge.enabled} 
+            onChange={() => null}
+          />
           <span className="slider round" onClick={this.toggleVisible}></span>
         </label>
       </div>

diff --git a/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js b/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js
@@ -98,27 +98,29 @@ export default class LeaderboardWidget extends Component {
       <div className="mr-text-xs mr--mb-5">
         <span>
           <input
+            id="user-mapper-type-label"
             type="radio"
             name="showByMappers"
             className="mr-radio mr-mr-1"
             checked={userType === USER_TYPE_MAPPER}
             onClick={() => this.setUserType(USER_TYPE_MAPPER)}
             onChange={_noop}
           />
-          <label className="mr-ml-1 mr-mr-4">
+          <label htmlFor="user-mapper-type-label" className="mr-ml-1 mr-mr-4">
             <FormattedMessage {...messages[USER_TYPE_MAPPER]}/>
           </label>
         </span>
         <span>
           <input
+            id="user-reviewer-type-label"
             type="radio"
             name="showByReviewers"
             className="mr-radio mr-mr-1"
             checked={userType === USER_TYPE_REVIEWER}
             onClick={() => this.setUserType(USER_TYPE_REVIEWER)}
             onChange={_noop}
           />
-          <label className="mr-ml-1 mr-mr-4">
+          <label htmlFor="user-reviewer-type-label" className="mr-ml-1 mr-mr-4">
             <FormattedMessage {...messages[USER_TYPE_REVIEWER]}/>
           </label>
         </span>

diff --git a/src/components/ChallengeDetail/FlagCommentInput.js b/src/components/ChallengeDetail/FlagCommentInput.js
@@ -72,7 +72,7 @@ export class FlagCommentInput extends Component {
     const minCharacterCount = 100
     return (
       <div className="mr-mt-2">
-        <label className="mr-text-white-50">
+        <label htmlFor="root_email" className="mr-text-white-50">
         <FormattedMessage {...messages.email} />
         </label>
         <input className="form-control mr-mb-4" type="email" id="root_email" label="Email address" placeholder="Enter your email" value={this.state.emailValue} onChange={(event) => this.setState({ emailValue: event.target.value })} />
@@ -139,12 +139,13 @@ export class FlagCommentInput extends Component {
         )}
         <div className="form mr-flex mr-items-baseline">
           <input
+            id="review-label"
             type="checkbox"
             className="mr-mr-2"
             checked={this.state.checked}
             onChange={this.handleToggle}
           />
-          <label className="mr-text-white-50">
+          <label htmlFor="review-label" className="mr-text-white-50">
             <FormattedMessage {...messages.review} />
           </label>
         </div>

diff --git a/src/components/ChallengePane/ChallengeFilterSubnav/FilterByCategorizationKeywords.js b/src/components/ChallengePane/ChallengeFilterSubnav/FilterByCategorizationKeywords.js
@@ -144,7 +144,7 @@ const ListFilterItems = function (props) {
         </div>
       ) : null}
       <div className="mr-flex mr-items-center mr-py-3">
-        <label className="mr-text-green-lighter mr-mr-4 mr-cursor-pointer"><FormattedMessage {...messages.add}/></label>
+        <label htmlFor="input-name" className="mr-text-green-lighter mr-mr-4 mr-cursor-pointer"><FormattedMessage {...messages.add}/></label>
         <form onSubmit={(e) => {
           e.preventDefault() // Prevent the default form submission behavior
           const value = e.target.elements.inputName.value // Replace 'inputName' with the actual name attribute of the input
@@ -156,6 +156,7 @@ const ListFilterItems = function (props) {
           <input
             className="mr-flex mr-items-center mr-border-none mr-text-white mr-rounded mr-bg-black-15 mr-shadow-inner mr-px-2"
             name="inputName"
+            id="input-name"
           />
         </form>
       </div>

diff --git a/src/components/ChallengePane/ChallengeFilterSubnav/FilterByLocation.js b/src/components/ChallengePane/ChallengeFilterSubnav/FilterByLocation.js
@@ -55,27 +55,29 @@ export class FilterByLocation extends Component {
         </span>
         <span>
           <input
+            id="location-input"
             type="radio"
             name="intersectsMap"
             className="mr-radio mr-mr-1"
             checked={this.props.searchFilters.location === ChallengeLocation.intersectingMapBounds}
             onClick={() => this.updateFilter(ChallengeLocation.intersectingMapBounds)}
             onChange={_noop}
           />
-          <label className="mr-ml-1 mr-mr-4">
+          <label htmlFor="location-input" className="mr-ml-1 mr-mr-4">
             {localizedLocationLabels[ChallengeLocation.intersectingMapBounds]}
           </label>
         </span>
         <span>
           <input
+            id="any-location-input"
             type="radio"
             name="intersectsMap"
             className="mr-radio mr-mr-1"
             checked={this.props.searchFilters.location !== ChallengeLocation.intersectingMapBounds}
             onClick={() => this.updateFilter(null)}
             onChange={_noop}
           />
-          <label className="mr-ml-1 mr-mr-4">
+          <label htmlFor="any-location-input" className="mr-ml-1 mr-mr-4">
             {localizedLocationLabels.any}
           </label>
         </span>

diff --git a/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js b/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js
@@ -232,14 +232,15 @@ export const ColumnRadioField = function(props) {
       {props.schema.enum.map((option, index) =>
         <div key={option} className="mr-flex mr-items-center mr-my-2">
           <input
+            id={props.schema.enumNames ? props.schema.enumNames[index] : props.schema.enum[index]}
             type="radio"
             name={props.name}
             value={option}
             checked={props.formData === option}
             className="mr-radio mr-mr-2"
             onChange={() => props.onChange(option)}
           />
-          <label onClick={() => props.onChange(option)}>
+          <label htmlFor={props.schema.enumNames ? props.schema.enumNames[index] : props.schema.enum[index]} onClick={() => props.onChange(option)}>
             <MarkdownContent
               compact
               markdown={

diff --git a/src/components/EnhancedMap/LayerToggle/LayerToggle.js b/src/components/EnhancedMap/LayerToggle/LayerToggle.js
@@ -281,12 +281,13 @@ const SimpleLayerToggle = props => {
       onClick={props.toggleLayerActive}
     >
       <input
+        id={props.layerLabel}
         type="checkbox"
         className="mr-checkbox-toggle"
         checked={props.isLayerActive}
         onChange={_noop}
       />
-      <label className="mr-ml-3 mr-text-orange">{props.layerLabel}</label>
+      <label htmlFor={props.layerLabel} className="mr-ml-3 mr-text-orange">{props.layerLabel}</label>
     </div>
   )
 }

diff --git a/src/components/SearchBox/SearchBox.js b/src/components/SearchBox/SearchBox.js
@@ -88,7 +88,7 @@ export default class SearchBox extends Component {
           this.props.className
         )}
       >
-        <label className="mr-mr-2 mr-flex mr-items-center" htmlFor="input-search">
+        <label className="mr-mr-2 mr-flex mr-items-center">
           {!isLoading && !this.props.suppressIcon &&
            <SvgSymbol
              sym="search-icon"

diff --git a/src/components/TaskClusterMap/TaskClusterMap.js b/src/components/TaskClusterMap/TaskClusterMap.js
@@ -806,8 +806,9 @@ export class TaskClusterMap extends Component {
     return (
       <div className={classNames('taskcluster-map', {"full-screen-map": this.props.isMobile}, this.props.className)}>
         {canClusterToggle && !this.state.searchOpen && !this.props.loading &&
-         <label className="mr-absolute mr-z-10 mr-top-0 mr-left-0 mr-mt-2 mr-ml-2 mr-shadow mr-rounded-sm mr-bg-black-50 mr-px-2 mr-py-1 mr-text-white mr-text-xs mr-flex mr-items-center">
+         <label htmlFor="show-clusters-input" className="mr-absolute mr-z-10 mr-top-0 mr-left-0 mr-mt-2 mr-ml-2 mr-shadow mr-rounded-sm mr-bg-black-50 mr-px-2 mr-py-1 mr-text-white mr-text-xs mr-flex mr-items-center">
            <input
+             id="show-clusters-input"
              type="checkbox"
              className="mr-mr-2"
              checked={this.props.showAsClusters}

diff --git a/src/components/TaskConfirmationModal/AdjustFiltersOverlay.js b/src/components/TaskConfirmationModal/AdjustFiltersOverlay.js
@@ -26,10 +26,11 @@ export default class AdjustFiltersOverlay extends Component {
 
     const reviewStatusFilter =
       <div className="mr-mt-4">
-        <label className="mr-w-32 mr-inline-block">
+        <label htmlFor="review-status-label" className="mr-w-32 mr-inline-block">
           <FormattedMessage {...messages.reviewStatusLabel} />
         </label>
         <select
+          id="review-status-label"
           className="mr-text-white mr-select mr-w-48"
           onChange={event => this.props.filterChange('reviewStatus', event.target.value)}
           value={currentFilters.reviewStatus ? currentFilters.reviewStatus : 'all'}
@@ -51,10 +52,11 @@ export default class AdjustFiltersOverlay extends Component {
 
     const statusFilter =
       <div className="mr-mt-4">
-        <label className="mr-w-32 mr-inline-block">
+        <label htmlFor="status-select" className="mr-w-32 mr-inline-block">
           <FormattedMessage {...messages.statusLabel} />
         </label>
         <select
+          id="status-select"
           className="mr-text-white mr-select mr-w-48"
           onChange={event => this.props.filterChange('status', event.target.value)}
           value={currentFilters.status ? currentFilters.status : 'all'}
@@ -74,10 +76,11 @@ export default class AdjustFiltersOverlay extends Component {
 
     const priorityFilter =
       <div className="mr-mt-4">
-        <label className="mr-w-32 mr-inline-block">
+        <label htmlFor="priority-select" className="mr-w-32 mr-inline-block">
           <FormattedMessage {...messages.priorityLabel} />
         </label>
         <select
+          id="priority-label" 
           className="mr-text-white mr-select mr-w-48"
           onChange={event => this.props.filterChange('priority', event.target.value)}
           value={currentFilters.priority ? currentFilters.priority : 'all'}
@@ -97,10 +100,11 @@ export default class AdjustFiltersOverlay extends Component {
 
     const challengeFilter =
       <div className="mr-mt-4">
-        <label className="mr-w-32 mr-inline-block">
+        <label htmlFor="challenge-label" className="mr-w-32 mr-inline-block">
           <FormattedMessage {...messages.challengeLabel} />
         </label>
-        <input type="text"
+        <input id="mapper-label" 
+               type="text"
                className="mr-text-white mr-input mr-w-64"
                value={currentFilters.challenge || ""}
                onChange={event => this.props.filterChange('challenge', event.target.value)}/>
@@ -130,10 +134,11 @@ export default class AdjustFiltersOverlay extends Component {
 
     const mapperFilter =
       <div className="mr-mt-4">
-        <label className="mr-w-32 mr-inline-block">
+        <label htmlFor="mapper-label" className="mr-w-32 mr-inline-block">
           <FormattedMessage {...messages.mapperLabel} />
         </label>
-        <input type="text"
+        <input id="mapper-label" 
+               type="text"
                className="mr-text-white mr-input mr-w-64"
                value={currentFilters.reviewRequestedBy}
                onChange={event => this.props.filterChange('reviewRequestedBy', event.target.value)}/>

diff --git a/src/components/TaskConfirmationModal/TaskConfirmationModal.js b/src/components/TaskConfirmationModal/TaskConfirmationModal.js
@@ -280,13 +280,14 @@ export class TaskConfirmationModal extends Component {
                     this.props.user.settings.needsReview !== needsReviewType.mandatory &&
                       <div className="form mr-flex mr-items-baseline">
                         <input
+                          id="review-input"
                           type="checkbox"
                           className="mr-mr-2"
                           checked={this.props.needsReview}
                           onClick={this.props.toggleNeedsReview}
                           onChange={_noop}
                         />
-                        <label className="mr-text-white-50">
+                        <label htmlFor="review-input" className="mr-text-white-50">
                           <FormattedMessage {...messages.reviewLabel} />
                         </label>
                       </div>
@@ -315,26 +316,28 @@ export class TaskConfirmationModal extends Component {
                           <FormattedMessage {...messages.loadByLabel} />
                         </span>
                         <input
+                          id="load-method-random-input"
                           type="radio"
                           name="randomnessPreference"
                           className="mr-radio mr-mr-1"
                           checked={this.props.loadBy === TaskLoadMethod.random}
                           onClick={() => this.props.chooseLoadBy(TaskLoadMethod.random)}
                           onChange={_noop}
                         />
-                        <label className="mr-ml-1 mr-mr-4">
+                        <label htmlFor="load-method-random-input" className="mr-ml-1 mr-mr-4">
                           <FormattedMessage {...messagesByLoadMethod[TaskLoadMethod.random]} />
                         </label>
 
                         <input
+                          id="load-method-proximity-input"
                           type="radio"
                           name="randomnessPreference"
                           className="mr-radio mr-mr-1"
                           checked={this.props.loadBy === TaskLoadMethod.proximity}
                           onClick={() => this.props.chooseLoadBy(TaskLoadMethod.proximity)}
                           onChange={_noop}
                         />
-                        <label className="mr-ml-1">
+                        <label htmlFor="load-method-proximity-input" className="mr-ml-1">
                           <FormattedMessage {...messagesByLoadMethod[TaskLoadMethod.proximity]} />
                         </label>
                       </div>
@@ -430,10 +433,11 @@ export class TaskConfirmationModal extends Component {
                         onClick={() => this.props.chooseLoadBy(TaskReviewLoadMethod.inbox)}
                         onChange={_noop}
                       />
-                      <label className="mr-mr-4">
+                      <label htmlFor="review-load-method-input" className="mr-mr-4">
                         <FormattedMessage {...messagesByReviewLoadMethod[TaskReviewLoadMethod.inbox]} />
                       </label>
                       <input
+                        id="review-load-method-input"
                         type="radio"
                         name="loadReviewPreference"
                         className="mr-mr-2"