squash: use labelledby and describy for advance settings

openedx · Jul 19, 2024 · f56f44b · f56f44b
1 parent fadcc6a
commit f56f44b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx
@@ -242,8 +242,8 @@ const AdvancedSettings = ({ intl, courseId }) => {
         <AlertMessage
           show={saveSettingsPrompt}
           aria-hidden={saveSettingsPrompt}
-          aria-label={intl.formatMessage(messages.alertWarning)}
-          aria-description={intl.formatMessage(messages.alertWarningDescriptions)}
+          aria-labelledby="advancedSettingsAlertWarningTitle"
+          aria-describedby="advancedSettingsAlertWarningDesc"
           role="dialog"
           actions={[
             !isQueryPending && (
@@ -261,7 +261,9 @@ const AdvancedSettings = ({ intl, courseId }) => {
           variant="warning"
           icon={Warning}
           title={intl.formatMessage(messages.alertWarning)}
+          titleId="advancedSettingsAlertWarningTitle"
           description={intl.formatMessage(messages.alertWarningDescriptions)}
+          descriptoinId="advancedSettingsAlertWarningDesc"
         />
       </div>
       <ModalError

diff --git a/src/generic/alert-message/index.jsx b/src/generic/alert-message/index.jsx
@@ -2,21 +2,27 @@ import React from 'react';
 import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-const AlertMessage = ({ title, description, ...props }) => (
+const AlertMessage = ({
+  title, titleId, description, descriptoinId, ...props
+}) => (
   <Alert {...props}>
-    <Alert.Heading>{title}</Alert.Heading>
-    <span>{description}</span>
+    <Alert.Heading id={titleId}>{title}</Alert.Heading>
+    <span id={descriptoinId}>{description}</span>
   </Alert>
 );
 
 AlertMessage.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleId: PropTypes.string,
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  descriptoinId: PropTypes.string,
 };
 
 AlertMessage.defaultProps = {
   title: undefined,
+  titleId: undefined,
   description: undefined,
+  descriptoinId: undefined,
 };
 
 export default AlertMessage;