LG-12595 Fix Selfie Screenreader Behavior by adding <FullScreen />

app/javascript/packages/document-capture/components/acuant-capture.scss

@@ -37,12 +37,13 @@
   .document-capture-file-image--loading {
     @extend %pad-common-id-card;
   }
-  // Styles for the text that appears over the selfie capture screen to help users position their face for a good photo
-  .document-capture-selfie-feedback {
-    left: 50%;
-    top: 10%;
-    position: fixed;
-    transform: translateX(-50%);
-    z-index: 11;
-  }
+}
+
+// Styles for the text that appears over the selfie capture screen to help users position their face for a good photo
+.document-capture-selfie-feedback {
+  left: 50%;
+  top: 10%;
+  position: fixed;
+  transform: translateX(-50%);
+  z-index: 11;
 }

app/javascript/packages/document-capture/components/acuant-capture.tsx

@@ -698,12 +698,16 @@ function AcuantCapture(
           onImageCaptureClose={onSelfieCaptureClosed}
           onImageCaptureFeedback={onImageCaptureFeedback}
         >
-          <AcuantSelfieCaptureCanvas
-            fullScreenRef={fullScreenRef}
-            fullScreenLabel={t('doc_auth.accessible_labels.document_capture_dialog')}
-            onRequestClose={() => setIsCapturingEnvironment(false)}
-            imageCaptureText={imageCaptureText}
-          />
+          <FullScreen
+            ref={fullScreenRef}
+            label={t('doc_auth.accessible_labels.document_capture_dialog')}
+            hideCloseButton
+          >
+            <AcuantSelfieCaptureCanvas
+              imageCaptureText={imageCaptureText}
+              onSelfieCaptureClosed={onSelfieCaptureClosed}
+            />
+          </FullScreen>
         </AcuantSelfieCamera>
       )}
       <FileInput

app/javascript/packages/document-capture/components/acuant-selfie-capture-canvas.jsx

@@ -1,44 +1,37 @@
 import { useContext } from 'react';
 import { getAssetPath } from '@18f/identity-assets';
-import { FullScreen } from '@18f/identity-components';
+import { useI18n } from '@18f/identity-react-i18n';
 import AcuantContext from '../context/acuant';
 
-function FullScreenLoadingSpinner({ fullScreenRef, onRequestClose, fullScreenLabel }) {
+function LoadingSpinner() {
   return (
-    <FullScreen ref={fullScreenRef} label={fullScreenLabel} onRequestClose={onRequestClose}>
-      <img
-        src={getAssetPath('loading-badge.gif')}
-        alt=""
-        width="144"
-        height="144"
-        className="acuant-capture-canvas__spinner"
-      />
-    </FullScreen>
+    <img
+      src={getAssetPath('loading-badge.gif')}
+      alt=""
+      width="144"
+      height="144"
+      className="acuant-capture-canvas__spinner"
+    />
   );
 }
 
-function AcuantSelfieCaptureCanvas({
-  fullScreenRef,
-  onRequestClose,
-  fullScreenLabel,
-  imageCaptureText,
-}) {
+function AcuantSelfieCaptureCanvas({ imageCaptureText, onSelfieCaptureClosed }) {
   const { isReady } = useContext(AcuantContext);
+  const { t } = useI18n();
   // The Acuant SDK script AcuantPassiveLiveness attaches to whatever element has
   // this id. It then uses that element as the root for the full screen selfie capture
   const acuantCaptureContainerId = 'acuant-face-capture-container';
-  return isReady ? (
-    <div id={acuantCaptureContainerId}>
+  return (
+    <>
+      {!isReady && <LoadingSpinner />}
+      <div id={acuantCaptureContainerId} />
       <p aria-live="assertive" className="document-capture-selfie-feedback">
         {imageCaptureText}
       </p>
-    </div>
-  ) : (
-    <FullScreenLoadingSpinner
-      fullScreenRef={fullScreenRef}
-      onRequestClose={onRequestClose}
-      fullScreenLabel={fullScreenLabel}
-    />
+      <button type="button" onClick={onSelfieCaptureClosed} className="usa-sr-only">
+        {t('doc_auth.buttons.close')}
+      </button>
+    </>
   );
 }
 

config/locales/doc_auth/en.yml

@@ -7,6 +7,7 @@ en:
       document_capture_dialog: Document capture
     buttons:
       add_new_photos: Add new photos
+      close: Close
       continue: Continue
       take_or_upload_picture_html: '<lg-take-photo>Take photo</lg-take-photo><lg-or>
         or </lg-or> <lg-upload>Upload photo</lg-upload>'

config/locales/doc_auth/es.yml

@@ -7,6 +7,7 @@ es:
       document_capture_dialog: Captura del documento
     buttons:
       add_new_photos: Añadir nuevas fotos
+      close: Cerrar
       continue: Continuar
       take_or_upload_picture_html: '<lg-take-photo>Toma una
         foto</lg-take-photo><lg-or> o </lg-or> <lg-upload>Sube una

config/locales/doc_auth/fr.yml

@@ -7,6 +7,7 @@ fr:
       document_capture_dialog: Capture du document
     buttons:
       add_new_photos: Ajoutez de nouvelles photos
+      close: Fermer
       continue: Continuer
       take_or_upload_picture_html: '<lg-take-photo>Prendre une
         photo</lg-take-photo><lg-or> ou </lg-or><lg-upload>Télécharger une

spec/javascript/packages/document-capture/components/acuant-selfie-capture-canvas-spec.jsx

@@ -3,27 +3,27 @@ import { AcuantContext, DeviceContext } from '@18f/identity-document-capture';
 import { render } from '../../../support/document-capture';
 
 it('shows the loading spinner when the script hasnt loaded', () => {
-  const { getByRole, container } = render(
+  const { container } = render(
     <DeviceContext.Provider value={{ isMobile: true }}>
       <AcuantContext.Provider value={{ isReady: false }}>
         <AcuantSelfieCaptureCanvas />
       </AcuantContext.Provider>
     </DeviceContext.Provider>,
   );
 
-  expect(getByRole('dialog')).to.be.ok();
-  expect(container.querySelector('#acuant-face-capture-container')).to.not.exist();
+  expect(container.querySelector('#acuant-face-capture-container')).to.exist();
+  expect(container.querySelector('.acuant-capture-canvas__spinner')).to.exist();
 });
 
 it('shows the Acuant div when the script has loaded', () => {
-  const { queryByRole, container } = render(
+  const { container } = render(
     <DeviceContext.Provider value={{ isMobile: true }}>
       <AcuantContext.Provider value={{ isReady: true }}>
         <AcuantSelfieCaptureCanvas />
       </AcuantContext.Provider>
     </DeviceContext.Provider>,
   );
 
-  expect(queryByRole('dialog')).to.not.exist();
   expect(container.querySelector('#acuant-face-capture-container')).to.exist();
+  expect(container.querySelector('.acuant-capture-canvas__spinner')).not.to.exist();
 });