From 6e895b3ff3b59eb582e5408bcc765bd505f7dd2e Mon Sep 17 00:00:00 2001
From: Viktor Vorona <viktor.vorona@sonarsource.com>
Date: Thu, 5 Oct 2023 11:58:17 +0200
Subject: [PATCH] SONAR-20177 fix spinner sr-only state overflowing container

---
 .../design-system/src/components/Spinner.tsx  | 12 ++++----
 .../__snapshots__/ModalFooter-test.tsx.snap   | 28 ++++++++++++-------
 .../js/apps/users/__tests__/UsersApp-it.tsx   |  6 ++--
 .../__snapshots__/Checkbox-test.tsx.snap      |  6 ++--
 .../src/main/js/components/ui/Spinner.tsx     |  4 +--
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/Spinner.tsx b/server/sonar-web/design-system/src/components/Spinner.tsx
index efe6c2ed378..4e0b4305c6e 100644
--- a/server/sonar-web/design-system/src/components/Spinner.tsx
+++ b/server/sonar-web/design-system/src/components/Spinner.tsx
@@ -50,12 +50,12 @@ export function Spinner(props: React.PropsWithChildren<Props>) {
 
   return (
     <>
-      <div
-        className={classNames('sw-overflow-hidden', { 'sw-sr-only sw-left-[-10000px]': !loading })}
-      >
-        <StyledSpinner aria-live="polite" className={className} role="status">
-          {loading && <span className="sw-sr-only sw-left-[-10000px]">{ariaLabel}</span>}
-        </StyledSpinner>
+      <div className="sw-relative">
+        <div className={classNames('sw-overflow-hidden', { 'sw-sr-only': !loading })}>
+          <StyledSpinner aria-live="polite" className={className} role="status">
+            {loading && <span className="sw-sr-only">{ariaLabel}</span>}
+          </StyledSpinner>
+        </div>
       </div>
       {!loading && (children ?? (placeholder && <Placeholder className={className} />) ?? null)}
     </>
diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
index b383c11c39b..f12e392fd28 100644
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
@@ -55,13 +55,17 @@ exports[`should render with primary and secondary buttons 1`] = `
     class="emotion-0 emotion-1"
   >
     <div
-      class="sw-overflow-hidden sw-sr-only sw-left-[-10000px]"
+      class="sw-relative"
     >
       <div
-        aria-live="polite"
-        class="emotion-2 emotion-3"
-        role="status"
-      />
+        class="sw-overflow-hidden sw-sr-only"
+      >
+        <div
+          aria-live="polite"
+          class="emotion-2 emotion-3"
+          role="status"
+        />
+      </div>
     </div>
     <button
       type="button"
@@ -132,13 +136,17 @@ exports[`should render with secondary button 1`] = `
     class="emotion-0 emotion-1"
   >
     <div
-      class="sw-overflow-hidden sw-sr-only sw-left-[-10000px]"
+      class="sw-relative"
     >
       <div
-        aria-live="polite"
-        class="emotion-2 emotion-3"
-        role="status"
-      />
+        class="sw-overflow-hidden sw-sr-only"
+      >
+        <div
+          aria-live="polite"
+          class="emotion-2 emotion-3"
+          role="status"
+        />
+      </div>
     </div>
     <button
       type="button"
diff --git a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
index 74ed1c6839f..282e269e632 100644
--- a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { act, screen, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import selectEvent from 'react-select-event';
@@ -589,10 +589,10 @@ describe('in manage mode', () => {
     expect(await ui.sureButton.find()).toBeInTheDocument();
     await act(() => user.click(ui.sureButton.get()));
 
-    expect(getTokensList()).toHaveLength(2);
+    await waitFor(() => expect(getTokensList()).toHaveLength(2));
 
     await act(() => user.click(ui.generateButton.get()));
-    expect(getTokensList()).toHaveLength(3);
+    await waitFor(() => expect(getTokensList()).toHaveLength(3));
     expect(await screen.findByText('users.tokens.new_token_created.test')).toBeInTheDocument();
 
     await user.click(ui.doneButton.get());
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
index 7286bea8dd8..9d0ad090f98 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Checkbox with children should render loading state 1`] = `
   data-testid="spinner"
 >
   <span
-    class="sw-sr-only sw-left-[-10000px]"
+    class="sw-sr-only"
   >
     loading
   </span>
@@ -21,7 +21,7 @@ exports[`Checkbox with no children should render loading state 1`] = `
   data-testid="spinner"
 >
   <span
-    class="sw-sr-only sw-left-[-10000px]"
+    class="sw-sr-only"
   >
     me
   </span>
@@ -40,7 +40,7 @@ exports[`should render the checkbox on the right 1`] = `
     child
   </a>
   <div
-    class="sw-overflow-hidden"
+    class="sw-overflow-hidden sw-relative"
   >
     <i
       aria-live="polite"
diff --git a/server/sonar-web/src/main/js/components/ui/Spinner.tsx b/server/sonar-web/src/main/js/components/ui/Spinner.tsx
index ad0f396188b..d66754a3d1a 100644
--- a/server/sonar-web/src/main/js/components/ui/Spinner.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Spinner.tsx
@@ -45,7 +45,7 @@ export default function Spinner(props: Props) {
 
   return (
     <>
-      <div className="sw-overflow-hidden">
+      <div className="sw-overflow-hidden sw-relative">
         <i
           aria-live="polite"
           data-testid="spinner"
@@ -54,7 +54,7 @@ export default function Spinner(props: Props) {
             'is-loading': loading,
           })}
         >
-          {loading && <span className="sw-sr-only sw-left-[-10000px]">{ariaLabel}</span>}
+          {loading && <span className="sw-sr-only">{ariaLabel}</span>}
         </i>
       </div>
       {!loading && children}
-- 
2.39.5