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.
build-canaries · Jul 6, 2024 · 236d9b7 · 236d9b7
1 parent 68d6b63
commit 236d9b7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 30 deletions.
diff --git a/journey/settings.cy.ts b/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')

diff --git a/resources/version.txt b/resources/version.txt
@@ -1 +1 @@
-7.17.0
+7.17.1
diff --git a/src/client/settings/display/DisplayPrognosisSelection.tsx b/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>
           )
         })}

diff --git a/src/client/settings/display/DisplaySettingsPage.test.tsx b/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)
     },