diff --git a/front/app/components/HorizontalScroll/index.tsx b/front/app/components/HorizontalScroll/index.tsx index 281736ccad6a..e26309096163 100644 --- a/front/app/components/HorizontalScroll/index.tsx +++ b/front/app/components/HorizontalScroll/index.tsx @@ -8,6 +8,10 @@ import { } from '@citizenlab/cl2-component-library'; import styled, { useTheme } from 'styled-components'; +import { useIntl } from 'utils/cl-intl'; + +import messages from './messages'; + const StyledContainer = styled(Box)` display: flex; gap: 16px; @@ -43,6 +47,7 @@ interface Props { const HorizontalScroll = ({ children, containerRole }: Props) => { const theme = useTheme(); const isSmallerThanPhone = useBreakpoint('phone'); + const { formatMessage } = useIntl(); const containerRef = React.useRef(null); // Used to determine when the scroll buttons should be disabled (E.g. At scroll end, disable the right button) const [atScrollStart, setAtScrollStart] = useState(true); @@ -100,6 +105,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => { p="0px" my="auto" className="e2e-event-previews-scroll-left" + ariaLabel={formatMessage(messages.scrollLeftLabel)} /> @@ -119,6 +125,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => { buttonStyle="text" p="0px" className="e2e-event-previews-scroll-right" + ariaLabel={formatMessage(messages.scrollRightLabel)} /> diff --git a/front/app/components/HorizontalScroll/messages.ts b/front/app/components/HorizontalScroll/messages.ts new file mode 100644 index 000000000000..a2b2073a53c9 --- /dev/null +++ b/front/app/components/HorizontalScroll/messages.ts @@ -0,0 +1,12 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + scrollLeftLabel: { + id: 'app.components.HorizontalScroll.scrollLeftLabel', + defaultMessage: 'Scroll left.', + }, + scrollRightLabel: { + id: 'app.components.HorizontalScroll.scrollRightLabel', + defaultMessage: 'Scroll right.', + }, +}); diff --git a/front/app/translations/en.json b/front/app/translations/en.json index d53e0fc2fe92..96da2cc10149 100644 --- a/front/app/translations/en.json +++ b/front/app/translations/en.json @@ -175,6 +175,8 @@ "app.components.HookForm.Feedback.submissionError": "Try again. If the issue persists, contact us", "app.components.HookForm.Feedback.submissionErrorTitle": "There was a problem on our end, sorry", "app.components.HookForm.Feedback.successMessage": "Form successfully submitted", + "app.components.HorizontalScroll.scrollLeftLabel": "Scroll left.", + "app.components.HorizontalScroll.scrollRightLabel": "Scroll right.", "app.components.IdeaCards.a11y_ideasHaveBeenSorted": "{sortOder} ideas have loaded.", "app.components.IdeaCards.showMore": "Show more", "app.components.IdeasMap.a11y_hideIdeaCard": "Hide idea card.",