Skip to content

Commit 88aa4c1

Browse files
jacobo-dominguez-wgujacobo-dominguez-wgu
authored
fix: various additional i18n issues
* fix: adding messages for i18n issues related to aria labels * fix: replacing ternary operator * refactor: injecting intl object to prevent extra modifications on license details component * test: fixing failing snapshot test * chore: best descriptions to aria label and removing aria label not needed * test: snapshot update and fixing ut * chore: best descriptions to aria labels
1 parent 4ebc159 commit 88aa4c1

15 files changed

Lines changed: 118 additions & 61 deletions

File tree

‎src/course-outline/card-header/CardHeader.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const CardHeader = ({
120120
value={titleValue}
121121
name="displayName"
122122
onChange={(e) => setTitleValue(e.target.value)}
123-
aria-label="edit field"
123+
aria-label={intl.formatMessage(messages.editFieldAriaLabel)}
124124
onBlur={() => onEditSubmit(titleValue)}
125125
onKeyDown={(e) => {
126126
if (e.key === 'Enter') {

‎src/course-outline/card-header/messages.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { defineMessages } from '@edx/frontend-platform/i18n';
22

33
const messages = defineMessages({
4+
editFieldAriaLabel: {
5+
id: 'course-authoring.course-outline.card.edit-field.aria-label',
6+
defaultMessage: 'Edit field',
7+
},
48
expandTooltip: {
59
id: 'course-authoring.course-outline.card.expandTooltip',
610
defaultMessage: 'Collapse/Expand this card',

‎src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const AnswerOption = ({
130130
</Collapsible.Body>
131131
</div>
132132
<div className="d-flex flex-row flex-nowrap">
133-
<Collapsible.Trigger aria-label="Toggle feedback" className="btn-icon btn-icon-primary btn-icon-md align-items-center">
133+
<Collapsible.Trigger aria-label={intl.formatMessage(messages.feedbackToggleIconAriaLabel)} className="btn-icon btn-icon-primary btn-icon-md align-items-center">
134134
<Icon
135135
src={FeedbackOutline}
136136
alt={intl.formatMessage(messages.feedbackToggleIconAltText)}

‎src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ const messages = defineMessages({
2626
defaultMessage: 'Feedback message',
2727
description: 'Placeholder text for feedback text',
2828
},
29+
feedbackToggleIconAriaLabel: {
30+
id: 'authoring.answerwidget.feedback.icon.aria-label',
31+
defaultMessage: 'Toggle feedback',
32+
description: 'Accessible (screen reader) label for "Toggle Feedback" icon',
33+
},
2934
feedbackToggleIconAltText: {
3035
id: 'authoring.answerwidget.feedback.icon.alt',
3136
defaultMessage: 'Toggle feedback',

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ const LicenseDetails = ({
3030
// redux
3131
updateField,
3232
}) => (
33-
level !== LicenseLevel.course && details && license !== 'select' ? (
33+
level !== LicenseLevel.course && details && license !== 'select' && (
3434
<div className="x-small border-primary-100 border-bottom m-0 pr-1">
3535
<Form.Group className="pb-2">
3636
<div className="mb-3">
3737
<FormattedMessage {...messages.detailsSubsectionTitle} />
3838
</div>
39-
{license === LicenseTypes.allRightsReserved ? (
39+
{license === LicenseTypes.allRightsReserved && (
4040
<div className="mt-2">
4141
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
4242
</div>
43-
) : null}
43+
)}
4444
{license === LicenseTypes.creativeCommons
4545
? (
4646
<Stack gap={4}>
@@ -55,7 +55,6 @@ const LicenseDetails = ({
5555
<CheckboxControl
5656
disabled
5757
checked
58-
aria-label="Checkbox"
5958
/>
6059
</ActionRow>
6160
</Form.Group>
@@ -80,7 +79,6 @@ const LicenseDetails = ({
8079
noncommercial: e.target.checked,
8180
},
8281
})}
83-
aria-label="Checkbox"
8482
/>
8583
</ActionRow>
8684
</Form.Group>
@@ -106,7 +104,6 @@ const LicenseDetails = ({
106104
shareAlike: e.target.checked ? false : details.shareAlike,
107105
},
108106
})}
109-
aria-label="Checkbox"
110107
/>
111108
</ActionRow>
112109
</Form.Group>
@@ -132,7 +129,6 @@ const LicenseDetails = ({
132129
noDerivatives: e.target.checked ? false : details.noDerivatives,
133130
},
134131
})}
135-
aria-label="Checkbox"
136132
/>
137133
</ActionRow>
138134
</Form.Group>
@@ -144,7 +140,7 @@ const LicenseDetails = ({
144140
) : null}
145141
</Form.Group>
146142
</div>
147-
) : null
143+
)
148144
);
149145

150146
LicenseDetails.propTypes = {

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`LicenseDetails snapshots snapshots: renders as expected with default props 1`] = `null`;
3+
exports[`LicenseDetails snapshots snapshots: renders as expected with default props 1`] = `false`;
44

55
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
66
<div
@@ -40,7 +40,6 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
4040
</Form.Label>
4141
<ActionRow.Spacer />
4242
<CheckboxControl
43-
aria-label="Checkbox"
4443
checked={true}
4544
disabled={true}
4645
/>
@@ -71,7 +70,6 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
7170
</Form.Label>
7271
<ActionRow.Spacer />
7372
<CheckboxControl
74-
aria-label="Checkbox"
7573
disabled={false}
7674
onChange={[Function]}
7775
/>
@@ -102,7 +100,6 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
102100
</Form.Label>
103101
<ActionRow.Spacer />
104102
<CheckboxControl
105-
aria-label="Checkbox"
106103
disabled={false}
107104
onChange={[Function]}
108105
/>
@@ -131,7 +128,6 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
131128
</Form.Label>
132129
<ActionRow.Spacer />
133130
<CheckboxControl
134-
aria-label="Checkbox"
135131
disabled={false}
136132
onChange={[Function]}
137133
/>
@@ -179,7 +175,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
179175
</div>
180176
`;
181177

182-
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to select 1`] = `null`;
178+
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to select 1`] = `false`;
183179

184180
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
185181
<div

‎src/files-and-videos/files-page/FilesPage.test.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ describe('FilesAndUploads', () => {
205205
await mockStore(RequestStatus.SUCCESSFUL);
206206
axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
207207
axiosMock.onPost(getAssetsUrl(courseId)).reply(200, generateNewAssetApiResponse());
208-
const addFilesButton = screen.getByLabelText('file-input');
208+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
209209
userEvent.upload(addFilesButton, file);
210210
await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
211211
await waitFor(() => {
@@ -221,7 +221,7 @@ describe('FilesAndUploads', () => {
221221
axiosMock.onGet(
222222
`${getAssetsUrl(courseId)}?display_name=mOckID6&page_size=1`,
223223
).reply(200, { assets: [{ display_name: 'mOckID6' }] });
224-
const addFilesButton = screen.getByLabelText('file-input');
224+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
225225
userEvent.upload(addFilesButton, file);
226226
await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
227227
expect(screen.getByText(filesPageMessages.overwriteConfirmMessage.defaultMessage)).toBeVisible();
@@ -242,7 +242,7 @@ describe('FilesAndUploads', () => {
242242
};
243243

244244
axiosMock.onPost(getAssetsUrl(courseId)).reply(200, responseData);
245-
const addFilesButton = screen.getByLabelText('file-input');
245+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
246246
userEvent.upload(addFilesButton, file);
247247
await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
248248

@@ -266,7 +266,7 @@ describe('FilesAndUploads', () => {
266266
axiosMock.onGet(
267267
`${getAssetsUrl(courseId)}?display_name=mOckID6&page_size=1`,
268268
).reply(200, { assets: [{ display_name: 'mOckID6' }] });
269-
const addFilesButton = screen.getByLabelText('file-input');
269+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
270270
userEvent.upload(addFilesButton, file);
271271
await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
272272

@@ -558,7 +558,7 @@ describe('FilesAndUploads', () => {
558558
await mockStore(RequestStatus.SUCCESSFUL);
559559
axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
560560
axiosMock.onPost(getAssetsUrl(courseId)).reply(413, { error: errorMessage });
561-
const addFilesButton = screen.getByLabelText('file-input');
561+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
562562
userEvent.upload(addFilesButton, file);
563563
await waitFor(() => {
564564
const addStatus = store.getState().assets.addingStatus;
@@ -571,7 +571,7 @@ describe('FilesAndUploads', () => {
571571
it('404 validation should show error', async () => {
572572
await mockStore(RequestStatus.SUCCESSFUL);
573573
axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(404);
574-
const addFilesButton = screen.getByLabelText('file-input');
574+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
575575
userEvent.upload(addFilesButton, file);
576576
await executeThunk(addAssetFile(courseId, file, 1), store.dispatch);
577577
const addStatus = store.getState().assets.addingStatus;
@@ -584,7 +584,7 @@ describe('FilesAndUploads', () => {
584584
await mockStore(RequestStatus.SUCCESSFUL);
585585
axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
586586
axiosMock.onPost(getAssetsUrl(courseId)).reply(404);
587-
const addFilesButton = screen.getByLabelText('file-input');
587+
const addFilesButton = screen.getByLabelText(messages.fileInputAriaLabel.defaultMessage);
588588
userEvent.upload(addFilesButton, file);
589589
await executeThunk(addAssetFile(courseId, file, 1), store.dispatch);
590590
const addStatus = store.getState().assets.addingStatus;

‎src/files-and-videos/generic/FileInput.jsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
34
import { getSupportedFormats } from '../videos-page/data/utils';
5+
import messages from './messages';
46

57
export const useFileInput = ({
68
onAddFile,
@@ -23,17 +25,20 @@ export const useFileInput = ({
2325
};
2426
};
2527

26-
const FileInput = ({ fileInput: hook, supportedFileFormats, allowMultiple }) => (
27-
<input
28-
accept={getSupportedFormats(supportedFileFormats)}
29-
aria-label="file-input"
30-
className="upload d-none"
31-
onChange={hook.addFile}
32-
ref={hook.ref}
33-
type="file"
34-
multiple={allowMultiple}
35-
/>
36-
);
28+
const FileInput = ({ fileInput: hook, supportedFileFormats, allowMultiple }) => {
29+
const intl = useIntl();
30+
return (
31+
<input
32+
accept={getSupportedFormats(supportedFileFormats)}
33+
aria-label={intl.formatMessage(messages.fileInputAriaLabel)}
34+
className="upload d-none"
35+
onChange={hook.addFile}
36+
ref={hook.ref}
37+
type="file"
38+
multiple={allowMultiple}
39+
/>
40+
);
41+
};
3742

3843
FileInput.propTypes = {
3944
fileInput: PropTypes.shape({

‎src/files-and-videos/generic/messages.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,11 @@ const messages = defineMessages({
209209
defaultMessage: 'Upload error',
210210
description: 'Title for upload error alert',
211211
},
212+
fileInputAriaLabel: {
213+
id: 'course-authoring.files-and-uploads.fileInput.ariaLabel',
214+
defaultMessage: 'Upload a file',
215+
description: 'Accessible (screen reader) label for file input',
216+
},
212217
});
213218

214219
export default messages;

‎src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,47 +91,47 @@ const SortAndFilterModal = ({
9191
className="text-center"
9292
value="displayName,asc"
9393
type="radio"
94-
aria-label="name descending radio"
94+
aria-label={intl.formatMessage(messages.sortByNameAscendingAriaLabel)}
9595
>
9696
<FormattedMessage {...messages.sortByNameAscending} />
9797
</SelectableBox>
9898
<SelectableBox
9999
className="text-center"
100100
value="dateAdded,desc"
101101
type="radio"
102-
aria-label="date added descending radio"
102+
aria-label={intl.formatMessage(messages.sortByNewestAriaLabel)}
103103
>
104104
<FormattedMessage {...messages.sortByNewest} />
105105
</SelectableBox>
106106
<SelectableBox
107107
className="text-center"
108108
value="fileSize,desc"
109109
type="radio"
110-
aria-label="file size descending radio"
110+
aria-label={intl.formatMessage(messages.sortBySizeDescendingAriaLabel)}
111111
>
112112
<FormattedMessage {...messages.sortBySizeDescending} />
113113
</SelectableBox>
114114
<SelectableBox
115115
className="text-center"
116116
value="displayName,desc"
117117
type="radio"
118-
aria-label="name ascending radio"
118+
aria-label={intl.formatMessage(messages.sortByNameDescendingAriaLabel)}
119119
>
120120
<FormattedMessage {...messages.sortByNameDescending} />
121121
</SelectableBox>
122122
<SelectableBox
123123
className="text-center"
124124
value="dateAdded,asc"
125125
type="radio"
126-
aria-label="date added ascending radio"
126+
aria-label={intl.formatMessage(messages.sortByOldestAriaLabel)}
127127
>
128128
<FormattedMessage {...messages.sortByOldest} />
129129
</SelectableBox>
130130
<SelectableBox
131131
className="text-center"
132132
value="fileSize,asc"
133133
type="radio"
134-
aria-label="file size ascending radio"
134+
aria-label={intl.formatMessage(messages.sortBySizeAscendingAriaLabel)}
135135
>
136136
<FormattedMessage {...messages.sortBySizeAscending} />
137137
</SelectableBox>

0 commit comments

Comments
 (0)