LG-5911: Fix detailed camera access error alert display

app/javascript/packages/document-capture/components/form-steps.jsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState, createContext, useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
+import { Alert } from '@18f/identity-components';
 import Button from './button';
-import { RequiredValueMissingError } from './form-error-message';
+import FormErrorMessage, { RequiredValueMissingError } from './form-error-message';
 import PromptOnNavigate from './prompt-on-navigate';
 import useHistoryParam from '../hooks/use-history-param';
 import useForceRender from '../hooks/use-force-render';
@@ -251,6 +252,11 @@ function FormSteps({
   return (
     <form ref={formRef} className="read-after-submit" onSubmit={toNextStep}>
       {Object.keys(values).length > 0 && <PromptOnNavigate />}
+      {stepErrors.map((error) => (
+        <Alert key={error.message} type="error" className="margin-bottom-4">
+          <FormErrorMessage error={error} isDetail />
+        </Alert>
+      ))}
       <FormStepsContext.Provider value={{ isLastStep, canContinueToNextStep, onPageTransition }}>
         <Form
           key={name}

spec/javascripts/packages/document-capture/components/document-capture-spec.jsx

@@ -64,6 +64,26 @@ describe('document-capture/components/document-capture', () => {
     expect(step).to.be.ok();
   });
 
+  it('shows top-level step errors', async () => {
+    const { getByLabelText, findByText } = render(
+      <DeviceContext.Provider value={{ isMobile: true }}>
+        <AcuantContextProvider sdkSrc="about:blank" cameraSrc="about:blank">
+          <DocumentCapture />
+        </AcuantContextProvider>
+      </DeviceContext.Provider>,
+    );
+
+    initialize();
+    // `onError` called with an Error instance is indication of camera access declined, which is
+    // expected to show both field-level and step error.
+    // See: https://github.com/18F/identity-idp/blob/164231d/app/javascript/packages/document-capture/components/acuant-capture.jsx#L114
+    window.AcuantCameraUI.start.callsFake((_callbacks, onError) => onError(new Error()));
+
+    userEvent.click(getByLabelText('doc_auth.headings.document_capture_front'));
+
+    await findByText('doc_auth.errors.camera.blocked_detail');
+  });
+
   it('progresses through steps to completion', async () => {
     const { getByLabelText, getByText, getAllByText, findAllByText } = render(
       <DeviceContext.Provider value={{ isMobile: true }}>

spec/javascripts/packages/document-capture/components/form-steps-spec.jsx

@@ -56,6 +56,9 @@ describe('document-capture/components/form-steps', () => {
               onChange({ secondInputTwo: event.target.value });
             }}
           />
+          <button type="button" onClick={() => onError(new Error())}>
+            Create Step Error
+          </button>
           <FormStepsContinueButton />
           <span data-testid="context-value">{JSON.stringify(useContext(FormStepsContext))}</span>
         </>
@@ -388,6 +391,16 @@ describe('document-capture/components/form-steps', () => {
     expect(inputOne.hasAttribute('data-is-error')).to.be.true();
   });
 
+  it('renders and moves focus to step errors', () => {
+    const steps = [STEPS[1]];
+
+    const { getByRole } = render(<FormSteps steps={steps} />);
+    const button = getByRole('button', { name: 'Create Step Error' });
+    userEvent.click(button);
+
+    expect(getByRole('alert')).to.equal(document.activeElement);
+  });
+
   it('provides context', () => {
     const { getByTestId, getByRole, getByLabelText } = render(<FormSteps steps={STEPS} />);