From 3899801f6b91e17fdcad7c54bf80357c8e067458 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Wed, 8 Jan 2025 12:29:31 +0000
Subject: [PATCH] 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.
---
 .../src/components/shared/MainContent/MainContent.js     | 2 ++
 .../components/shared/MainContent/MainContent.spec.js    | 9 +++++++--
 packages/lib-user/src/components/shared/Select/Select.js | 8 +++++---
 packages/lib-user/src/translations/en.json               | 2 ++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/lib-user/src/components/shared/MainContent/MainContent.js b/packages/lib-user/src/components/shared/MainContent/MainContent.js
index 9827887032..807c650c19 100644
--- a/packages/lib-user/src/components/shared/MainContent/MainContent.js
+++ b/packages/lib-user/src/components/shared/MainContent/MainContent.js
@@ -212,6 +212,7 @@ function MainContent({
             <Select
               id='project-select'
               name='project-select'
+              aria-label={t('MainContent.selectProject')}
               handleChange={handleProjectSelect}
               options={projectOptions}
               value={selectedProjectOption}
@@ -219,6 +220,7 @@ function MainContent({
             <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/MainContent/MainContent.spec.js b/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js
index ceea5dc707..f25222f8ec 100644
--- a/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js
+++ b/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')
   })
diff --git a/packages/lib-user/src/components/shared/Select/Select.js b/packages/lib-user/src/components/shared/Select/Select.js
index e7c5314a86..9d8f620527 100644
--- 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
index 1eaf1aed3d..95233d305e 100644
--- 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"
   },