@juspay/svelte-ui-components 2.133.0 → 2.133.1

package/dist/Checkbox/Checkbox.svelte

@@ -13,7 +13,8 @@
     indeterminateIcon,
     onclick,
     classes,
-    ariaControls
+    ariaControls,
+    ariaLabel
   }: CheckboxProperties = $props();
 
   function handleClick(): void {
@@ -71,6 +72,7 @@
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-disabled={disabled}
     aria-controls={ariaControls ?? null}
+    aria-label={text.length === 0 ? (ariaLabel ?? null) : null}
     onkeydown={handleKeyDown}
     data-pw={typeof testId === 'string' ? `${testId}-box` : null}
     testID={typeof testId === 'string' ? `${testId}-box` : null}

package/dist/Checkbox/properties.d.ts

@@ -12,6 +12,11 @@ export type OptionalCheckboxProperties = {
     indeterminateIcon?: Snippet;
     classes?: string;
     ariaControls?: string;
+    /** Accessible name for the checkbox. Needed whenever the visible label sits
+     *  outside this component (a table header cell, an icon-only row control),
+     *  since name-from-content cannot reach it. Ignored when `text` is non-empty:
+     *  a visible label must stay part of the accessible name (WCAG 2.5.3). */
+    ariaLabel?: string;
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/Input/Input.svelte

@@ -26,6 +26,7 @@
     autoComplete = 'on',
     inputMode,
     name = '',
+    id,
     testId = '',
     textTransformers = [],
     textViewPresentation = [],
@@ -60,6 +61,16 @@
     showCount = false
   }: InputProperties = $props();
 
+  /* `for` on a <label> resolves against an element's id, never its name. The label
+     was emitted with for={name} while the field itself carried only name={name},
+     so the association never completed for any caller. Derive the id from name so
+     every existing caller that already passes label + name becomes correctly
+     labelled with no change on their part; an explicit id wins, for callers who
+     need uniqueness across repeated rows or who set no name. */
+  const uid = $props.id();
+  const effectiveId = $derived(id || (name !== '' ? `${name}-${uid}` : uid));
+  const hasVisibleLabel = $derived(typeof label === 'string' && label !== '' && !actionInput);
+
   export function focus() {
     try {
       inputElement?.focus();
@@ -268,8 +279,8 @@
 </script>
 
 <div class="input-container {classes ?? ''}" class:input-error={showError && !actionInput}>
-  {#if typeof label === 'string' && label !== '' && !actionInput}
-    <label class="label" for={name}>
+  {#if hasVisibleLabel}
+    <label class="label" for={effectiveId}>
       {label}{#if mandatory}<span class="input-mandatory-asterisk" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
@@ -277,9 +288,10 @@
   {#snippet fieldElement()}
     {#if useTextArea}
       <textarea
+        id={effectiveId}
         {value}
         {placeholder}
-        aria-label={ariaLabel}
+        aria-label={hasVisibleLabel ? null : (ariaLabel ?? null)}
         autocomplete={autoComplete}
         inputmode={inputMode}
         {name}
@@ -311,10 +323,11 @@
       ></textarea>
     {:else}
       <input
+        id={effectiveId}
         type={dataType}
         {value}
         {placeholder}
-        aria-label={ariaLabel}
+        aria-label={hasVisibleLabel ? null : (ariaLabel ?? null)}
         autocomplete={autoComplete}
         inputmode={inputMode}
         {name}

package/dist/Input/properties.d.ts

@@ -65,6 +65,12 @@ export type OptionalInputProperties = {
      */
     inputMode?: HTMLInputAttributes['inputmode'];
     name?: string;
+    /** Field id, applied to the rendered `<input>`/`<textarea>` so the visible
+     *  `<label>` can reference it. Wins over the auto-derived id. Omitting it is
+     *  safe: the fallback appends a per-instance suffix from `$props.id()`, so
+     *  fields that share a `name` (radio groups, repeated rows) still get unique
+     *  ids. Note this names the FIELD, not the wrapper `<div>`. */
+    id?: string;
     textTransformers?: TextTransformer[];
     textViewPresentation?: TextTransformer[];
     testId?: string;

package/dist/Menu/Menu.svelte

@@ -18,6 +18,7 @@
     selectedValue = null,
     role: menuRole = 'menu',
     ariaLabel: menuAriaLabel,
+    triggerAriaLabel,
     id: menuId,
     placement = 'bottom-left',
     usePortal = false
@@ -410,6 +411,7 @@
       tabindex="0"
       aria-haspopup="menu"
       aria-expanded={open}
+      aria-label={triggerAriaLabel ?? null}
     >
       {#if typeof trigger === 'function'}
         {@render trigger({

package/dist/Menu/properties.d.ts

@@ -59,6 +59,11 @@ export type OptionalMenuProperties = {
     selectedValue?: string | null;
     role?: 'menu' | 'listbox';
     ariaLabel?: string;
+    /** Accessible name for the TRIGGER — the element that actually takes focus.
+     *  `ariaLabel` names the dropdown, which is portaled to <body>, so it cannot
+     *  name the control the user tabs to. Applies only when `interactiveTrigger`
+     *  is false; when true the snippet's own control owns its name. */
+    triggerAriaLabel?: string;
     id?: string;
     /** Dropdown anchoring relative to the trigger. Defaults to `'bottom-left'`,
      * which preserves the existing behavior (including the `--menu-dropdown-top`

package/package.json

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