Merge branch 'develop' into nityam/fix-aria-live-login-error-#3874

Author: Nixxx19

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,6 @@
-### Context or Issue Number:
-<!-- Please add the issue this relates to if one is available. Otherwise please describe the current state of the codebase and what this PR attempts to fix. -->
+### Issue:
+Fixes # 
+<!-- Please add the issue this relates to, and a provide a brief description of the current state of the codebase and what this PR attempts to fix. -->
 
 ### Demo:
 <!-- Please add a screenshot for UI related changes -->

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>

client/modules/User/components/LoginForm.tsx

@@ -87,7 +87,11 @@ export function LoginForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleVisibility}
-                      aria-hidden="true"
+                      aria-label={t(
+                        showPassword
+                          ? 'LoginForm.HidePasswordARIA'
+                          : 'LoginForm.ShowPasswordARIA'
+                      )}
                     >
                       {showPassword ? (
                         <AiOutlineEyeInvisible />

client/modules/User/components/LoginForm.unit.test.jsx

@@ -47,7 +47,7 @@ describe('<LoginForm/>', () => {
     const passwordTextElement = screen.getByText(/password/i);
     expect(passwordTextElement).toBeInTheDocument();
 
-    const passwordInputElement = screen.getByLabelText(/password/i);
+    const passwordInputElement = screen.getByLabelText(/^password$/i);
     expect(passwordInputElement).toBeInTheDocument();
 
     const loginButtonElement = screen.getByRole('button', {
@@ -67,7 +67,7 @@ describe('<LoginForm/>', () => {
       }
     });
 
-    const passwordElement = screen.getByLabelText(/password/i);
+    const passwordElement = screen.getByLabelText(/^password$/i);
 
     fireEvent.change(passwordElement, {
       target: {