refactor: removes the group

The change colour links don't get associated to
the group as they aren't form elements. So just
added visually hidden text to the checkbox with
the prognosis name.

Author: GentlemanHal

journey/settings.cy.ts

@@ -35,9 +35,15 @@ describe('Settings', () => {
     cy.locate('duration').should('not.exist')
     cy.findByRole('button', { name: /dismiss/i }).click()
 
-    cy.findAllByLabelText('Show on the Monitor page').each((prognosis) => {
-      cy.wrap(prognosis).check()
-    })
+    cy.findByLabelText('Show sick prognosis on the Monitor page').check()
+    cy.findByLabelText(
+      'Show sick building prognosis on the Monitor page',
+    ).check()
+    cy.findByLabelText(
+      'Show healthy building prognosis on the Monitor page',
+    ).check()
+    cy.findByLabelText('Show unknown prognosis on the Monitor page').check()
+    cy.findByLabelText('Show healthy prognosis on the Monitor page').check()
 
     cy.findByLabelText('Amount of project to show').select('Large')
     cy.findByLabelText('Sort projects by').select('prognosis')

resources/version.txt

@@ -1 +1 @@
-7.17.0
+7.17.1

src/client/settings/display/DisplayPrognosisSelection.tsx

@@ -11,9 +11,9 @@ import { Card } from '../../common/card/Card'
 import { CardHeading } from '../../common/card/CardHeading'
 import { Checkbox } from '../../common/forms/Checkbox'
 import { ChangeColoursLink } from '../colours/ChangeColoursLink'
-import { Group } from '../../common/forms/Group'
 import { IconPrognosis } from '../../common/icons/prognosis/IconPrognosis'
 import styles from './display-prognosis-selection.scss'
+import { VisuallyHidden } from '../../common/VisuallyHidden'
 
 function groupTitle(prognosis: Prognosis): string {
   return `${capitalize(prognosisDisplay(prognosis))} prognosis`
@@ -60,23 +60,25 @@ export function DisplayPrognosisSelection(): ReactElement {
               }}
               key={prognosis}
             >
-              <Group title={groupTitle(prognosis)}>
-                <Checkbox
-                  className={styles.checkbox}
-                  checked={showing.includes(prognosis)}
-                  onToggle={(show) =>
-                    dispatch(setShowPrognosis({ prognosis, show }))
-                  }
-                >
-                  Show on the Monitor page
-                </Checkbox>
-                <ChangeColoursLink
-                  path={prognosis}
-                  additionalContext={`for ${prognosisDisplay(
-                    prognosis,
-                  )} prognosis`}
-                />
-              </Group>
+              <Checkbox
+                className={styles.checkbox}
+                checked={showing.includes(prognosis)}
+                onToggle={(show) =>
+                  dispatch(setShowPrognosis({ prognosis, show }))
+                }
+              >
+                Show{' '}
+                <VisuallyHidden>
+                  {prognosisDisplay(prognosis)} prognosis
+                </VisuallyHidden>{' '}
+                on the Monitor page
+              </Checkbox>
+              <ChangeColoursLink
+                path={prognosis}
+                additionalContext={`for ${prognosisDisplay(
+                  prognosis,
+                )} prognosis`}
+              />
             </Card>
           )
         })}

src/client/settings/display/DisplaySettingsPage.test.tsx

@@ -7,7 +7,7 @@ import {
   getShowPrognosis,
   getShowPrognosisName,
 } from './DisplaySettingsReducer'
-import { screen, within } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { DisplaySettingsPage } from './DisplaySettingsPage'
 import { Prognosis } from '../../domain/Project'
 
@@ -66,11 +66,11 @@ it('should set the show prognosis name setting', async () => {
 describe('showing on the monitor page', () => {
   it.each`
     prognosis                    | name
-    ${Prognosis.healthy}         | ${'Healthy prognosis'}
-    ${Prognosis.healthyBuilding} | ${'Healthy building prognosis'}
-    ${Prognosis.sick}            | ${'Sick prognosis'}
-    ${Prognosis.sickBuilding}    | ${'Sick building prognosis'}
-    ${Prognosis.unknown}         | ${'Unknown prognosis'}
+    ${Prognosis.healthy}         | ${'healthy prognosis'}
+    ${Prognosis.healthyBuilding} | ${'healthy building prognosis'}
+    ${Prognosis.sick}            | ${'sick prognosis'}
+    ${Prognosis.sickBuilding}    | ${'sick building prognosis'}
+    ${Prognosis.unknown}         | ${'unknown prognosis'}
   `(
     '$prognosis',
     async ({ prognosis, name }: { prognosis: Prognosis; name: string }) => {
@@ -81,8 +81,9 @@ describe('showing on the monitor page', () => {
       }
 
       const { store, user } = render(<DisplaySettingsPage />, { state })
-      const group = screen.getByRole('group', { name })
-      await user.click(within(group).getByLabelText('Show on the Monitor page'))
+      await user.click(
+        screen.getByLabelText(`Show ${name} on the Monitor page`),
+      )
 
       expect(getShowPrognosis(store.getState())).toContain(prognosis)
     },