chore: Address PR comments

Author: tmilewski

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'otpCodeField',
   'otpCodeFieldInputs',
   'otpCodeFieldInput',
+  'otpCodeFieldInputContainer',
   'otpCodeFieldErrorText',
   'formResendCodeLink',
 

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

@@ -303,7 +303,10 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
   const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box
+      elementDescriptor={descriptors.otpCodeFieldInputContainer}
+      sx={{ position: 'relative' }}
+    >
       {/* Hidden input for password manager compatibility */}
       <Input
         ref={hiddenInputRef}
@@ -322,14 +325,10 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
           // When password manager focuses the hidden input, focus the first visible input
           focusInputAt(0);
         }}
-        sx={theme => ({
-          position: 'absolute',
+        sx={() => ({
+          ...common.visuallyHidden(),
           left: '-9999px',
-          width: `calc(1px + ${passwordManagerOffset}px)`,
-          height: '1px',
-          opacity: theme.opacity.$hidden,
           pointerEvents: 'none',
-          clipPath: `inset(0 ${passwordManagerOffset}px 0 0)`,
         })}
       />
 

packages/clerk-js/src/ui/foundations/opacity.ts

@@ -1,5 +1,4 @@
 export const opacity = Object.freeze({
-  hidden: '0%',
   sm: '24%',
   disabled: '50%',
   inactive: '62%',

packages/types/src/appearance.ts

@@ -218,6 +218,7 @@ export type ElementsConfig = {
   otpCodeField: WithOptions;
   otpCodeFieldInputs: WithOptions;
   otpCodeFieldInput: WithOptions;
+  otpCodeFieldInputContainer: WithOptions;
   otpCodeFieldErrorText: WithOptions;
 
   dividerRow: WithOptions;