use i18n key and CCS

Author: Luxu2-Okta

src/v2/view-builder/views/google-authenticator/EnrollAuthenticatorGoogleAuthenticatorView.js

@@ -90,15 +90,19 @@ const Body = BaseForm.extend({
               <span
                 class="shared-secret no-translate"
                 tabindex="0"
-                aria-label="{{sharedSecretSpaced}}"
+                aria-label="{{sharedSecretAriaLabel}}"
               >{{sharedSecret}}</span>
             </div>
           `,
           getTemplateData() {
             const sharedSecret = this.options.appState.get('currentAuthenticator').contextualData.sharedSecret || '';
             return {
               sharedSecret,
-              sharedSecretSpaced: sharedSecret.split('').join(' '),
+              sharedSecretAriaLabel: loc(
+                'oie.enroll.google_authenticator.sharedSecret.ariaLabel',
+                'login',
+                [sharedSecret.split('').join(' ')]
+              ),
             };
           },
         }),

src/v3/src/components/Widget/style.scss

@@ -332,3 +332,9 @@ span.strong {
 span.no-translate {
   white-space: nowrap;
 }
+/* Google Authenticator manual-entry secret key (OKTA-1185578).
+ * Visual spacing only — the secret stays a single string (no literal spaces)
+ * so it copies cleanly and a double-click selects the whole value. */
+span.shared-secret {
+  letter-spacing: 0.3em;
+}

src/v3/src/transformer/layout/googleAuthenticator/__snapshots__/transformGoogleAuthenticatorEnroll.test.ts.snap

@@ -102,7 +102,7 @@ Object {
                 "contentType": "subtitle",
                 "noTranslate": true,
                 "options": Object {
-                  "content": "<span tabindex=\\"0\\" aria-label=\\"A B C 1 2 3 D E F 4 5 6\\" style=\\"letter-spacing: 0.3em;\\">ABC123DEF456</span>",
+                  "content": "<span class=\\"shared-secret\\" tabindex=\\"0\\" aria-label=\\"oie.enroll.google_authenticator.sharedSecret.ariaLabel\\">ABC123DEF456</span>",
                 },
                 "type": "Description",
                 "viewIndex": 1,
@@ -263,7 +263,7 @@ Object {
                 "contentType": "subtitle",
                 "noTranslate": true,
                 "options": Object {
-                  "content": "<span tabindex=\\"0\\" aria-label=\\"A B C 1 2 3 D E F 4 5 6\\" style=\\"letter-spacing: 0.3em;\\">ABC123DEF456</span>",
+                  "content": "<span class=\\"shared-secret\\" tabindex=\\"0\\" aria-label=\\"oie.enroll.google_authenticator.sharedSecret.ariaLabel\\">ABC123DEF456</span>",
                 },
                 "type": "Description",
                 "viewIndex": 1,

src/v3/src/transformer/layout/googleAuthenticator/transformGoogleAuthenticatorEnroll.test.ts

@@ -69,7 +69,7 @@ describe('Google Authenticator Enroll Transformer Tests', () => {
     expect((layoutTwo.elements[1] as DescriptionElement).options.content)
       .toBe('oie.enroll.google_authenticator.manualSetupInstructions');
     expect((layoutTwo.elements[2] as DescriptionElement).options.content)
-      .toBe('<span tabindex="0" aria-label="A B C 1 2 3 D E F 4 5 6" style="letter-spacing: 0.3em;">ABC123DEF456</span>');
+      .toBe('<span class="shared-secret" tabindex="0" aria-label="oie.enroll.google_authenticator.sharedSecret.ariaLabel">ABC123DEF456</span>');
     expect((layoutTwo.elements[3] as StepperButtonElement).label)
       .toBe('oform.next');
     expect((layoutTwo.elements[3] as StepperButtonElement).options.nextStepIndex)

src/v3/src/transformer/layout/googleAuthenticator/transformGoogleAuthenticatorEnroll.ts

@@ -60,11 +60,12 @@ export const transformGoogleAuthenticatorEnroll: IdxStepTransformer = ({
     noTranslate: true,
     options: {
       // Render the secret as a single contiguous string so that double-clicking
-      // selects the entire value (OKTA-1185578). letter-spacing keeps it legible,
-      // tabindex="0" puts it in the tab order, and the aria-label spells out each
-      // character so screen readers can speak the code one letter at a time on focus.
+      // selects the entire value (OKTA-1185578). The .shared-secret class adds the
+      // letter-spacing that keeps it legible, tabindex="0" puts it in the tab order,
+      // and the aria-label spells out each character so screen readers can speak the
+      // code one letter at a time on focus.
       content: sharedSecret
-        ? `<span tabindex="0" aria-label="${sharedSecret.split('').join(' ')}" style="letter-spacing: 0.3em;">${sharedSecret}</span>`
+        ? `<span class="shared-secret" tabindex="0" aria-label="${loc('oie.enroll.google_authenticator.sharedSecret.ariaLabel', 'login', [sharedSecret.split('').join(' ')])}">${sharedSecret}</span>`
         : '',
     },
   };

src/v3/test/integration/__snapshots__/authenticator-enroll-google-authenticator.test.tsx.snap

@@ -733,8 +733,8 @@ exports[`authenticator-enroll-google-authenticator renders form renders secret k
                             translate="no"
                           >
                             <span
-                              aria-label="K A G W B I X A K O L P E F M Y"
-                              style="letter-spacing: 0.3em;"
+                              aria-label="Secret key: K A G W B I X A K O L P E F M Y"
+                              class="shared-secret"
                               tabindex="0"
                             >
                               KAGWBIXAKOLPEFMY