SONAR-20177 fix spinner sr-only state overflowing container

diff --git a/server/sonar-web/design-system/src/components/Spinner.tsx b/server/sonar-web/design-system/src/components/Spinner.tsx
index efe6c2ed378f6f1c2657c7a47b97c3dc4c0b8034..4e0b4305c6e5e6b39f105bc0e41f97fd7e285f25 100644 (file)
--- 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 b383c11c39b4d5d1ed1c256d77a6a9875c37f68f..f12e392fd28fef646216d709949faefcfe367775 100644 (file)
--- 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 74ed1c6839f6b83ca545b190f385ff38c4f1b75d..282e269e6322eb421cda015c2fbf86e649298917 100644 (file)
--- 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 7286bea8dd87132830e28d312ab306d8f55a10c6..9d0ad090f9846392e3eea8324845b61aae01b580 100644 (file)
--- 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 ad0f396188b09fa9c1fd6c227ed2ba70af175ef4..d66754a3d1ab4b395edd536601a041bd393a5291 100644 (file)
--- 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}