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.

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}

packages/lib-user/src/components/shared/MainContent/MainContent.spec.js

@@ -7,6 +7,7 @@ import { USER } from '../../../../test/mocks/panoptes'
 import { STATS } from '../../../../test/mocks/stats.mock.js'
 
 import Meta, { Default, NoStats, ParamsValidationMessage } from './MainContent.stories.js'
+import { expect } from 'chai'
 
 const todayUTC = getStatsDateString(new Date())
 const sevenDaysAgoUTC = getStatsDateString(new Date(Date.now() - 6 * 24 * 60 * 60 * 1000))
@@ -37,16 +38,20 @@ describe('components > shared > MainContent', function () {
 
   it('should show "ALL PROJECTS" as the selected project', function () {
     render(<DefaultStory />)
-    const projectSelect = screen.getByRole('textbox', { name: 'project-select' })
+    const projectSelectMenu = screen.getByRole('button', { name: 'Select project; Selected: ALL PROJECTS' })
+    const projectSelect = screen.getByRole('textbox', { name: 'Select project, ALL PROJECTS' })
 
+    expect(projectSelectMenu).to.be.ok()
     expect(projectSelect).to.be.ok()
     expect(projectSelect.value).to.equal('ALL PROJECTS')
   })
 
   it('should show "LAST 7 DAYS" as the selected date range', function () {
     render(<DefaultStory />)
-    const dateRangeSelect = screen.getByRole('textbox', { name: 'date-range-select' })
+    const dateRangeSelectMenu = screen.getByRole('button', { name: 'Select date range; Selected: LAST 7 DAYS' })
+    const dateRangeSelect = screen.getByRole('textbox', { name: 'Select date range, LAST 7 DAYS' })
 
+    expect(dateRangeSelectMenu).to.be.ok()
     expect(dateRangeSelect).to.be.ok()
     expect(dateRangeSelect.value).to.equal('LAST 7 DAYS')
   })

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>
   )

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"
   },