Merge pull request #8417 from CitizenLabDotCo/fix-missing-aria-label

TAN-2283: Fix missing aria label on horizontal scroll

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<HTMLDivElement>(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)}
         />
       </Box>
       <StyledContainer ref={containerRef} role={containerRole}>
@@ -119,6 +125,7 @@ const HorizontalScroll = ({ children, containerRole }: Props) => {
           buttonStyle="text"
           p="0px"
           className="e2e-event-previews-scroll-right"
+          ariaLabel={formatMessage(messages.scrollRightLabel)}
         />
       </Box>
     </Box>

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.',
+  },
+});

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.",