Enhance internationalization by adding translatable strings for breadcrumbs and various UI components. Updated components to utilize new messages for improved accessibility and user experience.

Author: CollinBeczak

src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.jsx

@@ -90,7 +90,7 @@ export class ChallengeDashboard extends Component {
 
     const pageHeader = (
       <div className="admin__manage__header admin__manage__header--flush">
-        <nav className="breadcrumb" aria-label="breadcrumbs">
+        <nav className="breadcrumb" aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}>
           <ul>
             <li className="nav-title">
               <Link to="/admin/projects">

src/components/AdminPane/Manage/EditProject/EditProject.jsx

@@ -76,7 +76,7 @@ export class EditProject extends Component {
 
     return (
       <div className="admin__manage edit-project">
-        <nav className="breadcrumb" aria-label="breadcrumbs">
+        <nav className="breadcrumb" aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}>
           <ul>
             <li className="nav-title">
               <Link to="/admin/projects">

src/components/AdminPane/Manage/InspectTask/InspectTask.jsx

@@ -34,7 +34,7 @@ export class InspectTask extends Component {
       <div className="admin__manage inspect-task">
         {this.props.project && (
           <div className="admin__manage__header mr-mb-0">
-            <nav className="breadcrumb" aria-label="breadcrumbs">
+            <nav className="breadcrumb" aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}>
               <ul style={{ maxWidth: "100%" }}>
                 <li className="nav-title">
                   <Link to="/admin/projects">

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.jsx

@@ -1042,7 +1042,7 @@ const BreadcrumbWrapper = (props) => {
           <div className="admin__manage__header">
             <nav
               className="breadcrumb mr-w-full mr-flex mr-flex-wrap mr-justify-between"
-              aria-label="breadcrumbs"
+              aria-label={props.intl.formatMessage(manageMessages.breadcrumbsLabel)}
             >
               <ul>
                 <li className="nav-title">

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenges.jsx

@@ -420,7 +420,7 @@ const BreadcrumbWrapper = (props) => {
           <div className="admin__manage__header">
             <nav
               className="breadcrumb mr-w-full mr-flex mr-flex-wrap mr-justify-between"
-              aria-label="breadcrumbs"
+              aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}
             >
               <ul>
                 <li className="nav-title">

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Messages.js

@@ -203,6 +203,21 @@ export default defineMessages({
       "complete tasks in your Challenge.",
   },
 
+  difficultyEasy: {
+    id: "Admin.EditChallenge.form.difficulty.easy",
+    defaultMessage: "Easy: a novice can do them",
+  },
+
+  difficultyNormal: {
+    id: "Admin.EditChallenge.form.difficulty.normal",
+    defaultMessage: "Normal: a little experience helps",
+  },
+
+  difficultyExpert: {
+    id: "Admin.EditChallenge.form.difficulty.expert",
+    defaultMessage: "Expert: experienced mappers only",
+  },
+
   categoryLabel: {
     id: "Admin.EditChallenge.form.category.label",
     defaultMessage: "How should your Challenge be Categorized?",

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Schemas/InstructionsSchema.js

@@ -51,9 +51,9 @@ export const jsSchema = (intl) => {
         type: "number",
         enum: _values(ChallengeDifficulty),
         enumNames: [
-          "Easy: a novice can do them",
-          "Normal: a little experience helps",
-          "Expert: experienced mappers only",
+          intl.formatMessage(messages.difficultyEasy),
+          intl.formatMessage(messages.difficultyNormal),
+          intl.formatMessage(messages.difficultyExpert),
         ],
         default: ChallengeDifficulty.normal,
       },

src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.jsx

@@ -159,7 +159,7 @@ export class EditTask extends Component {
         <div className="admin__manage__pane-wrapper">
           <div className="admin__manage__primary-content">
             <div className="admin__manage__header">
-              <nav className="breadcrumb" aria-label="breadcrumbs">
+              <nav className="breadcrumb" aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}>
                 <ul>
                   <li className="nav-title">
                     <Link to="/admin/projects">

src/components/AdminPane/Manage/Messages.js

@@ -44,4 +44,9 @@ export default defineMessages({
     id: "Admin.manage.emailSettings",
     defaultMessage: "Go to Settings.",
   },
+
+  breadcrumbsLabel: {
+    id: "Admin.manage.breadcrumbs.label",
+    defaultMessage: "breadcrumbs",
+  },
 });

src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.jsx

@@ -99,7 +99,7 @@ export class ProjectDashboardInternal extends Component {
 
     const pageHeader = (
       <div className="admin__manage__header admin__manage__header--flush">
-        <nav className="breadcrumb" aria-label="breadcrumbs">
+        <nav className="breadcrumb" aria-label={this.props.intl.formatMessage(manageMessages.breadcrumbsLabel)}>
           <ul>
             <li className="nav-title">
               <Link to="/admin/projects">