@openedx/paragon 22.0.0-alpha.23 → 22.0.0-alpha.25

package/src/DataTable/tablefilters.mdx

@@ -14,18 +14,18 @@ devStatus: 'In progress'
 ---
 
 
-The ``DataTable`` component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs">react-table</a> library to
+The ``DataTable`` component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 ## Filtering and sorting
 Paragon currently provides a variety of filter types, and you can also define your own filter types.
 
 In the example below, a default ``TextFilter`` component is used as the default filter for all columns. A default filter can be passed in,
-or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ## Available filter functions
-A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://react-table.tanstack.com/docs/api/useFilters#column-options">react-table filters documentation</a>
+A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#column-options" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 Filter functions are defined on the column as the ``filter`` attribute.
 <dl>

package/src/DataTable/tests/DataTable.test.jsx

@@ -6,6 +6,8 @@ import { IntlProvider } from 'react-intl';
 
 import DataTable from '..';
 import DataTableContext from '../DataTableContext';
+import { TextFilter } from '../..';
+import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
 
 const additionalColumns = [
   {
@@ -198,6 +200,35 @@ describe('<DataTable />', () => {
 
     expect(spinner).toBeTruthy();
   });
+  it('displays the total number of items when applying filter and selecting all items', async () => {
+    const propsWithSelection = {
+      ...props,
+      isSelectable: true,
+      isFilterable: true,
+      manualFilters: true,
+      defaultColumnValues: { Filter: TextFilter },
+      isPaginated: true,
+      initialState: { pageSize: 3, pageIndex: 0 },
+      pageCount: 3,
+      fetchData: jest.fn(),
+    };
+
+    render(<DataTableWrapper {...propsWithSelection} />);
+    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+
+    await userEvent.click(filtersButton);
+
+    const searchFormControl = screen.getByPlaceholderText('Search coat color');
+    await userEvent.type(searchFormControl, 'brown tabby');
+
+    const selectAllCheckBox = screen.getByTitle('Toggle All Current Page Rows Selected');
+    await userEvent.click(selectAllCheckBox);
+
+    const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+    // A filtered array is returned from the backend,
+    // and the element counter displays its length.
+    expect(selectAllButton).toHaveTextContent('Select all 7');
+  });
 
   describe('[legacy] controlled table selections', () => {
     it('passes initial controlledTableSelections to context', async () => {

package/src/Dropdown/index.jsx

@@ -68,6 +68,7 @@ const Dropdown = React.forwardRef(
     );
   },
 );
+
 Dropdown.propTypes = {
   autoClose: PropTypes.oneOfType([
     PropTypes.string,
@@ -78,6 +79,7 @@ Dropdown.propTypes = {
   show: PropTypes.bool,
   variant: PropTypes.oneOf(['light', 'dark']),
 };
+
 Dropdown.defaultProps = {
   autoClose: true,
   className: '',
@@ -126,9 +128,11 @@ Dropdown.Item = React.forwardRef(
     );
   },
 );
+
 Dropdown.Item.propTypes = {
   className: PropTypes.string,
 };
+
 Dropdown.Item.defaultProps = {
   className: undefined,
 };

package/src/Dropzone/index.jsx

@@ -178,8 +178,7 @@ function Dropzone({
     <div
       data-testid="dropzone-container"
       {...getRootProps({
-        className: classNames('pgn__dropzone', {
-          className,
+        className: classNames('pgn__dropzone', className, {
           'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,
           'pgn__dropzone-active': isDragActive && !isDragReject,
         }),
@@ -271,7 +270,7 @@ Dropzone.propTypes = {
    */
   validator: PropTypes.func,
   /** A component to display initial state of the `Dropzone`. */
-  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  inputComponent: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
 export default Dropzone;

package/src/Form/FormAutosuggest.jsx

@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useIntl } from 'react-intl';
 import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
 import Icon from '../Icon';
-import FormGroup from './FormGroup';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
 import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
@@ -239,12 +239,18 @@ function FormAutosuggest({
     setDisplayValue(e.target.value);
   };
 
+  const { getControlProps } = useFormGroupContext();
+  const controlProps = getControlProps(props);
+
   return (
     <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
       <div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
         {`${state.dropDownItems.length} options found`}
       </div>
-      <FormGroup isInvalid={!!state.errorMessage}>
+      <FormGroupContextProvider
+        controlId={controlProps.id}
+        isInvalid={!!state.errorMessage}
+      >
         <FormControl
           ref={formControlRef}
           aria-expanded={(state.dropDownItems.length > 0).toString()}
@@ -259,7 +265,7 @@ function FormAutosuggest({
           onClick={handleClick}
           trailingElement={iconToggle}
           data-testid="autosuggest-textbox-input"
-          {...props}
+          {...controlProps}
         />
 
         {helpMessage && !state.errorMessage && (
@@ -269,11 +275,11 @@ function FormAutosuggest({
         )}
 
         {state.errorMessage && (
-          <FormControlFeedback type="invalid" feedback-for={props.name}>
+          <FormControlFeedback type="invalid" feedback-for={controlProps.name}>
             {errorMessageText}
           </FormControlFeedback>
         )}
-      </FormGroup>
+      </FormGroupContextProvider>
 
       <ul
         id="pgn__form-autosuggest__dropdown-box"

package/src/Form/FormSwitch.jsx

@@ -79,8 +79,11 @@ FormSwitch.propTypes = {
   children: PropTypes.node.isRequired,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
+  /** Specifies class name to append to the label element. */
   labelClassName: PropTypes.string,
+  /** Specifies helper text to display below the switch. */
   helperText: PropTypes.node,
+  /** Determines whether the label should float to the left when the switch is active. */
   floatLabelLeft: PropTypes.bool,
 };
 

package/src/Form/form-autosuggest.mdx

@@ -19,93 +19,101 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            floatingLabel="Programming language"
-            aria-label="form autosuggest"
-            helpMessage="Select language"
-            errorMessageText="Error, no selected value"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Python</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
-                Option with custom onClick
-            </Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Programming language</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        aria-label="form autosuggest"
+        helpMessage="Select language"
+        errorMessageText="Error, no selected value"
+        value={selected}
+        onSelected={(value) => setSelected(value)}
+      >
+        <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Python</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
+        <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
+          Option with custom onClick
+        </Form.AutosuggestOption>
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```
 
 ## Search Usage
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            placeholder="Type 'T'"
-            aria-label="form autosuggest"
-            errorMessageText="Error, no selected value"
-            helpMessage="Select language"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Java</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Autosuggest
+      placeholder="Type 'T'"
+      aria-label="form autosuggest"
+      errorMessageText="Error, no selected value"
+      helpMessage="Select language"
+      value={selected}
+      onSelected={(value) => setSelected(value)}
+    >
+      <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Java</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
+    </Form.Autosuggest>
+  );
+};
 ```
 
 ## Loading state
 
 ```jsx live
 () => {
-    const [data, setData] = useState([]);
-    const [showLoading, setShowLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [showLoading, setShowLoading] = useState(false);
 
-    useEffect(() => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => {
-                setTimeout(() => {
-                  setData(items);
-                  setShowLoading(false);
-                }, 1500);
-            });
-    }, [])
+  useEffect(() => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => {
+        setTimeout(() => {
+          setData(items);
+          setShowLoading(false);
+        }, 1500);
+      });
+  }, []);
 
-    const searchCoffee = (title) => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => setTimeout(() => {
-                const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
-                setShowLoading(false);
-                if (filteredCoffee) { return filteredCoffee }
-                return { ...title, filteredCoffee }
-        }, 1500));
-    };
+  const searchCoffee = (title) => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => setTimeout(() => {
+        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
+        setShowLoading(false);
+        if (filteredCoffee) { return filteredCoffee; }
+        return { ...title, filteredCoffee };
+      }, 1500));
+  };
 
-    return (
-        <Form.Autosuggest
-            isLoading={showLoading}
-            placeholder="This is placeholder"
-            floatingLabel="This is floating label"
-            screenReaderText="Loading..."
-            onChange={searchCoffee}
-        >
-            {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Café API</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        isLoading={showLoading}
+        placeholder="This is placeholder"
+        screenReaderText="Loading..."
+        onChange={searchCoffee}
+      >
+        {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```

package/src/Form/tests/FormAutosuggest.test.jsx

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import FormAutosuggest from '../FormAutosuggest';
 import FormAutosuggestOption from '../FormAutosuggestOption';
+import FormGroup from '../FormGroup';
+import FormLabel from '../FormLabel';
 
 function FormAutosuggestWrapper(props) {
   return (
@@ -31,6 +33,19 @@ function FormAutosuggestTestComponent(props) {
   );
 }
 
+function FormAutosuggestLabelTestComponent() {
+  return (
+    <FormGroup>
+      <FormLabel data-testid="autosuggest-label">
+        <h3>Label</h3>
+      </FormLabel>
+      <FormAutosuggestWrapper>
+        <FormAutosuggestOption>Option</FormAutosuggestOption>
+      </FormAutosuggestWrapper>
+    </FormGroup>
+  );
+}
+
 FormAutosuggestTestComponent.defaultProps = {
   onSelected: jest.fn(),
   onClick: jest.fn(),
@@ -112,6 +127,12 @@ describe('render behavior', () => {
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
+
+  it('associates labels with the input textbox', () => {
+    const { getByTestId } = render(<FormAutosuggestLabelTestComponent />);
+
+    expect(getByTestId('autosuggest-label').getAttribute('for')).toEqual(getByTestId('autosuggest-textbox-input').getAttribute('id'));
+  });
 });
 
 describe('controlled behavior', () => {

package/src/Hyperlink/index.jsx

@@ -101,18 +101,19 @@ Hyperlink.propTypes = {
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,
-  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
-   */
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+  */
   target: PropTypes.string,
   /** specifies the callback function when the link is clicked */
   onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
   /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkAlternativeText: isRequiredIf(
     PropTypes.string,
     props => props.target === '_blank',
   ),
-  // eslint-disable-next-line max-len
   /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkTitle: isRequiredIf(
     PropTypes.string,
@@ -120,9 +121,9 @@ Hyperlink.propTypes = {
   ),
   /** type of hyperlink */
   variant: PropTypes.oneOf(['default', 'muted', 'brand']),
-  /** specify the link style. By default it will be underlined. */
+  /** specify the link style. By default, it will be underlined. */
   isInline: PropTypes.bool,
-  /** specify if we need to show launch Icon. By default it will be visible. */
+  /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool,
 };
 

package/src/Icon/index.jsx

@@ -70,28 +70,35 @@ function Icon({
 }
 
 Icon.propTypes = {
-  // eslint-disable-next-line max-len
-  /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * An icon component to render.
+   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   */
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */
   svgAttrs: PropTypes.shape({
     'aria-label': PropTypes.string,
     'aria-labelledby': PropTypes.string,
   }),
-  // eslint-disable-next-line max-len
-  /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
+  /**
+   * the `id` property of the Icon element, by default this value is generated
+   * with the `newId` function with the `prefix` of `Icon`.
+   */
   id: PropTypes.string,
-  // eslint-disable-next-line max-len
   /** The size of the icon. */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  // eslint-disable-next-line max-len
   /** A class name that will define what the Icon looks like. */
   className: PropTypes.string,
-  // eslint-disable-next-line max-len
-  /** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */
+  /**
+   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,
+   * this value is `true` by default.
+   */
   hidden: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
+  /**
+   * a string or an element that will be used on a secondary span leveraging the `sr-only` style
+   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless
+   * the Icon is being used in a way that is purely decorative or provides no additional context for screen
+   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
    */
   screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/IconButton/index.jsx

@@ -73,7 +73,7 @@ IconButton.propTypes = {
   /** An icon component to render. Example import of a Paragon icon component:
    * `import { Check } from '@edx/paragon/dist/icon';`
    * */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe
    * the image in the `IconButton`. Instead, we recommend describing the function
    * of the button. */

package/src/Layout/index.jsx

@@ -84,9 +84,6 @@ SIZES.forEach(size => {
   Layout.defaultProps[size] = sizeDefaultProps;
 });
 
-export {
-  Col,
-  Row,
-};
+export { Col, Row };
 Layout.Element = LayoutElement;
 export default Layout;

package/src/Menu/MenuItem.jsx

@@ -40,9 +40,9 @@ MenuItem.propTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
   /** Specifies the jsx before the content of the ``MenuItem`` */
-  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Specifies the jsx after the content of the ``MenuItem`` */
-  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
 };
 
 MenuItem.defaultProps = {

package/src/Modal/ModalDialog.jsx

@@ -116,6 +116,9 @@ ModalDialog.propTypes = {
    * Prevent clicking on the backdrop to close the modal
    */
   isBlocking: PropTypes.bool,
+  /**
+   * Specifies the z-index of the modal
+   */
   zIndex: PropTypes.number,
 };
 

package/src/Overlay/README.md

@@ -38,7 +38,7 @@ This component is used to power Tooltips and Popovers.
           Click me to see
         </Button>
       </div>
-      <Overlay target={target.current} show={open} placement="right">
+      <Overlay target={target.current} show={isOpen} placement="right">
         {({ placement, arrowProps, show: _show, popper, ...props }) => (
           <div
             {...props}

package/src/Popover/README.md

@@ -3,7 +3,6 @@ title: 'Popover'
 type: 'component'
 components:
 - Popover
-- WrapperPopover
 - PopoverTitle
 - PopoverContent
 categories:

package/src/Popover/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Popover from 'react-bootstrap/Popover';
+import BasePopover from 'react-bootstrap/Popover';
 import BasePopoverTitle from 'react-bootstrap/PopoverTitle';
 import BasePopoverContent from 'react-bootstrap/PopoverContent';
 
@@ -13,18 +13,18 @@ const PLACEMENT_VARIANTS = [
   'right',
 ];
 
-const WrapperPopover = React.forwardRef(({
+const Popover = React.forwardRef(({
   children,
   variant,
   ...props
 }, ref) => (
-  <Popover
+  <BasePopover
     {...props}
     className={classNames({ [`popover-${variant}`]: !!variant }, props.className)}
     ref={ref}
   >
     {children}
-  </Popover>
+  </BasePopover>
 ));
 
 function PopoverTitle(props) {
@@ -44,8 +44,8 @@ const commonPropTypes = {
 PopoverTitle.propTypes = commonPropTypes;
 PopoverContent.propTypes = commonPropTypes;
 
-WrapperPopover.propTypes = {
-  ...Popover.propTypes,
+Popover.propTypes = {
+  ...BasePopover.propTypes,
   /** An html id attribute, necessary for accessibility. */
   id: PropTypes.string.isRequired,
   /**
@@ -88,8 +88,8 @@ WrapperPopover.propTypes = {
   variant: PropTypes.string,
 };
 
-WrapperPopover.defaultProps = {
-  ...Popover.defaultProps,
+Popover.defaultProps = {
+  ...BasePopover.defaultProps,
   placement: 'right',
   title: undefined,
   arrowProps: undefined,
@@ -111,8 +111,8 @@ PopoverContent.defaultProps = {
   bsPrefix: 'popover-body',
 };
 
-WrapperPopover.Title = PopoverTitle;
-WrapperPopover.Content = PopoverContent;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
 
 export { PopoverTitle, PopoverContent };
-export default WrapperPopover;
+export default Popover;

package/src/ProductTour/Checkpoint.jsx

@@ -10,6 +10,7 @@ import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
 import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
 import CheckpointTitle from './CheckpointTitle';
+import messages from './messages';
 
 const Checkpoint = React.forwardRef(({
   body,
@@ -99,10 +100,8 @@ const Checkpoint = React.forwardRef(({
     >
       <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."
+          {...messages.topPositionText}
+          values={{ step: index + 1 }}
         />
       </span>
       {(title || !isOnlyCheckpoint) && (
@@ -118,8 +117,12 @@ const Checkpoint = React.forwardRef(({
         {...props}
       />
       <div id="pgn__checkpoint-arrow" data-popper-arrow />
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Bottom of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          {...messages.bottomPositionText}
+          values={{ step: index + 1 }}
+        />
+      </span>
     </div>
   );
 });