diff --git a/src/container-comparison/CompareContainersWidget.test.tsx b/src/container-comparison/CompareContainersWidget.test.tsx index dcfe6cb8ed..e96f22186c 100644 --- a/src/container-comparison/CompareContainersWidget.test.tsx +++ b/src/container-comparison/CompareContainersWidget.test.tsx @@ -72,7 +72,7 @@ describe('CompareContainersWidget', () => { expect(await screen.findByRole('button', { name: 'subsection block 0' })).toBeInTheDocument(); // Back breadcrumb - const backbtns = await screen.findAllByRole('button', { name: 'Back' }); + const backbtns = await screen.findAllByRole('button', { name: '← Back' }); expect(backbtns.length).toEqual(2); // Go back diff --git a/src/container-comparison/CompareContainersWidget.tsx b/src/container-comparison/CompareContainersWidget.tsx index 06968a503c..9688783519 100644 --- a/src/container-comparison/CompareContainersWidget.tsx +++ b/src/container-comparison/CompareContainersWidget.tsx @@ -4,7 +4,7 @@ import { Alert, Breadcrumb, Button, Card, Icon, Stack, } from '@openedx/paragon'; -import { ArrowBack, Add, Delete } from '@openedx/paragon/icons'; +import { Add, Delete } from '@openedx/paragon/icons'; import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { ContainerType, getBlockType } from '@src/generic/key-utils'; @@ -152,8 +152,7 @@ const CompareContainersWidgetInner = ({ ariaLabel={intl.formatMessage(messages.breadcrumbAriaLabel)} links={[ { - // This raises failed prop-type error as label expects a string but it works without any issues - label: Back, + label: `← ${intl.formatMessage(messages.breadcrumbBackLabel)}`, onClick: onBackBtnClick, variant: 'link', className: 'px-0 text-gray-900', diff --git a/src/container-comparison/messages.ts b/src/container-comparison/messages.ts index 549824c90d..3e70bf902c 100644 --- a/src/container-comparison/messages.ts +++ b/src/container-comparison/messages.ts @@ -68,8 +68,13 @@ const messages = defineMessages({ }, breadcrumbAriaLabel: { id: 'course-authoring.container-comparison.diff.breadcrumb.ariaLabel', - defaultMessage: 'Title breadcrumb', - description: 'Aria label text for breadcrumb in diff preview', + defaultMessage: 'Location', + description: 'Accessible label for the breadcrumbs which display the location of the unit, e.g. Section 1 > Unit 4', + }, + breadcrumbBackLabel: { + id: 'course-authoring.container-comparison.diff.breadcrumb.backLabel', + defaultMessage: 'Back', + description: 'Link to go back to the parent section/subsection', }, diffBeforeTitle: { id: 'course-authoring.container-comparison.diff.before.title', diff --git a/src/course-unit/move-modal/index.tsx b/src/course-unit/move-modal/index.tsx index d687d94f11..1b1a5cdb79 100644 --- a/src/course-unit/move-modal/index.tsx +++ b/src/course-unit/move-modal/index.tsx @@ -50,7 +50,7 @@ const MoveModal: FC = ({ { label: breadcrumb, 'data-parent-index': index } ))} activeLabel={breadcrumbs[breadcrumbs.length - 1]} - clickHandler={({ target }) => handleBreadcrumbsClick(target.dataset.parentIndex)} + clickHandler={({ currentTarget }) => handleBreadcrumbsClick(currentTarget.dataset.parentIndex)} /> ), [isExtraSmall, breadcrumbs, handleBreadcrumbsClick]);