refactor: translations

packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -2,7 +2,6 @@ import React, { useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { FixedSizeList as List } from 'react-window';
-import { useIntl } from 'react-intl';
 
 import { ReactSelect } from '@strapi/helper-plugin';
 import { Status } from '@strapi/design-system/Status';
@@ -24,7 +23,6 @@ import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
 import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
 
-import { getTrad } from '../../utils';
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
@@ -58,6 +56,7 @@ const RelationInput = ({
   description,
   disabled,
   error,
+  iconButtonAriaLabel,
   id,
   name,
   numberOfRelationsToDisplay,
@@ -65,7 +64,12 @@ const RelationInput = ({
   labelAction,
   labelLoadMore,
   labelDisconnectRelation,
+  listAriaDescription,
+  liveText,
   loadingMessage,
+  onCancel,
+  onDropItem,
+  onGrabItem,
   noRelationsMessage,
   onRelationConnect,
   onRelationLoadMore,
@@ -82,13 +86,10 @@ const RelationInput = ({
 }) => {
   const [value, setValue] = useState(null);
   const [overflow, setOverflow] = useState('');
-  const [liveText, setLiveText] = useState('');
 
   const listRef = useRef();
   const outerListRef = useRef();
 
-  const { formatMessage } = useIntl();
-
   const { data } = searchResults;
 
   const relations = paginatedRelations.data;
@@ -232,58 +233,9 @@ const RelationInput = ({
   const handleUpdatePositionOfRelation = (newIndex, currentIndex) => {
     if (onRelationReorder && newIndex >= 0 && newIndex < relations.length) {
       onRelationReorder(currentIndex, newIndex);
-
-      const item = relations[currentIndex];
-      setLiveText(`${item.mainField ?? item.id}. New position in list: ${getItemPos(newIndex)}`);
     }
   };
 
-  /**
-   *
-   * @param {number} index
-   * @returns {string}
-   */
-  const getItemPos = (index) => `${index + 1} of ${relations.length}`;
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleGrabItem = (index) => {
-    const item = relations[index];
-
-    setLiveText(
-      `${item.mainField ?? item.id}, grabbed. Current position in list: ${getItemPos(
-        index
-      )}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-    );
-  };
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleDropItem = (index) => {
-    const item = relations[index];
-
-    setLiveText(
-      `${item.mainField ?? item.id}, dropped. Final position in list: ${getItemPos(index)}`
-    );
-  };
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleCancel = (index) => {
-    const item = relations[index];
-
-    setLiveText(`${item.mainField ?? item.id}, dropped. Re-order cancelled.`);
-  };
-
   const previewRelationsLength = usePrev(relations.length);
   /**
    * @type {React.MutableRefObject<'onChange' | 'loadMore'>}
@@ -371,12 +323,7 @@ const RelationInput = ({
         }
       >
         <RelationList overflow={overflow}>
-          <VisuallyHidden id={`${name}-item-instructions`}>
+          <VisuallyHidden id={`${name}-item-instructions`}>{listAriaDescription}</VisuallyHidden>
-            {formatMessage({
-              id: getTrad('components.RelationInput.instructions'),
-              defaultMessage: `Press spacebar to grab and re-order`,
-            })}
-          </VisuallyHidden>
           <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
           <List
             height={dynamicListHeight}
@@ -387,13 +334,10 @@ const RelationInput = ({
             itemData={{
               ariaDescribedBy: `${name}-item-instructions`,
               disabled,
-              handleCancel,
+              handleCancel: onCancel,
-              handleDropItem,
+              handleDropItem: onDropItem,
-              handleGrabItem,
+              handleGrabItem: onGrabItem,
-              iconButtonAriaLabel: formatMessage({
+              iconButtonAriaLabel,
-                id: getTrad('components.RelationInput.icon-button-aria-label'),
-                defaultMessage: 'Drag',
-              }),
               labelDisconnectRelation,
               onRelationDisconnect,
               publicationStateTranslations,
@@ -451,8 +395,14 @@ RelationInput.defaultProps = {
   description: undefined,
   disabled: false,
   error: undefined,
+  iconButtonAriaLabel: 'Drag',
   labelAction: null,
   labelLoadMore: null,
+  listAriaDescription: 'Press spacebar to grab and re-order',
+  liveText: undefined,
+  onCancel: undefined,
+  onDropItem: undefined,
+  onGrabItem: undefined,
   required: false,
   relations: { data: [] },
   searchResults: { data: [] },
@@ -462,15 +412,21 @@ RelationInput.propTypes = {
   error: PropTypes.string,
   description: PropTypes.string,
   disabled: PropTypes.bool,
+  iconButtonAriaLabel: PropTypes.string,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   labelAction: PropTypes.element,
   labelLoadMore: PropTypes.string,
   labelDisconnectRelation: PropTypes.string.isRequired,
+  listAriaDescription: PropTypes.string,
+  liveText: PropTypes.string,
   loadingMessage: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   noRelationsMessage: PropTypes.string.isRequired,
   numberOfRelationsToDisplay: PropTypes.number.isRequired,
+  onCancel: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onGrabItem: PropTypes.func,
   onRelationConnect: PropTypes.func.isRequired,
   onRelationDisconnect: PropTypes.func.isRequired,
   onRelationLoadMore: PropTypes.func.isRequired,

packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import pick from 'lodash/pick';
@@ -36,6 +36,8 @@ export const RelationInputDataManager = ({
   size,
   targetModel,
 }) => {
+  const [liveText, setLiveText] = useState('');
+
   const { formatMessage } = useIntl();
   const {
     slug,
@@ -137,6 +139,12 @@ export const RelationInputDataManager = ({
   const handleSearchMore = () => {
     search.fetchNextPage();
   };
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${relationsFromModifiedData.length}`;
 
   /**
    *
@@ -144,6 +152,20 @@ export const RelationInputDataManager = ({
    * @param {number} oldIndex
    */
   const handleRelationReorder = (oldIndex, newIndex) => {
+    const item = relations[oldIndex];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
     relationReorder({
       name,
       newIndex,
@@ -151,6 +173,71 @@ export const RelationInputDataManager = ({
     });
   };
 
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleGrabItem = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleDropItem = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleCancel = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: item.mainField ?? item.id,
+        }
+      )
+    );
+  };
+
   if (
     (!isFieldAllowed && isCreatingEntry) ||
     (!isCreatingEntry && !isFieldAllowed && !isFieldReadable)
@@ -185,25 +272,30 @@ export const RelationInputDataManager = ({
       error={error}
       description={description}
       disabled={isDisabled}
+      iconButtonAriaLabel={formatMessage({
+        id: getTrad('components.RelationInput.icon-button-aria-label'),
+        defaultMessage: 'Drag',
+      })}
       id={name}
       label={`${formatMessage({
         id: intlLabel.id,
         defaultMessage: intlLabel.defaultMessage,
       })} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
       labelAction={labelAction}
-      labelLoadMore={
+      labelLoadMore={formatMessage({
-        !isCreatingEntry
+        id: getTrad('relation.loadMore'),
-          ? formatMessage({
+        defaultMessage: 'Load More',
-              id: getTrad('relation.loadMore'),
+      })}
-              defaultMessage: 'Load More',
-            })
-          : null
-      }
       labelDisconnectRelation={formatMessage({
         id: getTrad('relation.disconnect'),
         defaultMessage: 'Remove',
       })}
+      listAriaDescription={formatMessage({
+        id: getTrad('components.RelationInput.instructions'),
+        defaultMessage: `Press spacebar to grab and re-order`,
+      })}
       listHeight={320}
+      liveText={liveText}
       loadingMessage={formatMessage({
         id: getTrad('relation.isLoading'),
         defaultMessage: 'Relations are loading',
@@ -214,6 +306,9 @@ export const RelationInputDataManager = ({
         defaultMessage: 'No relations available',
       })}
       numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
+      onDropItem={handleDropItem}
+      onGrabItem={handleGrabItem}
+      onCancel={handleCancel}
       onRelationConnect={handleRelationConnect}
       onRelationDisconnect={handleRelationDisconnect}
       onRelationLoadMore={handleRelationLoadMore}

packages/core/admin/admin/src/translations/en.json

@@ -568,6 +568,10 @@
   "content-manager.components.NotAllowedInput.text": "No permissions to see this field",
   "content-manager.components.RelationInput.instructions": "Press spacebar to grab and re-order",
   "content-manager.components.RelationInput.icon-button-aria-label": "Drag",
+  "content-manager.components.RelationInputDataManager.reorder": "{item}, moved. New position in list: {position}.",
+  "content-manager.components.RelationInputDataManager.grab-item": "{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.",
+  "content-manager.components.RelationInputDataManager.drop-item": "{item}, dropped. Final position in list: {position}.",
+  "content-manager.components.RelationInputDataManager.cancel-item": "{item}, dropped. Re-order cancelled.",
   "content-manager.components.RepeatableComponent.error-message": "The component(s) contain error(s)",
   "content-manager.components.Search.placeholder": "Search for an entry...",
   "content-manager.components.Select.draft-info-title": "State: Draft",