Merge branch 'release-2.20.3' into release

Author: raclim

.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/actions/project.js

@@ -420,12 +420,12 @@ export function changeVisibility(projectId, projectName, visibility, t) {
       .patch('/project/visibility', { projectId, visibility })
       .then((response) => {
         if (response.status === 200) {
-          const { visibility: newVisibility, updatedAt } = response.data;
+          const { visibility: newVisibility, updatedAt, id } = response.data;
 
           dispatch({
             type: ActionTypes.CHANGE_VISIBILITY,
             payload: {
-              id: response.data.id,
+              id,
               visibility: newVisibility
             }
           });

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/NewFileForm.jsx

@@ -64,7 +64,9 @@ function NewFileForm() {
             </Field>
           </div>
           {touched.submitButton && errors.name && (
-            <span className="form-error">{errors.name}</span>
+            <span className="form-error" aria-live="polite">
+              {errors.name}
+            </span>
           )}
         </form>
       )}

client/modules/IDE/components/NewFolderForm.jsx

@@ -61,7 +61,9 @@ function NewFolderForm() {
             </Field>
           </div>
           {touched.submitButton && errors.name && (
-            <span className="form-error">{errors.name}</span>
+            <span className="form-error" aria-live="polite">
+              {errors.name}
+            </span>
           )}
         </form>
       )}

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>