@descope/web-components-ui 3.27.0 → 3.27.2

package/dist/index.esm.js

@@ -6819,7 +6819,7 @@ const ButtonClass = compose$1(
         padding: 0;
 			}
 		`,
-    excludeAttrsSync: ['tabindex', 'class', 'style'],
+    excludeAttrsSync: ['tabindex', 'class', 'style', 'role'],
     componentName: componentName$1p,
   }),
 );
@@ -9622,7 +9622,7 @@ class PasscodeInternal extends BaseInputClass$f {
   }
 
   initInputs() {
-    this.inputs.forEach((input) => {
+    this.inputs.forEach((input, idx) => {
       // During debounced input we hide the value with a mask.
       // This allows us to hide the multiple population of the first input
       // in case of an automated input (e.g. Safari OTP Autofill or paste).
@@ -9711,7 +9711,9 @@ class PasscodeInternal extends BaseInputClass$f {
       };
 
       forwardAttrs(this, input, { includeAttrs: forwardAttributes });
-      input.shadowRoot.querySelector('input').setAttribute('aria-label', 'passcode digit');
+      input.shadowRoot
+        .querySelector('input')
+        .setAttribute('aria-label', `Digit ${idx + 1} of ${this.inputs.length}`);
     });
 
     this.handleFocusEventsDispatching(this.inputs);
@@ -9790,6 +9792,7 @@ const customMixin$g = (superclass) =>
         tabindex="-1"
         slot="input"
         role="textbox"
+        aria-label="passcode"
       ><slot></slot></${componentName$1g}>
       `;
 
@@ -14161,7 +14164,7 @@ class RawUploadFile extends BaseInputClass$a {
 				</div>
 				<div class="description"></div>
 				<div class="button-wrapper">
-					<input type="file" tabindex="-1" aria-labelledby="button"/>
+					<input type="file" tabindex="-1" aria-hidden="true"/>
 					<descope-button id="button"></descope-button>
 				</div>
 			</div>
@@ -26084,6 +26087,10 @@ const recoveryCodes = {
     center: { [vars$V.textAlign]: 'center' },
   },
 
+  displayVariant: {
+    buttons: { [vars$V.hostMinWidth]: '100px' },
+  },
+
   _fullWidth: {
     [vars$V.hostWidth]: '100%',
   },
@@ -28056,6 +28063,10 @@ class RawTooltip extends createBaseClass$1({
       this,
     );
 
+    // vaadin links the target via aria-describedby to its sr-label, which lives in our shadow root,
+    // so a slotted target would reference an ID from another DOM tree.
+    this.tooltip.ariaTarget = this.anchored;
+
     this.defaultSlot.addEventListener('slotchange', () =>
       this.#setTooltipTarget(),
     );