fix(a11y): user select menu labels

- fix 'Selected: [object Object]' in the labels for user dropdown menus. - add plain English labels for the project and date range menus.
zooniverse · Jan 8, 2025 · 34f6999 · 34f6999
1 parent fd585a1
commit 34f6999
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/lib-user/src/components/shared/MainContent/MainContent.js b/packages/lib-user/src/components/shared/MainContent/MainContent.js
@@ -212,13 +212,15 @@ function MainContent({
             <Select
               id='project-select'
               name='project-select'
+              aria-label={t('MainContent.selectProject')}
               handleChange={handleProjectSelect}
               options={projectOptions}
               value={selectedProjectOption}
             />
             <Select
               id='date-range-select'
               name='date-range-select'
+              aria-label={t('MainContent.selectDateRange')}
               handleChange={handleDateRangeSelect}
               options={dateRangeOptions}
               value={selectedDateRangeOption}

diff --git a/packages/lib-user/src/components/shared/Select/Select.js b/packages/lib-user/src/components/shared/Select/Select.js
@@ -18,7 +18,8 @@ function Select({
   name = '',
   handleChange = DEFAULT_HANDLER,
   options = [],
-  value = DEFAULT_VALUE
+  value = DEFAULT_VALUE,
+  ...props
 }) {
   const [selected, setSelected] = useState(value)
 
@@ -34,14 +35,15 @@ function Select({
   return (
     <ThemeContext.Extend value={selectTheme}>
       <StyledSelect
-        a11yTitle={name}
         id={id}
         name={name}
         labelKey='label'
         onChange={({ option }) => handleSelect(option)}
         options={options}
         size='medium'
-        value={selected}
+        value={selected.label}
+        valueKey={{ key: 'label', reduce: true }}
+        {...props}
       />
     </ThemeContext.Extend>
   )

diff --git a/packages/lib-user/src/translations/en.json b/packages/lib-user/src/translations/en.json
@@ -117,6 +117,8 @@
     "error": "There was an error.",
     "hoursTip": "Hours are calculated based on the start and end times of your classification efforts. Hours do not reflect your time spent on Talk.",
     "noData": "No data found.",
+    "selectDateRange": "Select date range",
+    "selectProject": "Select project",
     "start": "Start by <0>classifying a project</0> now, or change the date range.",
     "tabContents": "Tab Contents"
   },