sts-sponsors team mailing list archive

[Peter Makowski <mp+438137@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:update-placeholder into maas-site-manager:main.

Commit message:
update Placeholder component

Requested reviews:
  Nick De Villiers (nickdv99): code, qa
  MAAS Lander (maas-lander)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/438137


-- 
Your team MAAS Committers is subscribed to branch ~petermakowski/maas-site-manager:update-placeholder.

diff --git a/frontend/src/components/Placeholder/Placeholder.test.tsx b/frontend/src/components/Placeholder/Placeholder.test.tsx
index e963ac9..6f19223 100644
--- a/frontend/src/components/Placeholder/Placeholder.test.tsx
+++ b/frontend/src/components/Placeholder/Placeholder.test.tsx
@@ -19,8 +19,8 @@ describe("Placeholder", () => {
 
   it("does not return placeholder styles when isLoading is false", () => {
     const { rerender } = render(<Placeholder>Placeholder children</Placeholder>);
-    expect(screen.queryByTestId("placeholder")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/loading/i)).not.toBeInTheDocument();
     rerender(<Placeholder isLoading>Placeholder children</Placeholder>);
-    expect(screen.getByTestId("placeholder")).toBeInTheDocument();
+    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/Placeholder/Placeholder.tsx b/frontend/src/components/Placeholder/Placeholder.tsx
index cab700c..6f0375b 100644
--- a/frontend/src/components/Placeholder/Placeholder.tsx
+++ b/frontend/src/components/Placeholder/Placeholder.tsx
@@ -23,12 +23,11 @@ const Placeholder = ({ text, children, className, isLoading = false }: Props) =>
   if (isLoading) {
     return (
       <span
-        aria-hidden={true}
+        aria-label="loading"
         className={classNames("p-placeholder", className)}
-        data-testid="placeholder"
         style={{ animationDelay: `${delay}ms` }}
       >
-        {text || children}
+        <span aria-hidden="true">{text || children}</span>
       </span>
     );
   }