fix: settingsDropdown clear selections status PL-17

City-of-Helsinki · Nov 20, 2024 · 6117779 · 6117779
1 parent a0cafd1
commit 6117779
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/components/SettingsDropdowns/SettingsDropdowns.js b/src/components/SettingsDropdowns/SettingsDropdowns.js
@@ -1,9 +1,13 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import styled from '@emotion/styled';
-import { Checkbox, ListItem, TextField, Typography } from '@mui/material';
+import {
+  Checkbox, ListItem, TextField, Typography,
+} from '@mui/material';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import { visuallyHidden } from '@mui/utils';
 import config from '../../../config';
 import { resetMobilityTreeSelections } from '../../redux/actions/mobilityTree';
 import { resetServiceTreeSelections } from '../../redux/actions/serviceTree';
@@ -29,14 +33,16 @@ import SMButton from '../ServiceMapButton';
 import constants from '../SettingsComponent/constants';
 import SMAutocomplete from '../SMAutocomplete';
 
-const SettingsDropdowns = ({ variant }) => {
+function SettingsDropdowns({ variant }) {
   const intl = useIntl();
   const dispatch = useDispatch();
   const getLocaleText = useLocaleText();
   const settings = useSelector(selectSettings);
   // Format settings from redux to easier structure
   const settingsValues = constants.convertToSettingsValues(settings);
   const [openSettings, setOpenSettings] = useState(null);
+  const [resetText, setResetText] = useState('');
+
   const highlightedOption = useRef(null);
   const themeMode = useSelector(selectThemeMode);
   const ownSettingsVariant = variant === 'ownSettings';
@@ -61,7 +67,7 @@ const SettingsDropdowns = ({ variant }) => {
     { id: organization.id, title: getLocaleText(organization.name) }
   ));
 
-  const toggleSettingsBox = (id) => {
+  const toggleSettingsBox = id => {
     if (openSettings === id) setOpenSettings(null);
     else setOpenSettings(id);
   };
@@ -70,6 +76,9 @@ const SettingsDropdowns = ({ variant }) => {
     if (!id) {
       return;
     }
+
+    setResetText('');
+
     if (category === 'mobility') {
       dispatch(setMobility(id));
       setOpenSettings(null);
@@ -122,6 +131,8 @@ const SettingsDropdowns = ({ variant }) => {
     dispatch(resetCustomPosition());
     dispatch(changeTheme('default'));
     dispatch(resetUserPosition());
+
+    setResetText(intl.formatMessage({ id: 'settings.reset_button.ariaLive' }));
   };
 
   const handleKeyboardSelect = (id, category, event) => {
@@ -171,8 +182,9 @@ const SettingsDropdowns = ({ variant }) => {
         ChipProps={{
           clickable: true, onDelete: null, variant: ownSettingsVariant ? 'outlined' : 'filled',
         }}
-        slotProps={{ 
-          popper:{ sx: { pb: 1 } } // This padding fixes the listBox position on small screens where the list is renderend to top of input
+        slotProps={{
+          // eslint-disable-next-line max-len
+          popper: { sx: { pb: 1 } }, // This padding fixes the listBox position on small screens where the list is renderend to top of input
         }}
         renderOption={(props, option) => (isSingleOption
           ? ( // Single option options box
@@ -188,12 +200,11 @@ const SettingsDropdowns = ({ variant }) => {
               />
               <Typography>{option.title}</Typography>
             </ListItem>
-          ))
-        }
+          ))}
         renderInput={({ inputProps, ...rest }) => (
           <TextField
             label={label}
-            onClick={(e) => {
+            onClick={e => {
               e?.stopPropagation();
               toggleSettingsBox(label);
             }}
@@ -222,6 +233,7 @@ const SettingsDropdowns = ({ variant }) => {
       {renderSettingsElement(citySettingsList, intl.formatMessage({ id: 'settings.choose.cities' }), 'cities')}
       {renderSettingsElement(organizationSettingsList, intl.formatMessage({ id: 'settings.choose.organization' }), 'organizations')}
       <div>
+        <Typography aria-live="polite" style={visuallyHidden}>{resetText}</Typography>
         <StyledButton
           data-sm="reset-settings-button"
           ownsettings={+ownSettingsVariant}
@@ -234,7 +246,7 @@ const SettingsDropdowns = ({ variant }) => {
       </div>
     </>
   );
-};
+}
 
 const StyledButton = styled(SMButton)(() => ({ marginRight: 0 }));
 

diff --git a/src/i18n/en.js b/src/i18n/en.js
@@ -724,6 +724,7 @@ export default {
   'settings.choose.organization': 'Choose a service provider',
   'settings.map.info': 'You can select the background map that best suits you in the map settings.',
   'settings.reset_button.title': 'Clear all my selections',
+  'settings.reset_button.ariaLive': 'All selections were cleared.',
 
   // Tools
   'tool.download': 'Download data',

diff --git a/src/i18n/fi.js b/src/i18n/fi.js
@@ -726,6 +726,7 @@ export default {
   'settings.choose.organization': 'Valitse palveluntarjoaja',
   'settings.map.info': 'Kartta-asetuksista voit valita sinulle parhaiten sopivan pohjakartan.',
   'settings.reset_button.title': 'Tyhjennä kaikki valintani',
+  'settings.reset_button.ariaLive': 'Kaikki valinnat tyhjennettiin.',
 
   // Tools
   'tool.download': 'Lataa tiedot',

diff --git a/src/i18n/sv.js b/src/i18n/sv.js
@@ -725,6 +725,7 @@ export default {
   'settings.choose.organization': 'Välj tjänsteleverantör',
   'settings.map.info': 'I kartinställningarna kan du välja det kartunderlag som passar dig bäst.',
   'settings.reset_button.title': 'Rensa alla mina val',
+  'settings.reset_button.ariaLive': 'Alla val har rensats.',
 
   // Tools
   'tool.download': 'Exportera',