@juspay/svelte-ui-components 2.113.0 → 2.114.1

package/dist/Modal/Modal.svelte

@@ -21,6 +21,7 @@
     footer,
     debounceTime = 700,
     leftImageTestId,
+    leftImageAriaLabel,
     testId,
     content,
     footerSnippet,
@@ -157,24 +158,35 @@
           {#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}
             <div class="header">
               {#if typeof header.leftImage === 'string' && header.leftImage.length > 0}
-                <div
-                  onclick={handleLeftImageClick}
-                  onkeydown={handleLeftImageKeyDown}
-                  role="button"
-                  tabindex="0"
-                  data-pw={leftImageTestId}
-                  testID={leftImageTestId}
-                >
+                {@const leftImageSrc = header.leftImage}
+                {#snippet leftImage()}
                   <!-- Inline SVGs so currentColor icons inherit the header text
                        colour; non-SVG URLs fall back to a plain <img>. -->
-                  <Img
-                    inlineSvg
-                    src={header.leftImage}
-                    alt=""
-                    fallback=""
-                    classes="header-left-img"
-                  />
-                </div>
+                  <Img inlineSvg src={leftImageSrc} alt="" fallback="" classes="header-left-img" />
+                {/snippet}
+                <!-- The left image is only a control when a click handler is actually supplied.
+                     Consumers pass a decorative brand/source logo here far more often than a back
+                     button, and announcing those as a focusable "button" that does nothing when
+                     activated is worse for assistive tech than leaving them unannounced. The two
+                     branches are written out rather than computed so the role/tabindex pairing
+                     stays statically checkable. -->
+                {#if typeof onheaderLeftImageClick === 'function'}
+                  <div
+                    onclick={handleLeftImageClick}
+                    onkeydown={handleLeftImageKeyDown}
+                    role="button"
+                    tabindex="0"
+                    aria-label={leftImageAriaLabel ?? null}
+                    data-pw={leftImageTestId}
+                    testID={leftImageTestId}
+                  >
+                    {@render leftImage()}
+                  </div>
+                {:else}
+                  <div data-pw={leftImageTestId} testID={leftImageTestId}>
+                    {@render leftImage()}
+                  </div>
+                {/if}
               {/if}
               {#if typeof header.text === 'string' && header.text.length > 0}
                 <div class="header-text" data-pw={header.testId} testID={header.testId}>
@@ -187,6 +199,7 @@
                   tabindex="0"
                   onclick={handleRightImageClick}
                   onkeydown={handleRightImageKeyDown}
+                  aria-label={header.buttonAriaLabel ?? null}
                   data-pw={header.buttonTestId}
                   testID={header.buttonTestId}
                 >

package/dist/Modal/properties.d.ts

@@ -17,6 +17,8 @@ export type OptionalModalProperties = {
         text?: string;
         testId?: string;
         buttonTestId?: string;
+        /** Accessible name for the right header image's role="button" wrapper (e.g. a close control). Rendered as aria-label. */
+        buttonAriaLabel?: string;
     };
     footer?: {
         primaryButton?: ButtonProperties;
@@ -24,6 +26,8 @@ export type OptionalModalProperties = {
     };
     debounceTime?: number;
     leftImageTestId?: string;
+    /** Accessible name for the left header image's role="button" wrapper (e.g. a back control). Rendered as aria-label. */
+    leftImageAriaLabel?: string;
     testId?: string;
     content?: Snippet;
     footerSnippet?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.113.0",
+  "version": "2.114.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",