@juspay/svelte-ui-components 4.52.1 → 4.53.0

package/dist/AttachmentChipRow/AttachmentChipRow.svelte

@@ -26,14 +26,15 @@
     removeIcon,
     fileIcon,
     testId,
-    classes
+    classes,
+    ariaLabel = 'Pending attachments'
   }: AttachmentChipRowProperties = $props();
 </script>
 
 {#if images.length > 0 || videos.length > 0 || files.length > 0}
   <Scroller
     direction="horizontal"
-    ariaLabel="Pending attachments"
+    {ariaLabel}
     showArrows={false}
     hideScrollbar={false}
     showGradient={false}

package/dist/AttachmentChipRow/properties.d.ts

@@ -44,4 +44,6 @@ export type OptionalAttachmentChipRowProperties = {
     fileIcon?: Snippet;
     testId?: string;
     classes?: string;
+    /** Name of this attachment strip. Default: `Pending attachments`. */
+    ariaLabel?: string;
 };

package/dist/Book/Book.svelte

@@ -11,6 +11,7 @@
     showNavigation = true,
     showPageIndicator = true,
     enableSwipe = false,
+    ariaLabel = 'Book',
     testId,
     previousIcon,
     nextIcon,
@@ -108,6 +109,7 @@
   onmousedown={handleMouseDown}
   onmouseup={handleMouseUp}
   role="region"
+  aria-label={ariaLabel}
   tabindex="0"
 >
   <div class="book-viewport">

package/dist/Book/properties.d.ts

@@ -14,6 +14,8 @@ export type OptionalBookProperties = {
     showNavigation?: boolean;
     showPageIndicator?: boolean;
     enableSwipe?: boolean;
+    /** Accessible name for the keyboard-operated book region. Defaults to "Book". */
+    ariaLabel?: string;
     testId?: string;
     previousIcon?: Snippet;
     nextIcon?: Snippet;

package/dist/Chat/Chat.svelte

@@ -23,6 +23,7 @@
     hideScrollbar = false,
     jump = true,
     jumpLabel = 'Jump to latest',
+    messageListLabel,
     jumpIcon,
     toolStatus = null,
     suggestions = [],
@@ -97,6 +98,7 @@
   {/if}
 
   <ChatMessageList
+    ariaLabel={messageListLabel ?? (title.trim() ? `${title} messages` : 'Conversation messages')}
     {messages}
     {autoscroll}
     {scrollPolicy}

package/dist/Chat/properties.d.ts

@@ -23,6 +23,8 @@ export type OptionalChatProperties = {
     hideScrollbar?: ChatMessageListProperties['hideScrollbar'];
     jump?: ChatMessageListProperties['jump'];
     jumpLabel?: ChatMessageListProperties['jumpLabel'];
+    /** Transcript name; defaults to the chat title plus `messages`, or `Conversation messages`. */
+    messageListLabel?: ChatMessageListProperties['ariaLabel'];
     jumpIcon?: ChatMessageListProperties['jumpIcon'];
     toolStatus?: ChatToolStatus | null;
     suggestions?: ChatSuggestion[];

package/dist/Chat/types.d.ts

@@ -11,6 +11,8 @@ export type ChatMessageData = {
      * MarkdownText). Wins over `html` and `content` in the bubble.
      */
     markdown?: string;
+    /** Accessible table scroll-region name for static and streamed markdown bubbles. */
+    markdownTableLabel?: string;
     streaming?: boolean;
     /**
      * Reveal this message progressively as it grows. Opt-in per message so it cannot stack with

package/dist/ChatMessage/ChatMessage.svelte

@@ -10,12 +10,14 @@
   import { onDestroy, onMount } from 'svelte';
   import { partyOf } from '../Chat/roles';
   import type { ChatMessageProperties } from './properties';
+  import type { RenderMarkdownOptions } from '../MarkdownText/properties';
 
   let {
     role,
     content = '',
     html,
     markdown,
+    markdownTableLabel,
     body,
     streaming = false,
     typewriter = false,
@@ -90,7 +92,9 @@
      `marked` — a peer dependency — is only pulled in at runtime, never during
      SSR, and rendering `markdown` degrades to the `html`/`content` fallback
      until the module resolves or when the peer is absent. */
-  let renderMarkdownFn = $state<((source: string) => string) | null>(null);
+  let renderMarkdownFn = $state<
+    ((source: string, options?: RenderMarkdownOptions) => string) | null
+  >(null);
 
   onMount(() => {
     void import('../MarkdownText/markdown')
@@ -102,8 +106,19 @@
       });
   });
 
+  // Both rendering branches share the same options-aware renderer. Capture the label
+  // reactively so a locale/name update also refreshes already-revealed typewriter HTML.
+  let messageMarkdownRenderer = $derived.by(() => {
+    const renderer = renderMarkdownFn;
+    if (renderer === null) {
+      return null;
+    }
+    const options: RenderMarkdownOptions =
+      typeof markdownTableLabel === 'string' ? { tableLabel: markdownTableLabel } : {};
+    return (source: string) => renderer(source, options);
+  });
   let effectiveHtml = $derived(
-    hasMarkdown && renderMarkdownFn !== null ? renderMarkdownFn(markdown ?? '') : html
+    hasMarkdown && messageMarkdownRenderer !== null ? messageMarkdownRenderer(markdown ?? '') : html
   );
   let hasHtml = $derived(typeof effectiveHtml === 'string' && effectiveHtml.length > 0);
 
@@ -128,7 +143,7 @@
       (!hasMarkdown || renderMarkdownFn !== null)
   );
   let typewriterRenderText = $derived(
-    hasMarkdown && renderMarkdownFn !== null ? { renderText: renderMarkdownFn } : {}
+    hasMarkdown && messageMarkdownRenderer !== null ? { renderText: messageMarkdownRenderer } : {}
   );
   // Clamped at the boundary the way LoadingDots clamps `dots`, so the prop's floor is part
   // of this component's contract rather than something a consumer discovers. The finite

