Merge branch 'main' of https://github.com/StackExchange/Stacks into alpha

Author: abovedave

.changeset/strong-news-float.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+* `<Avatar>` nested `<img>` dimensions.
+* Screen reader text for the private badge variant.

package-lock.json

@@ -71,7 +71,7 @@
         "globals": "^17.0.0",
         "htm": "^3.1.1",
         "less-loader": "^12.3.0",
-        "markdown-it": "^14.1.0",
+        "markdown-it": "^14.1.1",
         "mini-css-extract-plugin": "^2.9.4",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.2.0",

package.json

@@ -48,6 +48,11 @@
          * Additional CSS classes added to the element
          */
         class?: string;
+
+        /**
+         * Localized translation for private communities icon title tag
+         */
+        i18nPrivateIconTitle?: string;
     }
 
     const {
@@ -60,6 +65,7 @@
         badge = false,
         class: className = "",
         role,
+        i18nPrivateIconTitle = "Private",
         ...restProps
     }: Props & HTMLAnchorAttributes = $props();
 
@@ -89,7 +95,14 @@
     {...restProps}
 >
     {#if src}
-        <img class="s-avatar--image" {src} alt="" role="presentation" />
+        <img
+            class="s-avatar--image"
+            {src}
+            alt=""
+            role="presentation"
+            width={size}
+            height={size}
+        />
     {:else if letter}
         <span class="s-avatar--letter" aria-hidden="true">{letter}</span>
     {/if}
@@ -103,8 +116,11 @@
         />
     {/if}
     {#if badge}
-        <!-- TODO This badge is not purely decorative, so it should include descriptive text
-        (see https://stackoverflow.atlassian.net/browse/A11Y-126) -->
-        <Icon class="s-avatar--badge" src={IconShieldXSm} native />
+        <Icon
+            class="s-avatar--badge"
+            src={IconShieldXSm}
+            native
+            title={i18nPrivateIconTitle}
+        />
     {/if}
 </svelte:element>

packages/stacks-svelte/src/components/Avatar/Avatar.svelte

@@ -35,6 +35,33 @@ describe("Avatar", () => {
         expect(screen.getByText("test avatar")).to.exist;
     });
 
+    it("should set width and height on the image from size", () => {
+        const { container } = render(Avatar, {
+            name: "test avatar",
+            src: "https://picsum.photos/128",
+            size: 48,
+        });
+        const imageElement = container.querySelector(
+            ".s-avatar--image"
+        ) as HTMLImageElement | null;
+        expect(imageElement).to.exist;
+        expect(imageElement).to.have.attr("width", "48");
+        expect(imageElement).to.have.attr("height", "48");
+    });
+
+    it("should default image width and height to 16 when size is omitted", () => {
+        const { container } = render(Avatar, {
+            name: "test avatar",
+            src: "https://picsum.photos/128",
+        });
+        const imageElement = container.querySelector(
+            ".s-avatar--image"
+        ) as HTMLImageElement | null;
+        expect(imageElement).to.exist;
+        expect(imageElement).to.have.attr("width", "16");
+        expect(imageElement).to.have.attr("height", "16");
+    });
+
     it("should render the avatar with the provided letter", () => {
         render(Avatar, {
             name: "test avatar",
@@ -57,31 +84,25 @@ describe("Avatar", () => {
         expect(badgeElement).to.exist;
     });
 
-    it("should render the online status small indicator when status is online and size is 16 or 24", () => {
-        render(Avatar, {
+    it("should use default i18nPrivateIconTitle for the badge icon", () => {
+        const { container } = render(Avatar, {
             name: "test avatar",
-            status: "online",
+            badge: true,
         });
-        const smallIndicatorEl = screen
-            .getByText("test avatar")
-            .parentElement?.querySelector(".s-avatar--indicator");
-        expect(smallIndicatorEl).to.exist;
-        expect(smallIndicatorEl).to.have.class("s-activity-indicator__sm");
-        expect(screen.getByText("Online")).to.exist;
+        const title = container.querySelector(".s-avatar--badge title");
+        expect(title).to.exist;
+        expect(title?.textContent).to.equal("Private");
     });
 
-    it("should render the online status large indicator when status is online and size is above 24", () => {
-        render(Avatar, {
+    it("should use custom i18nPrivateIconTitle for the badge icon", () => {
+        const { container } = render(Avatar, {
             name: "test avatar",
-            status: "online",
-            size: 32,
+            badge: true,
+            i18nPrivateIconTitle: "Community privée",
         });
-        const largeIndicatorEl = screen
-            .getByText("test avatar")
-            .parentElement?.querySelector(".s-avatar--indicator");
-        expect(largeIndicatorEl).to.exist;
-        expect(largeIndicatorEl).not.to.have.class("s-activity-indicator__sm");
-        expect(screen.getByText("Online")).to.exist;
+        const title = container.querySelector(".s-avatar--badge title");
+        expect(title).to.exist;
+        expect(title?.textContent).to.equal("Community privée");
     });
 
     it("should render the avatar with artbirary classes", () => {