From b5123c6b7cdcd2894837b8f1898f8d84d1da3b74 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 1/2] 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"
   },

From 2f290edbe7c498da7bdac018451fc03bdf16a885 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Thu, 16 Jan 2025 15:34:56 +0000
Subject: [PATCH 2/2] fix inaccessible names for group visibility select

---
 .../src/components/shared/GroupForm/GroupForm.js     | 12 +++++++-----
 .../components/shared/GroupForm/GroupForm.spec.js    |  8 ++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/lib-user/src/components/shared/GroupForm/GroupForm.js b/packages/lib-user/src/components/shared/GroupForm/GroupForm.js
index 2ba79c1695..4e5aa890e9 100644
--- a/packages/lib-user/src/components/shared/GroupForm/GroupForm.js
+++ b/packages/lib-user/src/components/shared/GroupForm/GroupForm.js
@@ -56,6 +56,7 @@ function GroupForm({
 
   const [value, setValue] = useState(defaultValue)
   const statsVisibilityOptions = value.visibility === 'Private' ? PRIVATE_STATS_VISIBILITY : PUBLIC_STATS_VISIBILITY
+  const selectedVisibilityOption = statsVisibilityOptions.find((option) => option.value === value.stats_visibility)
 
   useEffect(() => {
     setValue(defaultValue)
@@ -64,11 +65,12 @@ function GroupForm({
   return (
     <Form
       onChange={(nextValue, { touched }) => {
+        const selectedVisibilityOption = statsVisibilityOptions.find((option) => option.label === nextValue.stats_visibility)
+        let stats_visibility = selectedVisibilityOption ? selectedVisibilityOption.value : value.stats_visibility
         if (nextValue.visibility !== value.visibility) {
-          const statsVisibility = nextValue.visibility === 'Private' ? 'private_agg_only' : 'public_agg_only'
-          nextValue.stats_visibility = statsVisibility
+          stats_visibility = nextValue.visibility === 'Private' ? 'private_agg_only' : 'public_agg_only'
         }
-        setValue(nextValue)
+        setValue({ ...nextValue, stats_visibility })
       }}
       onSubmit={handleSubmit}
       value={value}
@@ -151,10 +153,10 @@ function GroupForm({
           <Select
             id='stats_visibility'
             aria-label={t('GroupForm.visibility')}
-            labelKey='label'
             name='stats_visibility'
             options={statsVisibilityOptions}
-            valueKey={{ key: 'value', reduce: true }}
+            value={selectedVisibilityOption.label}
+            valueKey={{ key: 'label', reduce: true }}
           />
         </FormField>
       </ThemeContext.Extend>
diff --git a/packages/lib-user/src/components/shared/GroupForm/GroupForm.spec.js b/packages/lib-user/src/components/shared/GroupForm/GroupForm.spec.js
index f7b312d224..8579112dde 100644
--- a/packages/lib-user/src/components/shared/GroupForm/GroupForm.spec.js
+++ b/packages/lib-user/src/components/shared/GroupForm/GroupForm.spec.js
@@ -37,7 +37,7 @@ describe('components > shared > GroupForm', function() {
       render(<CreateStory />)
 
       // the Grommet Select component renders as a button with a textbox. The statsVisibility input uses the Grommet Select, therefore we need to find the textbox role. The textbox name includes the value of the select, which by default is 'private_agg_only'.
-      const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, private_agg_only' })
+      const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, No, don\'t show individual stats to members' })
       expect(statsVisibility).to.be.ok()
     })
 
@@ -49,7 +49,7 @@ describe('components > shared > GroupForm', function() {
         const privateRadio = screen.getByRole('radio', { name: 'Private - only members can view this group' })
         expect(privateRadio.checked).to.be.true()
 
-        const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, private_agg_only' })
+        const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, No, don\'t show individual stats to members' })
         await user.click(statsVisibility)
 
         const options = screen.getAllByRole('option')
@@ -67,7 +67,7 @@ describe('components > shared > GroupForm', function() {
         await user.click(publicRadio)
         expect(publicRadio.checked).to.be.true()
 
-        const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, public_agg_only' })
+        const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, No, never show individual stats' })
         await user.click(statsVisibility)
 
         const options = screen.getAllByRole('option')
@@ -148,7 +148,7 @@ describe('components > shared > GroupForm', function() {
     it('should show the group stats visibility', function() {
       render(<ManageStory />)
 
-      const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, public_show_all' })
+      const statsVisibility = screen.getByRole('textbox', { name: 'Stats Visibility, Yes, always show individual stats' })
       expect(statsVisibility).to.be.ok()
     })
   })