diff --git a/ui/shared/context-modules/react/ContextModulesPublishMenu.tsx b/ui/shared/context-modules/react/ContextModulesPublishMenu.tsx index 54b006e121b..de4f62621ac 100644 --- a/ui/shared/context-modules/react/ContextModulesPublishMenu.tsx +++ b/ui/shared/context-modules/react/ContextModulesPublishMenu.tsx @@ -72,6 +72,7 @@ const ContextModulesPublishMenu: React.FC = ({courseId, runningProgressId setModelsReady(true) }) }, []) + // if the module page is loaded while a publish is in progress, // initialize the UI accordingly useEffect(() => { @@ -141,6 +142,16 @@ const ContextModulesPublishMenu: React.FC = ({courseId, runningProgressId refreshPublishStates() } else { setCurrentProgress(progress) + if (progress.workflow_state === 'running' && progress.completion > 0) { + showFlashAlert({ + message: I18n.t('Publishing progress is %{progress} percent complete', { + progress: Math.round(progress.completion), + }), + type: 'info', + err: undefined, + srOnly: true, + }) + } } } diff --git a/ui/shared/context-modules/react/ContextModulesPublishModal.tsx b/ui/shared/context-modules/react/ContextModulesPublishModal.tsx index 4a81c12cdb8..97891d939b4 100644 --- a/ui/shared/context-modules/react/ContextModulesPublishModal.tsx +++ b/ui/shared/context-modules/react/ContextModulesPublishModal.tsx @@ -22,6 +22,7 @@ import {Button, CloseButton} from '@instructure/ui-buttons' import {Heading} from '@instructure/ui-heading' import {Modal} from '@instructure/ui-modal' import {ProgressBar} from '@instructure/ui-progress' +import {AccessibleContent} from '@instructure/ui-a11y-content' import {Text} from '@instructure/ui-text' import {View} from '@instructure/ui-view' @@ -74,7 +75,7 @@ const ContextModulesPublishModal: React.FC = ({ { - return Math.round((valueNow / valueMax) * 100) + ' percent' + return I18n.t('%val percent', {val: Math.round((valueNow / valueMax) * 100)}) }} renderValue={({valueNow, valueMax}) => { return {Math.round((valueNow / valueMax) * 100)}% @@ -123,7 +124,15 @@ const ContextModulesPublishModal: React.FC = ({ color="primary" disabled={isCanceling} > - {isPublishing ? I18n.t('Stop') : I18n.t('Continue')} + {isPublishing ? ( + + {I18n.t('Stop Publishing')} + + ) : ( + I18n.t('Continue') + )} diff --git a/ui/shared/context-modules/react/__tests__/ContextModulesPublishMenu.test.tsx b/ui/shared/context-modules/react/__tests__/ContextModulesPublishMenu.test.tsx index 4187109ecb4..d82e0bacf43 100644 --- a/ui/shared/context-modules/react/__tests__/ContextModulesPublishMenu.test.tsx +++ b/ui/shared/context-modules/react/__tests__/ContextModulesPublishMenu.test.tsx @@ -39,15 +39,7 @@ const defaultProps = { describe('ContextModulesPublishMenu', () => { beforeEach(() => { - doFetchApi.mockResolvedValue({ - json: { - progress: { - progress: { - id: 1234, - }, - }, - }, - }) + doFetchApi.mockResolvedValue({response: {ok: true}, json: [], link: null}) }) afterEach(() => { @@ -70,6 +62,13 @@ describe('ContextModulesPublishMenu', () => { }) it('renders a spinner when publish is in-flight', () => { + doFetchApi.mockResolvedValueOnce({ + json: { + id: 1234, + completion: 100, + workflow_state: 'completed', + }, + }) const {getByText} = render( ) @@ -77,12 +76,36 @@ describe('ContextModulesPublishMenu', () => { }) it('updates all the modules when ready', async () => { + doFetchApi.mockResolvedValueOnce({ + json: { + id: 1234, + completion: 100, + workflow_state: 'completed', + }, + }) const spy = jest.spyOn(publishAllModulesHelperModule, 'updateModulePendingPublishedStates') render() expect(spy).not.toHaveBeenCalled() window.dispatchEvent(new Event('module-publish-models-ready')) await waitFor(() => expect(spy).toHaveBeenCalled()) }) + + it('renders a screenreader message with progress updates', async () => { + doFetchApi.mockResolvedValueOnce({ + json: { + id: 1234, + completion: 17, + workflow_state: 'running', + }, + }) + const {getByText} = render( + + ) + + await waitFor(() => + expect(getByText('Publishing progress is 17 percent complete')).toBeInTheDocument() + ) + }) }) describe('menu actions', () => { diff --git a/ui/shared/context-modules/react/__tests__/ContextModulesPublishModal.test.tsx b/ui/shared/context-modules/react/__tests__/ContextModulesPublishModal.test.tsx index e27c1d93654..c3247d4a7ab 100644 --- a/ui/shared/context-modules/react/__tests__/ContextModulesPublishModal.test.tsx +++ b/ui/shared/context-modules/react/__tests__/ContextModulesPublishModal.test.tsx @@ -83,7 +83,9 @@ describe('ContextModulesPublishModal', () => { const publishButton = getByTestId('publish-button') expect(publishButton.textContent).toBe('Continue') rerender() - expect(publishButton.textContent).toBe('Stop') + expect(publishButton.textContent).toBe( + 'Stop publishing button. Click to discontinue processing.Stop Publishing' + ) }) it('disables the stop button if canceling', () => { @@ -91,7 +93,9 @@ describe('ContextModulesPublishModal', () => { ) const publishButton = getByTestId('publish-button') - expect(publishButton.textContent).toBe('Stop') + expect(publishButton.textContent).toBe( + 'Stop publishing button. Click to discontinue processing.Stop Publishing' + ) expect(publishButton).toBeDisabled() }) })