Merge branch 'develop' into fix/password-toggle-accessibility-3850

Author: raclim

client/modules/IDE/components/AddToCollectionSketchList.unit.test.jsx

@@ -119,7 +119,9 @@ describe('<AddToCollectionSketchList />', () => {
 
     const before = requestCount;
 
-    fireEvent.click(screen.getByRole('button', { name: 'Next Page' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Pagination.NextPageARIA' })
+    );
 
     await waitFor(() => {
       expect(requestCount).toBeGreaterThan(before);
@@ -134,7 +136,7 @@ describe('<AddToCollectionSketchList />', () => {
     await screen.findByText('page1-sketch-1');
 
     expect(
-      screen.getByRole('button', { name: 'Previous Page' })
+      screen.getByRole('button', { name: 'Pagination.PreviousPageARIA' })
     ).toBeDisabled();
   });
 
@@ -165,7 +167,7 @@ describe('<AddToCollectionSketchList />', () => {
     await screen.findByText('AddToCollectionSketchList.NoCollections');
 
     expect(
-      screen.queryByRole('button', { name: 'Next Page' })
+      screen.queryByRole('button', { name: 'Pagination.NextPageARIA' })
     ).not.toBeInTheDocument();
   });
 
@@ -253,13 +255,17 @@ describe('<AddToCollectionSketchList />', () => {
     let info = document.querySelector('.pagination-info');
     expect(info.textContent.replace(/\s+/g, ' ').trim()).toContain('1 - 10');
 
-    fireEvent.click(screen.getByRole('button', { name: 'Next Page' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Pagination.NextPageARIA' })
+    );
     await screen.findByText('page2-sketch-1');
 
     info = document.querySelector('.pagination-info');
     expect(info.textContent.replace(/\s+/g, ' ').trim()).toContain('11 - 20');
 
-    fireEvent.click(screen.getByRole('button', { name: 'Next Page' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Pagination.NextPageARIA' })
+    );
     await screen.findByText('page3-sketch-1');
 
     info = document.querySelector('.pagination-info');

client/modules/IDE/components/Pagination.jsx

@@ -26,7 +26,7 @@ const Pagination = ({
             className="page-link"
             onClick={() => onPageChange(page - 1)}
             disabled={page === 1}
-            aria-label="Previous Page"
+            aria-label={t('Pagination.PreviousPageARIA')}
           >
             {t('Pagination.Previous')}
           </button>
@@ -51,7 +51,7 @@ const Pagination = ({
               onPageChange(page + 1);
             }}
             disabled={page === totalPages}
-            aria-label="Next Page"
+            aria-label={t('Pagination.NextPageARIA')}
           >
             {t('Pagination.Next')}
           </button>

client/modules/IDE/components/QuickAddList/Icons.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import CloseIcon from '../../../../images/close.svg';
 import CheckIcon from '../../../../images/check_encircled.svg';
 
 const Icons = ({ isAdded }) => {
+  const { t } = useTranslation();
   const classes = [
     'quick-add__icon',
     isAdded
@@ -16,13 +18,13 @@ const Icons = ({ isAdded }) => {
       <CloseIcon
         className="quick-add__remove-icon"
         role="img"
-        aria-label="Descending"
+        aria-label={t('QuickAddList.ButtonRemoveARIA')}
         focusable="false"
       />
       <CheckIcon
         className="quick-add__add-icon"
         role="img"
-        aria-label="Descending"
+        aria-label={t('QuickAddList.ButtonAddToCollectionARIA')}
         focusable="false"
       />
     </div>

client/modules/IDE/components/SketchList.unit.test.jsx

@@ -134,7 +134,7 @@ describe('<SketchList />', () => {
 
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
     expect(
-      screen.queryByRole('button', { name: 'Next Page' })
+      screen.queryByRole('button', { name: 'Pagination.NextPageARIA' })
     ).not.toBeInTheDocument();
   });
 
@@ -195,7 +195,9 @@ describe('<SketchList />', () => {
 
     const before = requestCount;
 
-    fireEvent.click(screen.getByRole('button', { name: 'Next Page' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Pagination.NextPageARIA' })
+    );
 
     await waitFor(() => {
       expect(requestCount).toBeGreaterThan(before);
@@ -209,7 +211,9 @@ describe('<SketchList />', () => {
     subject();
     await screen.findByText('page1-sketch-1');
 
-    const prev = screen.getByRole('button', { name: 'Previous Page' });
+    const prev = screen.getByRole('button', {
+      name: 'Pagination.PreviousPageARIA'
+    });
     expect(prev).toBeDisabled();
   });
 
@@ -245,10 +249,10 @@ describe('<SketchList />', () => {
     await screen.findByText('singlePage-sketch-1');
 
     expect(
-      screen.queryByRole('button', { name: 'Previous Page' })
+      screen.queryByRole('button', { name: 'Pagination.PreviousPageARIA' })
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole('button', { name: 'Next Page' })
+      screen.queryByRole('button', { name: 'Pagination.NextPageARIA' })
     ).not.toBeInTheDocument();
   });
 });

client/modules/IDE/components/TextArea.jsx

@@ -32,7 +32,7 @@ export default function TextArea({ src, className }) {
     <TextAreaWrapper>
       <textarea className={className}>{src}</textarea>
       <CornerButton onClick={copyTextToClipboard}>
-        <CopyIcon aria-label="Copy" />
+        <CopyIcon aria-label={t('TextArea.CopyARIA')} />
       </CornerButton>
     </TextAreaWrapper>
   );

client/modules/IDE/components/Toast.jsx

@@ -18,7 +18,7 @@ export default function Toast() {
       <button
         className="toast__close"
         onClick={() => dispatch(hideToast())}
-        aria-label="Close Alert"
+        aria-label={t('Toast.CloseAlertARIA')}
       >
         <ExitIcon focusable="false" aria-hidden="true" />
       </button>

client/modules/IDE/components/VersionPicker.jsx

@@ -77,7 +77,7 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
   return (
     <VersionDropdownMenu
       className="versionPicker"
-      aria-label="Select p5.js version"
+      aria-label={t('Toolbar.SelectVersionARIA')}
       anchor={
         <VersionPickerButton ref={ref}>
           <VersionPickerText>