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',