LG-13363: Fix Screenreader Focus Jumping During Selfie Capture #10668
Conversation
| @@ -21,6 +21,12 @@ function AcuantSelfieCaptureCanvas({ imageCaptureText, onSelfieCaptureClosed }) | |||
| // 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'; | |||
|
|
|||
| const elementInShadow = document | |||
There was a problem hiding this comment.
Look for the camera container to see if Acuant has actually loaded their stuff onto the screen. Obviously inelegant, but does the job.
There was a problem hiding this comment.
How does this update if Acuant becomes loaded? Are we expecting it to?
There was a problem hiding this comment.
Here's what I think is happening:
<AcuantSelfieCamera>is created, and Acuant is "started", but crucially the capture window doesn't appear anywhere yet.<FullScreen>activates a focus trap around<AcuantSelfieCaptureCanvas>.- At this moment there's nothing inside that focus trap except a button and a div because Acuant hasn't actually attached to the div with
acuantCaptureContainerId. - Then, Acuant attaches to the div with
acuantCaptureContainerIdand hydrates in their Shadow DOM.
The problem that this PR solves is that it lets me show the button on Step 3, and hide it on Step 4. Practically, what happens if you try to fully remove the button is you get an error about the FocusTrap always needing a tabbable element (which makes sense).
- So that close button needs to be present until the moment that Acuant's Shadow DOM gets attached.
- Having that button seems to be the cause of some odd behavior when using a screenreader so it's worthwhile to remove it.
There was a problem hiding this comment.
The primary concern I have here is that I don't see where we predictably expect React to re-render this component after the changes you describe.
There was a problem hiding this comment.
A good point, the re-render isn't necessarily tied to this code in the way I want. We do re-render the AcuantSelfieCaptureCanvas every time the help text changes (frequently) so this value does get updated.
…enreader while capturing selfie
charleyf
changed the title
There was a problem hiding this comment.
RE: Test coverage @aduth. Unfortunately, we still do not have a way to actually get the Acuant SDK to start under any sort of testing conditions. It's a hole we've been aware of for a while, but it's pretty difficult to address.
There was a problem hiding this comment.
I only see code which expects a DOM element with a particular ID, and a state updater. I don't know that we need a full Acuant installation loaded to be able to test against that.
There was a problem hiding this comment.
Added a test, which I think does a fairly good job showing how this functionality works.
charleyf
deleted the
charley/fix-focus-issue-with-selfie-capture-red-green-button
branch
🎫 Ticket
Link to the relevant ticket:
https://cm-jira.usa.gov/browse/LG-13363
🛠 Summary of changes
Fix a problem where when using a screenreader focus would jump away from the capture button in selfie capture. Slack thread here.
📜 Testing Plan
Make sure you can reproduce the problem
mainCheck that the problem is fixed by this PR