Fix test failures due to scoped class names

src/tile/TileAvatar.test.tsx

@@ -6,22 +6,22 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { expect, describe, it } from "vitest";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 import { TileAvatar } from "./TileAvatar";
 
 describe("TileAvatar", () => {
   it("should show loading spinner when loading", () => {
-    const { container } = render(
+    render(
       <TileAvatar id="@a:example.org" name="Alice" size={96} loading={true} />,
     );
-    expect(container.querySelector(".loading")).toBeInTheDocument();
+    screen.getByLabelText("Loading…");
   });
 
   it("should not show loading spinner when not loading", () => {
-    const { container } = render(
+    render(
       <TileAvatar id="@a:example.org" name="Alice" size={96} loading={false} />,
     );
-    expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Loading…")).toBe(null);
   });
 });

src/tile/TileAvatar.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC } from "react";
 import { InlineSpinner } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
 
 import styles from "./TileAvatar.module.css";
 import { Avatar, type Props as AvatarProps } from "../Avatar";
@@ -17,11 +18,12 @@ interface Props extends AvatarProps {
 }
 
 export const TileAvatar: FC<Props> = ({ size, loading, ...props }) => {
+  const { t } = useTranslation();
   return (
     <div>
       {loading && (
         <div className={styles.loading}>
-          <InlineSpinner size={size / 3} />
+          <InlineSpinner size={size / 3} aria-label={t("common.loading")} />
         </div>
       )}
       <Avatar size={size} {...props} />