package/dist/ChatMessage/properties.d.ts

@@ -20,6 +20,12 @@ export type OptionalChatMessageProperties = {
      * (for server-rendered markdown use `MarkdownText` or `renderMarkdown`).
      */
     markdown?: string;
+    /**
+     * Accessible name for each table scroll region rendered from `markdown`, including
+     * progressive/typewriter rendering. Omitted or empty leaves the shared renderer's
+     * unnamed, keyboard-scrollable wrapper unchanged. Does not alter `html` or `body`.
+     */
+    markdownTableLabel?: string;
     /**
      * Replaces the rendered bubble body with arbitrary markup while keeping the
      * message chrome (role styling, avatar, header, attachments, copy/retry/

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -28,13 +28,15 @@
     onretry,
     onfeedback,
     testId,
-    classes
+    classes,
+    ariaLabel = 'Conversation messages'
   }: ChatMessageListProperties = $props();
 
   let listEl: HTMLElement | null = $state(null);
   let innerEl: HTMLElement | null = $state(null);
   let atBottom = $state(true);
   let scrollable = $state(false);
+  let keyboardScrollable = $state(false);
   let pinActive = false;
   // Set when a turn without pinHold has asked for its reservation back, but the reply is not yet
   // tall enough to hold the pinned position without it. Cleared by tryReleasePin.
@@ -78,6 +80,7 @@
 
   function reportScrollState(node: HTMLElement): void {
     atBottom = isNearBottom(node);
+    keyboardScrollable = node.scrollHeight - node.clientHeight > 1;
     scrollable = node.scrollHeight - node.clientHeight > NEAR_BOTTOM_THRESHOLD;
     onscrollstate?.({ atBottom, scrollable });
   }
@@ -260,19 +263,29 @@
     if (typeof ResizeObserver === 'undefined') {
       return;
     }
+    let pendingFrame: number | null = null;
     const observer = new ResizeObserver(() => {
-      if (listEl === null) {
+      if (pendingFrame !== null) {
         return;
       }
-      if (scrollPolicy === 'near-bottom' && autoscroll && atBottom) {
-        listEl.scrollTop = listEl.scrollHeight;
-      }
-      tryReleasePin();
-      reportScrollState(listEl);
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = null;
+        if (listEl === null || !node.isConnected) {
+          return;
+        }
+        if (scrollPolicy === 'near-bottom' && autoscroll && atBottom) {
+          listEl.scrollTop = listEl.scrollHeight;
+        }
+        tryReleasePin();
+        reportScrollState(listEl);
+      });
     });
     observer.observe(node);
     return {
       destroy(): void {
+        if (pendingFrame !== null) {
+          cancelAnimationFrame(pendingFrame);
+        }
         observer.disconnect();
       }
     };
@@ -291,9 +304,14 @@
   };
 </script>
 
+<!-- The transcript is an independent scrolling surface. Native keyboard focus
+     enables the browser's scroll keys while it overflows, even without actions. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class="chat-message-list {classes ?? ''}"
   role="log"
+  aria-label={ariaLabel}
+  tabindex={keyboardScrollable ? 0 : null}
   aria-live="polite"
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
@@ -323,6 +341,7 @@
           content={msg.content}
           html={msg.html}
           markdown={msg.markdown}
+          markdownTableLabel={msg.markdownTableLabel}
           body={typeof messageBody === 'function' ? bodyFor : null}
           streaming={msg.streaming}
           typewriter={msg.typewriter}
@@ -352,6 +371,11 @@
 </div>
 
 <style>
+  .chat-message-list:focus-visible {
+    outline: var(--chat-message-list-focus-outline, 2px solid currentColor);
+    outline-offset: -2px;
+  }
+
   .chat-message-list {
     box-sizing: border-box;
     display: flex;

package/dist/ChatMessageList/properties.d.ts

@@ -44,6 +44,8 @@ export type OptionalChatMessageListProperties = {
     allowCopy?: boolean;
     testId?: string;
     classes?: string;
+    /** Accessible transcript name. Default: `Conversation messages`. */
+    ariaLabel?: string;
 };
 export type ChatMessageListEventProperties = {
     /**

package/dist/Choicebox/Choicebox.svelte

@@ -82,12 +82,20 @@
     onclick?.(selected);
   }
 
-  // The form control is `tabindex="-1"`, so the browser's own "focus the invalid
-  // field" step would land on an element the user cannot see or reach. Focus the
-  // card that carries the role instead.
-  function handleInvalid(e: Event): void {
-    e.preventDefault();
-    card?.focus();
+  // Let native validation choose the first invalid control. Redirect only its
+  // actual focus to the visible card, so checkValidity() stays a silent query
+  // and later invalid fields cannot replace the first field's focus.
+  function handleNativeFocus(event: FocusEvent & { currentTarget: HTMLInputElement }): void {
+    const carrier = event.currentTarget;
+    // Finish native interactive validation before moving focus. Firefox can
+    // open its validation UI after a synchronous handoff and swallow the next
+    // pointer click. A later owner or an unmounted card must keep its focus.
+    queueMicrotask(() => {
+      const root = carrier.getRootNode();
+      if (card?.isConnected && 'activeElement' in root && root.activeElement === carrier) {
+        card.focus();
+      }
+    });
   }
 
   function handleKeyDown(e: KeyboardEvent): void {
@@ -143,21 +151,6 @@
   testID={testId}
   {@attach groupMembership}
 >
-  <input
-    type={mode === 'radio' ? 'radio' : 'checkbox'}
-    class="native-control"
-    checked={selected}
-    {disabled}
-    {value}
-    {required}
-    name={typeof name === 'string' ? name : null}
-    form={typeof form === 'string' ? form : null}
-    oninvalid={handleInvalid}
-    tabindex={-1}
-    aria-hidden="true"
-    data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
-    testID={typeof testId === 'string' ? `${testId}-native-input` : null}
-  />
   {#if typeof children === 'function'}
     {@render children()}
   {/if}
@@ -171,6 +164,23 @@
   {/if}
 </div>
 
+<!-- Native form participation remains outside the interactive accessibility owner. -->
+<input
+  type={mode === 'radio' ? 'radio' : 'checkbox'}
+  class="native-control"
+  checked={selected}
+  {disabled}
+  {value}
+  {required}
+  name={typeof name === 'string' ? name : null}
+  form={typeof form === 'string' ? form : null}
+  onfocus={handleNativeFocus}
+  tabindex={-1}
+  aria-hidden="true"
+  data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
+  testID={typeof testId === 'string' ? `${testId}-native-input` : null}
+/>
+
 {#if field.showsError}
   <div
     id={field.errorId}
@@ -197,8 +207,8 @@
   .native-control {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    width: 1px;
+    height: 1px;
     margin: 0;
     pointer-events: none;
   }

package/dist/Draggable/Draggable.svelte

@@ -134,13 +134,15 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- This named content group moves with arrow keys; it can contain independent
+     controls, so button semantics would hide their accessibility semantics. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
 <div
   class="draggable {classes ?? ''}"
   class:dragging={active !== null}
   data-pw={typeof testId === 'string' ? testId : null}
   tabindex={disabled ? -1 : 0}
+  role="group"
   aria-label={dragLabel}
   style:transform={`translate(${x}px, ${y}px)`}
   onpointerdown={startDrag}

package/dist/MediaPlayer/MediaPlayer.svelte

@@ -17,6 +17,7 @@
     src,
     type,
     alt = '',
+    ariaLabel = 'Video player',
     autoplay = true,
     loop = false,
     controls = false,
@@ -212,13 +213,6 @@
     onpause?.(event);
   }
 
-  function handleVideoKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      togglePlayback();
-    }
-  }
-
   function handleTimeUpdate(): void {
     if (videoPlayer === null) {
       return;
@@ -390,6 +384,7 @@
       bind:muted
       {src}
       class="media"
+      aria-label={ariaLabel}
       {controls}
       {autoplay}
       {loop}
@@ -399,11 +394,6 @@
       onpause={handlePause}
       ontimeupdate={handleTimeUpdate}
       onloadedmetadata={handleLoadedMetadata}
-      onclick={controls ? null : togglePlayback}
-      onkeydown={controls ? null : handleVideoKeydown}
-      role={controls ? null : 'button'}
-      tabindex={controls ? null : 0}
-      aria-label={controls ? null : playing ? 'Pause video' : 'Play video'}
     >
       {#if hasCaptions}
         <track
@@ -417,6 +407,14 @@
     </video>
 
     {#if !controls}
+      <!-- A video cannot carry role="button". The full-surface native button
+           preserves pointer/keyboard playback without nesting the other controls. -->
+      <button
+        type="button"
+        class="media-surface-action"
+        aria-label={playing ? 'Pause video' : 'Play video'}
+        onclick={togglePlayback}
+      ></button>
       <div class="overlay">
         <div class="center-controls">
           <div class="control center-control">
@@ -571,6 +569,23 @@
     --image-margin: 0px;
   }
 
+  .media-surface-action {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .media-surface-action:focus-visible {
+    /* Keep both colors inside the clipping container and visible over imagery. */
+    outline: var(--media-player-focus-outline, 2px solid #ffffff);
+    outline-offset: var(--media-player-focus-outline-offset, -2px);
+    box-shadow: var(--media-player-focus-box-shadow, inset 0 0 0 4px #000000);
+  }
+
   .overlay {
     /* Decorative overlay space leaves the native video pointer route operative. */
     pointer-events: none;
@@ -601,7 +616,7 @@
      reachable for keyboard users too -- :hover alone left them visibility:hidden (and
      so out of the tab order) for anyone not using a mouse. */
   .media-player:hover .overlay,
-  .overlay:focus-within {
+  .media-player:focus-within .overlay {
     background-color: var(--media-player-overlay-hover-color, #0000004d);
     --center-controls-visibility: visible;
     --bottom-controls-visibility: visible;

package/dist/MediaPlayer/properties.d.ts

@@ -7,6 +7,8 @@ export type MandatoryMediaPlayerProperties = {
 };
 export type OptionalMediaPlayerProperties = {
     alt?: string;
+    /** Accessible name for the video. Image naming uses alt. Defaults to "Video player". */
+    ariaLabel?: string;
     fallback?: string;
     autoplay?: boolean;
     loop?: boolean;

package/dist/Modal/Modal.svelte

@@ -10,6 +10,7 @@
   import Img from '../Img/Img.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
+  let overlayButton: HTMLButtonElement | null = $state(null);
   let modalContent: HTMLDivElement | null = $state(null);
   let backPressed = $state(false);
   // Captured in onMount right before focus moves in, restored in onDestroy.
@@ -54,12 +55,8 @@
     overlayAriaLabel
   }: ModalProperties = $props();
 
-  // The overlay only takes role="button" and becomes keyboard-reachable when a
-  // click on it would actually do something. Without either handler, clicking
-  // or activating it is already a no-op (see handleOverlayClick's guard) --
-  // announcing it as a focusable "button" in that case is worse for assistive
-  // tech than leaving it unannounced, same reasoning already applied to the
-  // header images below.
+  // A dismissible backdrop has its own native button, beside the content panel.
+  // It must never make the whole panel an interactive descendant of a button.
   const overlayDismissible = $derived(
     typeof onoverlayclick === 'function' || typeof ondismiss === 'function'
   );
@@ -142,7 +139,7 @@
   };
 
   const handleOverlayClick = (event: MouseEvent): void => {
-    if (event.target === overlayDiv) {
+    if (event.target === overlayDiv || event.target === overlayButton) {
       debounce(() => {
         onoverlayclick?.();
         ondismiss?.();
@@ -185,37 +182,6 @@
     });
   };
 
-  // The overlay's own Enter/Space activation, additional to the shared
-  // handleKeyDown (Tab/onkeydown-prop -- Escape is the dismissal module's,
-  // via handleEscape) that svelte:window already delivers here via
-  // bubbling -- this handler must not also call handleKeyDown itself, or
-  // every keydown on/under the overlay would run it twice (once from this
-  // direct call, once from the window listener seeing the same event bubble
-  // past it), double-firing onkeydown and re-running the Tab trap. Enter/Space
-  // activation is scoped to this handler, not folded into handleKeyDown itself,
-  // because handleKeyDown also runs
-  // from the window listener for a keypress anywhere in the modal (e.g. an
-  // input field) -- it must not treat every Enter/Space in the modal as an
-  // overlay dismissal. This handler is bound to the overlay div, so a keydown
-  // on any focusable descendant (the back button, a footer button, an input
-  // field) bubbles up and reaches it too -- the target check below is what
-  // actually stops that bubbled Enter/Space from being read as an activation
-  // of the overlay itself, mirroring the guard handleOverlayClick already has
-  // for the click case.
-  const handleOverlayKeyDown = (event: KeyboardEvent): void => {
-    if (
-      (event.key === 'Enter' || event.key === ' ') &&
-      overlayDismissible &&
-      event.target === overlayDiv
-    ) {
-      event.preventDefault();
-      debounce(() => {
-        onoverlayclick?.();
-        ondismiss?.();
-      });
-    }
-  };
-
   // Fix [major]: role=button image divs need Enter/Space handlers for WCAG 2.1 SC 2.1.1.
   // Keyboard activation (Enter/Space) invokes the same prop callbacks as click.
   const handleLeftImageKeyDown = (event: KeyboardEvent): void => {
@@ -307,7 +273,8 @@
 
 {#if typeof content === 'function'}
   <OverlayAnimation fadeIn={overlayFadeIn}>
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- Native backdrop activation bubbles here; only the backdrop target dismisses. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
     <div
       bind:this={overlayDiv}
       use:portalAction={{ usePortal }}
@@ -316,13 +283,18 @@
         ? `--modal-overlay-backdrop-filter: ${overlayBackdropFilter};`
         : null}
       onclick={handleOverlayClick}
-      onkeydown={handleOverlayKeyDown}
-      role={overlayDismissible ? 'button' : null}
-      tabindex={overlayDismissible ? 0 : null}
-      aria-label={overlayAriaLabel ?? null}
       data-pw={testId}
       testID={testId}
     >
+      {#if overlayDismissible}
+        <button
+          bind:this={overlayButton}
+          type="button"
+          class="modal-overlay-action"
+          aria-label={overlayAriaLabel ?? 'Dismiss modal'}
+          tabindex={role === 'dialog' || role === 'alertdialog' ? -1 : 0}
+        ></button>
+      {/if}
       <ModalAnimation enable={enableTransition} {align} {transitionType} {entryAnimation}>
         <div
           bind:this={modalContent}
@@ -437,6 +409,21 @@
     margin: var(--modal-margin);
   }
 
+  .modal-overlay-action {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .modal-overlay-action:focus-visible {
+    outline: var(--modal-overlay-focus-outline, 2px solid #2563eb);
+    outline-offset: var(--modal-overlay-focus-outline-offset, -2px);
+  }
+
   .overlay-active {
     /* Prefer the modal-specific token; fall back to the legacy generic
        --background-color (kept for backward compatibility), then the default.

package/dist/Modal/properties.d.ts

@@ -58,12 +58,13 @@ export type OptionalModalProperties = {
     /** Accessible name for the left header image's role="button" wrapper (e.g. a back control). Rendered as aria-label. */
     leftImageAriaLabel?: string;
     /**
-     * Accessible name for the overlay's `role="button"` wrapper, rendered as
+     * Accessible name for the independent native backdrop button, rendered as
      * `aria-label` -- same pattern as `leftImageAriaLabel` and
      * `header.buttonAriaLabel`. Only meaningful when the overlay is dismissible
      * (an `onoverlayclick` or `ondismiss` handler is supplied), which is the
-     * only state where the overlay is announced as a focusable "button" at all.
-     * Default: unset (no accessible name).
+     * only state where a backdrop action exists. Named dialogs keep that action
+     * outside their Tab cycle; generic panels retain Enter/Space activation.
+     * Default: "Dismiss modal".
      */
     overlayAriaLabel?: string;
     testId?: string;
@@ -107,7 +108,7 @@ export type OptionalModalProperties = {
      * ARIA role for the modal content panel. Default: unset -- the panel
      * renders no `role` and no `aria-modal` at all, byte-for-byte matching
      * behavior prior to this prop's introduction, so an existing consumer who
-     * never touches `role` sees no DOM/ARIA change. Set it explicitly (e.g.
+     * never touches `role` sees no panel role/aria-modal change. Set it explicitly (e.g.
      * `'dialog'` or `'alertdialog'`) to opt in: the panel then also carries
      * `aria-modal="true"`, since a role without aria-modal is not a complete
      * dialog announcement.

package/dist/Pagination/Pagination.svelte

@@ -9,6 +9,7 @@
     testId,
     onchange,
     classes,
+    ariaLabel = 'Pagination',
     hasMore = false,
     prevButtonTestId,
     nextButtonTestId,
@@ -69,6 +70,7 @@
 <nav
   class="pagination {classes ?? ''}"
   class:disabled
+  aria-label={ariaLabel}
   data-pw={typeof testId === 'string' && testId.length > 0 ? testId : null}
   testID={typeof testId === 'string' && testId.length > 0 ? testId : null}
 >

package/dist/Pagination/properties.d.ts

@@ -8,6 +8,8 @@ export type OptionalPaginationProperties = {
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /** Name of the page-navigation landmark. Default: `Pagination`. */
+    ariaLabel?: string;
     /**
      * Cursor-pagination hint. When `true`, the next button stays enabled even
      * when `currentPage >= totalPages` — use this when the total page count is