From fadcc6a7c38ef8e55d67016b596b001670f735a3 Mon Sep 17 00:00:00 2001 From: Ghassan Maslamani Date: Tue, 16 Jul 2024 20:11:04 +0200 Subject: [PATCH 1/2] fix: fix: use aria attribute correctly resolves wg-translations/issues/33 This change correct the usage of aria-* attributes --- .eslintrc.js | 4 +++ src/advanced-settings/AdvancedSettings.jsx | 12 +++---- src/advanced-settings/messages.js | 24 -------------- src/course-outline/CourseOutline.jsx | 6 ++-- src/course-outline/messages.js | 8 ----- src/course-outline/page-alerts/PageAlerts.jsx | 5 ++- .../CreateOrRerunCourseForm.jsx | 7 +--- .../create-or-rerun-course/messages.js | 8 ----- .../internet-connection-alert/index.jsx | 8 ++--- .../internet-connection-alert/messages.js | 8 ----- .../saving-error-alert/SavingErrorAlert.jsx | 8 ++--- src/generic/saving-error-alert/messages.js | 10 ------ src/grading-settings/GradingSettings.jsx | 7 ++-- src/grading-settings/messages.js | 16 ---------- src/schedule-and-details/index.jsx | 29 +++++------------ src/schedule-and-details/messages.js | 32 ------------------- 16 files changed, 34 insertions(+), 158 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 06e92c1d56..24863710af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,10 @@ module.exports = createConfig( 'template-curly-spacing': 'off', 'react-hooks/exhaustive-deps': 'off', 'no-restricted-exports': 'off', + // This added because 'aria-description' is not reconginzed as valid prop for reac <=17 + // ref: https://github.com/facebook/react/issues/21035 because it's new. + // once this MFE upgrade to react >18, it can be removed. + 'jsx-a11y/aria-props': 'off', }, settings: { // Import URLs should be resolved using aliases diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx index 565bec3b7c..792386e0c3 100644 --- a/src/advanced-settings/AdvancedSettings.jsx +++ b/src/advanced-settings/AdvancedSettings.jsx @@ -137,22 +137,20 @@ const AdvancedSettings = ({ intl, courseId }) => { icon={Info} proctoringErrorsData={proctoringErrors} aria-hidden="true" - aria-labelledby={intl.formatMessage(messages.alertProctoringAriaLabelledby)} - aria-describedby={intl.formatMessage(messages.alertProctoringDescribedby)} /> )} {showSuccessAlert ? ( @@ -244,8 +242,8 @@ const AdvancedSettings = ({ intl, courseId }) => { { {showSuccessAlert ? ( diff --git a/src/course-outline/messages.js b/src/course-outline/messages.js index 511bf94668..8a22c76eb0 100644 --- a/src/course-outline/messages.js +++ b/src/course-outline/messages.js @@ -17,14 +17,6 @@ const messages = defineMessages({ id: 'course-authoring.course-outline.reindex.alert.success.description', defaultMessage: 'Course has been successfully reindexed.', }, - alertSuccessAriaLabelledby: { - id: 'course-authoring.course-outline.reindex.alert.success.aria.labelledby', - defaultMessage: 'alert-confirmation-title', - }, - alertSuccessAriaDescribedby: { - id: 'course-authoring.course-outline.reindex.alert.success.aria.describedby', - defaultMessage: 'alert-confirmation-description', - }, newSectionButton: { id: 'course-authoring.course-outline.section-list.button.new-section', defaultMessage: 'New section', diff --git a/src/course-outline/page-alerts/PageAlerts.jsx b/src/course-outline/page-alerts/PageAlerts.jsx index be7e981350..34cd6018dd 100644 --- a/src/course-outline/page-alerts/PageAlerts.jsx +++ b/src/course-outline/page-alerts/PageAlerts.jsx @@ -20,7 +20,6 @@ import { RequestStatus } from '../../data/constants'; import AlertMessage from '../../generic/alert-message'; import AlertProctoringError from '../../generic/AlertProctoringError'; import messages from './messages'; -import advancedSettingsMessages from '../../advanced-settings/messages'; import { getPasteFileNotices } from '../data/selectors'; import { dismissError, removePasteFileNotices } from '../data/slice'; import { API_ERROR_TYPES } from '../constants'; @@ -195,8 +194,8 @@ const PageAlerts = ({ icon={InfoOutlineIcon} proctoringErrorsData={proctoringErrors} aria-hidden="true" - aria-labelledby={intl.formatMessage(advancedSettingsMessages.alertProctoringAriaLabelledby)} - aria-describedby={intl.formatMessage(advancedSettingsMessages.alertProctoringDescribedby)} + aria-label={intl.formatMessage(messages.proctoringErrorTitle)} + aria-description={intl.formatMessage(messages.proctoringErrorText)} > {intl.formatMessage(messages.proctoringErrorTitle)} diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx index fc4f48666e..7aa85d2af1 100644 --- a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx +++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx @@ -208,12 +208,7 @@ const CreateOrRerunCourseForm = ({ icon={InfoIcon} title={postErrors.errMsg} aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.alertErrorExistsAriaLabelledBy, - )} - aria-describedby={intl.formatMessage( - messages.alertErrorExistsAriaDescribedBy, - )} + aria-label={postErrors.errMsg} /> ) : null} diff --git a/src/generic/create-or-rerun-course/messages.js b/src/generic/create-or-rerun-course/messages.js index 16a07af20e..b878250ec6 100644 --- a/src/generic/create-or-rerun-course/messages.js +++ b/src/generic/create-or-rerun-course/messages.js @@ -117,14 +117,6 @@ const messages = defineMessages({ id: 'course-authoring.create-or-rerun-course.no-space.error', defaultMessage: 'Please do not use any spaces in this field.', }, - alertErrorExistsAriaLabelledBy: { - id: 'course-authoring.create-or-rerun-course.error.already-exists.labelledBy', - defaultMessage: 'alert-already-exists-title', - }, - alertErrorExistsAriaDescribedBy: { - id: 'course-authoring.create-or-rerun-course.error.already-exists.aria.describedBy', - defaultMessage: 'alert-confirmation-description', - }, }); export default messages; diff --git a/src/generic/internet-connection-alert/index.jsx b/src/generic/internet-connection-alert/index.jsx index a4a8e271cd..08527c45c9 100644 --- a/src/generic/internet-connection-alert/index.jsx +++ b/src/generic/internet-connection-alert/index.jsx @@ -54,11 +54,11 @@ const InternetConnectionAlert = ({ title={intl.formatMessage(messages.offlineWarningTitle)} description={intl.formatMessage(messages.offlineWarningDescription)} aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.offlineWarningTitleAriaLabelledBy, + aria-label={intl.formatMessage( + messages.offlineWarningTitle, )} - aria-describedby={intl.formatMessage( - messages.offlineWarningDescriptionAriaDescribedBy, + aria-description={intl.formatMessage( + messages.offlineWarningDescription, )} /> ); diff --git a/src/generic/internet-connection-alert/messages.js b/src/generic/internet-connection-alert/messages.js index 52ab63691a..39e5a2d21e 100644 --- a/src/generic/internet-connection-alert/messages.js +++ b/src/generic/internet-connection-alert/messages.js @@ -9,14 +9,6 @@ const messages = defineMessages({ id: 'course-authoring.generic.alert.warning.offline.description', defaultMessage: 'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.', }, - offlineWarningTitleAriaLabelledBy: { - id: 'course-authoring.generic.alert.warning.offline.title.aria.labelled-by', - defaultMessage: 'alert-internet-error-title', - }, - offlineWarningDescriptionAriaDescribedBy: { - id: 'course-authoring.generic.alert.warning.offline.subtitle.aria.described-by', - defaultMessage: 'alert-internet-error-description', - }, }); export default messages; diff --git a/src/generic/saving-error-alert/SavingErrorAlert.jsx b/src/generic/saving-error-alert/SavingErrorAlert.jsx index db3431a0a9..d9bcf58425 100644 --- a/src/generic/saving-error-alert/SavingErrorAlert.jsx +++ b/src/generic/saving-error-alert/SavingErrorAlert.jsx @@ -45,11 +45,11 @@ const SavingErrorAlert = ({ errorMessage || intl.formatMessage(messages.warningDescription) } aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.warningTitleAriaLabelledBy, + aria-label={intl.formatMessage( + messages.warningTitle, )} - aria-describedby={intl.formatMessage( - messages.warningDescriptionAriaDescribedBy, + aria-description={intl.formatMessage( + messages.warningDescription, )} /> ); diff --git a/src/generic/saving-error-alert/messages.js b/src/generic/saving-error-alert/messages.js index d45bb3bd47..30c0c79f22 100644 --- a/src/generic/saving-error-alert/messages.js +++ b/src/generic/saving-error-alert/messages.js @@ -11,16 +11,6 @@ const messages = defineMessages({ defaultMessage: 'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.', description: 'Description providing possible reasons and solutions for saving error in the studio environment', }, - warningTitleAriaLabelledBy: { - id: 'course-authoring.generic.saving-error-alert.title.aria.labelled-by', - defaultMessage: 'saving-error-alert-title', - description: 'ARIA label ID for the title of the saving error alert', - }, - warningDescriptionAriaDescribedBy: { - id: 'course-authoring.generic.saving-error-alert.aria.described-by', - defaultMessage: 'saving-error-alert-description', - description: 'ARIA description ID for the saving error alert', - }, }); export default messages; diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx index 79234b603e..e92617d9c2 100644 --- a/src/grading-settings/GradingSettings.jsx +++ b/src/grading-settings/GradingSettings.jsx @@ -123,8 +123,7 @@ const GradingSettings = ({ intl, courseId }) => { icon={CheckCircle} title={intl.formatMessage(messages.alertSuccess)} aria-hidden="true" - aria-labelledby={intl.formatMessage(messages.alertSuccessAriaLabelledby)} - aria-describedby={intl.formatMessage(messages.alertSuccessAriaDescribedby)} + aria-label={intl.formatMessage(messages.alertSuccess)} />
@@ -235,8 +234,8 @@ const GradingSettings = ({ intl, courseId }) => { { icon={CheckCircleIcon} title={intl.formatMessage(messages.alertSuccess)} aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.alertSuccessAriaLabelledby, - )} - aria-describedby={intl.formatMessage( - messages.alertSuccessAriaDescribedby, + aria-label={intl.formatMessage( + messages.alertSuccess, )} /> { icon={ErrorOutlineIcon} title={intl.formatMessage(messages.alertLoadFail)} aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.alertFailAriaLabelledby, - )} - aria-describedby={intl.formatMessage( - messages.alertFailAriaDescribedby, + aria-label={intl.formatMessage( + messages.alertLoadFail, )} /> { icon={ErrorOutlineIcon} title={intl.formatMessage(messages.alertFail)} aria-hidden="true" - aria-labelledby={intl.formatMessage( - messages.alertFailAriaLabelledby, - )} - aria-describedby={intl.formatMessage( - messages.alertFailAriaDescribedby, + aria-label={intl.formatMessage( + messages.alertFail, )} />
@@ -351,12 +342,8 @@ const ScheduleAndDetails = ({ intl, courseId }) => { Date: Fri, 19 Jul 2024 12:03:06 +0200 Subject: [PATCH 2/2] squash: use labelledby and describy for advance settings --- src/advanced-settings/AdvancedSettings.jsx | 6 ++++-- src/generic/alert-message/index.jsx | 12 +++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx index 792386e0c3..4c54fe3de8 100644 --- a/src/advanced-settings/AdvancedSettings.jsx +++ b/src/advanced-settings/AdvancedSettings.jsx @@ -242,8 +242,8 @@ const AdvancedSettings = ({ intl, courseId }) => { { variant="warning" icon={Warning} title={intl.formatMessage(messages.alertWarning)} + titleId="advancedSettingsAlertWarningTitle" description={intl.formatMessage(messages.alertWarningDescriptions)} + descriptoinId="advancedSettingsAlertWarningDesc" />
( +const AlertMessage = ({ + title, titleId, description, descriptoinId, ...props +}) => ( - {title} - {description} + {title} + {description} ); AlertMessage.propTypes = { title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + titleId: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + descriptoinId: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), }; AlertMessage.defaultProps = { title: undefined, + titleId: undefined, description: undefined, + descriptoinId: undefined, }; export default AlertMessage;