added aria attr and related translation

packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 import { Icon } from '@strapi/design-system/Icon';
 import { Divider } from '@strapi/design-system/Divider';
@@ -8,20 +9,34 @@ import { Stack } from '@strapi/design-system/Stack';
 import Github from '@strapi/icons/Github';
 import Download from '@strapi/icons/Download';
 import Star from '@strapi/icons/Star';
+import { pxToRem } from '@strapi/helper-plugin';
 
 const VerticalDivider = styled(Divider)`
-  width: 0.75rem;
+  width: ${pxToRem(12)};
   transform: rotate(90deg);
 `;
 
-const PackageStats = ({ githubStars, weeklyDownloads }) => {
+const PackageStats = ({ githubStars, weeklyDownloads, npmPackageType }) => {
+  const { formatMessage } = useIntl();
+
   return (
     <Stack horizontal spacing={1}>
       {!!githubStars && (
         <>
-          <Icon as={Github} height="0.75rem" width="0.75rem" />
-          <Icon as={Star} height="0.75rem" width="0.75rem" color="warning500" />
-          <p aria-label={`This package was starred ${githubStars} on GitHub`}>
+          <Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
+          <Icon as={Star} height={pxToRem(12)} width={pxToRem(12)} color="warning500" aria-hidden />
+          <p
+            aria-label={formatMessage(
+              {
+                id: 'admin.pages.MarketPlacePage[{package}].githubStars',
+                defaultMessage: `This {package} was starred {starsCount} on GitHub`,
+              },
+              {
+                starsCount: githubStars,
+                package: npmPackageType,
+              }
+            )}
+          >
             <Typography variant="pi" textColor="neutral800" lineHeight={16}>
               {githubStars}
             </Typography>
@@ -29,8 +44,19 @@ const PackageStats = ({ githubStars, weeklyDownloads }) => {
           <VerticalDivider unsetMargin={false} background="neutral200" />
         </>
       )}
-      <Icon as={Download} height="0.75rem" width="0.75rem" />
-      <p aria-label={`This package was downloaded ${weeklyDownloads} times in last 7 days`}>
+      <Icon as={Download} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
+      <p
+        aria-label={formatMessage(
+          {
+            id: `admin.pages.MarketPlacePage[{package}].downloads`,
+            defaultMessage: `This {package} has {downloadsCount} weekly downloads`,
+          },
+          {
+            downloadsCount: weeklyDownloads,
+            package: npmPackageType,
+          }
+        )}
+      >
         <Typography variant="pi" textColor="neutral800" lineHeight={16}>
           {weeklyDownloads}
         </Typography>
@@ -47,6 +73,7 @@ PackageStats.defaultProps = {
 PackageStats.propTypes = {
   githubStars: PropTypes.number,
   weeklyDownloads: PropTypes.number,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
 export default PackageStats;

packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -77,7 +77,7 @@ const NpmPackageCard = ({
             width={11}
             height={11}
           />
-          <PackageStats githubStars={12} weeklyDownloads={135} />
+          <PackageStats githubStars={12} weeklyDownloads={135} npmPackageType={npmPackageType} />
         </Flex>
         <Box paddingTop={4}>
           <Typography as="h3" variant="delta">

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

@@ -272,7 +272,11 @@
   "admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi",
   "admin.pages.MarketPlacePage.plugin.version": "Update your Strapi version: \"{strapiAppVersion}\" to: \"{versionRange}\"",
   "admin.pages.MarketPlacePage.plugin.version.null": "Unable to verify compatibility with your Strapi version: \"{strapiAppVersion}\"",
+  "admin.pages.MarketPlacePage.plugin.githubStars": "This plugin was starred {starsCount} on GitHub",
+  "admin.pages.MarketPlacePage.plugin.downloads": "This plugin has {downloadsCount} weekly downloads",
   "admin.pages.MarketPlacePage.providers": "Providers",
+  "admin.pages.MarketPlacePage.provider.githubStars": "This provider was starred {starsCount} on GitHub",
+  "admin.pages.MarketPlacePage.provider.downloads": "This provider has {downloadsCount} weekly downloads",
   "admin.pages.MarketPlacePage.search.clear": "Clear the search",
   "admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"",
   "admin.pages.MarketPlacePage.search.placeholder": "Search",