feat: add i18n support for ProductTour Checkpoint sr-only message (#2758)

* feat: add i18n support for sr-only message

* fix: add fixes after review

---------

Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>

Author: khudym

package.json

@@ -41,7 +41,7 @@
     "example:start:with-theme": "npm run start:with-theme --workspace=example",
     "generate-changelog": "node generate-changelog.js",
     "i18n_compile": "formatjs compile-folder --format transifex ./src/i18n/messages ./src/i18n/messages",
-    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex",
+    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --ignore='**/*.d.ts' --format transifex",
     "type-check": "tsc --noEmit && tsc --project www --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",

src/ProductTour/Checkpoint.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 import { createPopper } from '@popperjs/core';
+import { FormattedMessage } from 'react-intl';
 
 import breakpoints from '../utils/breakpoints';
 
@@ -95,8 +96,14 @@ const Checkpoint = React.forwardRef(({
       role="dialog"
       style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}
     >
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Top of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          id="pgn.ProductTour.Checkpoint.position-text"
+          defaultMessage="Top of step {step}"
+          value={{ step: index + 1 }}
+          description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
+        />
+      </span>
       {(title || !isOnlyCheckpoint) && (
         <div className="pgn__checkpoint-header">
           <CheckpointTitle>{title}</CheckpointTitle>

src/ProductTour/Checkpoint.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
 
@@ -24,7 +25,7 @@ describe('Checkpoint', () => {
   describe('second Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="target-element">...</div>
           <Checkpoint
             advanceButtonText="Next"
@@ -39,7 +40,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={5}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -75,7 +76,7 @@ describe('Checkpoint', () => {
   describe('last Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#last-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -90,7 +91,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={5}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -108,7 +109,7 @@ describe('Checkpoint', () => {
   describe('only one Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#target-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -123,7 +124,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={1}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -140,7 +141,7 @@ describe('Checkpoint', () => {
   describe('only one Checkpoint in Tour and showDismissButton set to true', () => {
     it('it renders dismiss button and end button', () => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#target-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -156,7 +157,7 @@ describe('Checkpoint', () => {
             totalCheckpoints={1}
             showDismissButton
           />
-        </>,
+        </IntlProvider>,
       );
       expect(screen.getByText('Dismiss', { selector: 'button' })).toBeInTheDocument();
       expect(screen.getByText('End', { selector: 'button' })).toBeInTheDocument();