fix(ui): honor a direct aria-invalid on Otp

Author: alexcarpenter

packages/ui/src/mosaic/components/otp/otp.test.tsx

@@ -29,6 +29,21 @@ describe('Mosaic Otp', () => {
     }
   });
 
+  it('marks every slot invalid when aria-invalid is passed directly', () => {
+    render(
+      <Otp
+        aria-invalid
+        length={3}
+        aria-label='Code'
+      />,
+    );
+
+    expect(screen.getByRole('group', { name: 'Code' })).toHaveAttribute('data-status', 'error');
+    for (const slot of slots()) {
+      expect(slot).toHaveAttribute('aria-invalid', 'true');
+    }
+  });
+
   it('defaults to six slots', () => {
     render(<Otp aria-label='Verification code' />);
 

packages/ui/src/mosaic/components/otp/otp.tsx

@@ -55,17 +55,20 @@ export function Otp({
   size = 'md',
   status: statusProp,
   disabled: disabledProp,
+  'aria-invalid': ariaInvalidProp,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
   ...rest
 }: OtpProps): React.ReactElement {
   const fieldProps = useOptionalFieldControlProps({
     disabled: disabledProp,
+    ariaInvalid: ariaInvalidProp,
     ariaLabelledBy,
     ariaDescribedBy,
   });
   const disabled = fieldProps?.disabled ?? disabledProp ?? false;
-  const status = statusProp ?? (fieldProps?.['aria-invalid'] === true ? 'error' : 'neutral');
+  const ariaInvalid = fieldProps?.['aria-invalid'] ?? ariaInvalidProp;
+  const status = statusProp ?? (ariaInvalid === true || ariaInvalid === 'true' ? 'error' : 'neutral');
 
   return (
     <Primitive.Root