diff --git a/src/components/SettingsDropdowns/SettingsDropdowns.js b/src/components/SettingsDropdowns/SettingsDropdowns.js
index 14f5ed6c9..8bd795ed1 100644
--- 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,7 +33,7 @@ import SMButton from '../ServiceMapButton';
import constants from '../SettingsComponent/constants';
import SMAutocomplete from '../SMAutocomplete';
-const SettingsDropdowns = ({ variant = 'default'}) => {
+function SettingsDropdowns({ variant }) {
const intl = useIntl();
const dispatch = useDispatch();
const getLocaleText = useLocaleText();
@@ -37,6 +41,8 @@ const SettingsDropdowns = ({ variant = 'default'}) => {
// 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 = 'default'}) => {
{ 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 = 'default'}) => {
if (!id) {
return;
}
+
+ setResetText('');
+
if (category === 'mobility') {
dispatch(setMobility(id));
setOpenSettings(null);
@@ -122,6 +131,8 @@ const SettingsDropdowns = ({ variant = 'default'}) => {
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 = 'default'}) => {
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 = 'default'}) => {
/>
{option.title}
- ))
- }
+ ))}
renderInput={({ inputProps, ...rest }) => (
{
+ onClick={e => {
e?.stopPropagation();
toggleSettingsBox(label);
}}
@@ -222,6 +233,7 @@ const SettingsDropdowns = ({ variant = 'default'}) => {
{renderSettingsElement(citySettingsList, intl.formatMessage({ id: 'settings.choose.cities' }), 'cities')}
{renderSettingsElement(organizationSettingsList, intl.formatMessage({ id: 'settings.choose.organization' }), 'organizations')}
+ {resetText}
{
>
);
-};
+}
const StyledButton = styled(SMButton)(() => ({ marginRight: 0 }));
@@ -280,6 +292,10 @@ const StyledAutocomplete = styled(SMAutocomplete)(({ theme, ownsettings, colormo
return { ...styles, ...ownSettingsStyles };
});
+SettingsDropdowns.defaultProps = {
+ variant: 'default',
+};
+
SettingsDropdowns.propTypes = {
variant: PropTypes.oneOf(['default', 'ownSettings']),
};
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 7d96737b7..787ed1eec 100644
--- 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
index c7a73f670..76021d5db 100644
--- 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
index ab5979e52..14aa2cb18 100644
--- 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',