From d71f5e5ba1ee099091a2d6693b9eb8b38650bdea Mon Sep 17 00:00:00 2001 From: EdwinKato Date: Thu, 11 Jul 2024 15:29:18 +0300 Subject: [PATCH 1/4] Fix missing aria label on horizontal scroll --- front/app/components/HorizontalScroll/index.tsx | 7 +++++++ front/app/components/HorizontalScroll/messages.ts | 12 ++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 front/app/components/HorizontalScroll/messages.ts diff --git a/front/app/components/HorizontalScroll/index.tsx b/front/app/components/HorizontalScroll/index.tsx index 281736ccad6a..9dd9d34bf079 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.scrollLeft)} /> @@ -119,6 +125,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => { buttonStyle="text" p="0px" className="e2e-event-previews-scroll-right" + ariaLabel={formatMessage(messages.scrollRight)} /> diff --git a/front/app/components/HorizontalScroll/messages.ts b/front/app/components/HorizontalScroll/messages.ts new file mode 100644 index 000000000000..0251a989e5a7 --- /dev/null +++ b/front/app/components/HorizontalScroll/messages.ts @@ -0,0 +1,12 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + scrollLeft: { + id: 'app.components.HorizontalScroll.scrollLeft', + defaultMessage: 'Scroll left', + }, + scrollRight: { + id: 'app.components.HorizontalScroll.scrollRight', + defaultMessage: 'Scroll right', + }, +}); From e56bf9027ce2a5b5b33d45ba1379001d37227548 Mon Sep 17 00:00:00 2001 From: CircleCI Date: Thu, 11 Jul 2024 12:32:32 +0000 Subject: [PATCH 2/4] Translations updated by CI (extract-intl) --- front/app/translations/en.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/front/app/translations/en.json b/front/app/translations/en.json index d53e0fc2fe92..3e9f5bcfc085 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.scrollLeft": "Scroll left", + "app.components.HorizontalScroll.scrollRight": "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.", From 1dbd5eda77289304252caf6f53ff8481cdfff710 Mon Sep 17 00:00:00 2001 From: EdwinKato Date: Mon, 15 Jul 2024 15:25:13 +0300 Subject: [PATCH 3/4] Add fullstop --- front/app/components/HorizontalScroll/index.tsx | 4 ++-- front/app/components/HorizontalScroll/messages.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/front/app/components/HorizontalScroll/index.tsx b/front/app/components/HorizontalScroll/index.tsx index 9dd9d34bf079..e26309096163 100644 --- a/front/app/components/HorizontalScroll/index.tsx +++ b/front/app/components/HorizontalScroll/index.tsx @@ -105,7 +105,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => { p="0px" my="auto" className="e2e-event-previews-scroll-left" - ariaLabel={formatMessage(messages.scrollLeft)} + ariaLabel={formatMessage(messages.scrollLeftLabel)} /> @@ -125,7 +125,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => { buttonStyle="text" p="0px" className="e2e-event-previews-scroll-right" - ariaLabel={formatMessage(messages.scrollRight)} + ariaLabel={formatMessage(messages.scrollRightLabel)} /> diff --git a/front/app/components/HorizontalScroll/messages.ts b/front/app/components/HorizontalScroll/messages.ts index 0251a989e5a7..a2b2073a53c9 100644 --- a/front/app/components/HorizontalScroll/messages.ts +++ b/front/app/components/HorizontalScroll/messages.ts @@ -1,12 +1,12 @@ import { defineMessages } from 'react-intl'; export default defineMessages({ - scrollLeft: { - id: 'app.components.HorizontalScroll.scrollLeft', - defaultMessage: 'Scroll left', + scrollLeftLabel: { + id: 'app.components.HorizontalScroll.scrollLeftLabel', + defaultMessage: 'Scroll left.', }, - scrollRight: { - id: 'app.components.HorizontalScroll.scrollRight', - defaultMessage: 'Scroll right', + scrollRightLabel: { + id: 'app.components.HorizontalScroll.scrollRightLabel', + defaultMessage: 'Scroll right.', }, }); From c1b2c1a00a07f8d4c27ed25c9f078ddfeb77b6df Mon Sep 17 00:00:00 2001 From: CircleCI Date: Mon, 15 Jul 2024 12:27:54 +0000 Subject: [PATCH 4/4] Translations updated by CI (extract-intl) --- front/app/translations/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/app/translations/en.json b/front/app/translations/en.json index 3e9f5bcfc085..96da2cc10149 100644 --- a/front/app/translations/en.json +++ b/front/app/translations/en.json @@ -175,8 +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.scrollLeft": "Scroll left", - "app.components.HorizontalScroll.scrollRight": "Scroll right", + "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.",