fix(clerk-js): Ensure buttons have keyboard access when shown (#7306)

Author: alexcarpenter

.changeset/five-animals-pull.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Conditionally apply `tabIndex={-1}` usage when shown to ensure buttons are keyboard accessible.

packages/clerk-js/src/ui/elements/ClipboardInput.tsx

@@ -30,7 +30,6 @@ export const ClipboardInput = (props: ClipboardInputProps) => {
       <Button
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
         variant='ghost'
-        tabIndex={-1}
         onClick={onCopy}
         sx={{
           position: 'absolute',

packages/clerk-js/src/ui/elements/PasswordInput.tsx

@@ -31,6 +31,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
     setWarning,
     setError,
     setHasPassedComplexity,
+    tabIndex,
     ...rest
   } = props;
   const inputRef = useRef<HTMLInputElement>(null);
@@ -86,6 +87,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
     >
       <Input
         {...rest}
+        tabIndex={tabIndex}
         onChange={onChange}
         onBlur={e => {
           rest.onBlur?.(e);
@@ -108,7 +110,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
         variant='ghost'
         size='xs'
-        tabIndex={-1}
+        tabIndex={tabIndex}
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',