fix: Google Authenticator setup UI improvements

[Luxu2-Okta]

Resolves: OKTA-1185578

Description:

Fixes an accessibility issue in the Google Authenticator enrollment flow (OKTA-1185578), figma: https://www.figma.com/design/G2kZ9WtlYLLd9q6ZfGJeXT/1--improvements?node-id=11249-257&t=7TU0T04YXbGal2RG-0

Problem: The shared secret was rendered inside a readonly , which:

• Visually appeared disabled/greyed out
• A double-click selection would spill into the "Next" button instead of selecting just the secret value

Solution: Replace the readonly input with a plain containing the unmodified secret string, with the following properties:

• tabindex="0" keeps it in the keyboard tab order
• aria-label spells out each character with spaces (e.g. "A B C 1 2 3") so screen readers announce the code one character at a time on focus
• CSS letter-spacing: 0.3em provides visual separation between characters without inserting literal spaces, so a double-click still selects the entire value cleanly
• text-indent: 0.3em compensates for the trailing letter-spacing to keep the text visually centered

Changes affect both the v2 (OIE Backbone) and v3 (Gen3 React) implementations. Tests and snapshots updated accordingly.

PR Checklist

• Have you verified the basic functionality for this change?
• Did you add tests, as appropriate, following our Automated Test guidelines?
• Did you follow our Security Best Practices?
• Did you verify the change by running downstream monolith artifact? (Provide link to build below)
• Does this PR include noticeable changes to the UI? (If yes, attach screenshots/video below)

Issue:

• OKTA-1185578

Reviewers:

Screenshot/Video:

Gen	Before fix	After fix
Gen2
Gen3

Downstream Monolith Build:

https://bacon-go.aue1e.saasure.net/commits?artifact=monolith&page=1&pageSize=6&sha=91e98dfcb583167e8c9510365732139f8ff4afc4&tab=main

IE11 verification