feat: add accessibility texts to checkbox group

City-of-Helsinki · Apr 26, 2024 · bb0e6f9 · bb0e6f9
1 parent 58234ef
commit bb0e6f9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -9,6 +9,12 @@
   "buttonActions": "Actions",
   "buttonBack": "Back",
   "cancel": "Undo",
+  "checkboxGroup": {
+    "accessibility": {
+      "hideOptionsNotification": "Some options hidden from the list",
+      "showAllOptionsNotification": "More options added to the list"
+    }
+  },
   "clear": "Clear",
   "close": "Close",
   "cookieConsent": {

diff --git a/public/locales/fi/common.json b/public/locales/fi/common.json
@@ -9,6 +9,12 @@
   "buttonActions": "Valinnat",
   "buttonBack": "Takaisin",
   "cancel": "Peruuta",
+  "checkboxGroup": {
+    "accessibility": {
+      "hideOptionsNotification": "Osa vaihtoehdoista piilotettu listauksesta",
+      "showAllOptionsNotification": "Lisää vaihtoehtoja lisätty listaukseen"
+    }
+  },
   "clear": "Tyhjennä",
   "close": "Sulje",
   "cookieConsent": {

diff --git a/public/locales/sv/common.json b/public/locales/sv/common.json
@@ -9,6 +9,12 @@
   "buttonActions": "Funktioner",
   "buttonBack": "Tillbaka",
   "cancel": "Ångra",
+  "checkboxGroup": {
+    "accessibility": {
+      "hideOptionsNotification": "Vissa alternativ dolda från listan",
+      "showAllOptionsNotification": "Fler alternativ har lagts till på listan"
+    }
+  },
   "clear": "Klar",
   "close": "Stäng",
   "cookieConsent": {

diff --git a/src/common/components/formFields/CheckboxGroupField.tsx b/src/common/components/formFields/CheckboxGroupField.tsx
@@ -4,6 +4,7 @@ import { IconAngleDown, IconAngleUp } from 'hds-react';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 
+import useAccessibilityNotification from '../../../hooks/useAccessibilityNotification';
 import useLocale from '../../../hooks/useLocale';
 import { OptionType } from '../../../types';
 import { getErrorText } from '../../../utils/validationUtils';
@@ -47,14 +48,22 @@ const CheckboxGroupField: React.FC<CheckboxGroupFieldProps> = ({
   const { t } = useTranslation('common');
   const locale = useLocale();
   const [showAll, setShowAll] = React.useState(false);
+  const { setAccessibilityText } = useAccessibilityNotification();
 
   const visibleOptions = [...options].slice(
     0,
     showAll ? undefined : visibleOptionAmount
   );
 
   const toggleShowAll = () => {
-    setShowAll(!showAll);
+    setAccessibilityText(
+      t(
+        showAll
+          ? 'common:checkboxGroup.accessibility.hideOptionsNotification'
+          : 'common:checkboxGroup.accessibility.showAllOptionsNotification'
+      )
+    );
+    setShowAll((o) => !o);
   };
 
   const handleBlur = () => {

diff --git a/src/common/components/formFields/__tests__/CheckboxGroupField.test.tsx b/src/common/components/formFields/__tests__/CheckboxGroupField.test.tsx
@@ -44,10 +44,18 @@ test('should toggle visible options', async () => {
   });
 
   await user.click(screen.getByRole('button', { name: /näytä lisää/i }));
-
   restOptions.forEach(({ label }) => {
     screen.getByLabelText(label);
   });
+  expect(
+    await screen.findByText('Lisää vaihtoehtoja lisätty listaukseen')
+  ).toBeInTheDocument();
+
+  await user.click(screen.getByRole('button', { name: /näytä vähemmän/i }));
+  expect(screen.queryByLabelText(restOptions[0].label)).not.toBeInTheDocument();
+  expect(
+    await screen.findByText('Osa vaihtoehdoista piilotettu listauksesta')
+  ).toBeInTheDocument();
 });
 
 test('should show label with required indicator', async () => {