static/Alert.jsx: refactor and improve semantic

adhocracy4/comments_async/static/comments_async/comment.jsx

@@ -11,6 +11,7 @@ import CommentList from './comment_list'
 import { ModeratorFeedback } from './moderator_feedback'
 import AiReport from './ai_report'
 import RatingBox from '../../../ratings/static/ratings/RatingBox'
+import Alert from '../../../static/Alert'
 
 const translated = {
   reportTitle: django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).'),
@@ -309,8 +310,7 @@ export default class Comment extends React.Component {
 
     return (
       <li>
-        {this.props.displayNotification &&
-          <div className="alert alert--success a4-comments__success-notification"><i className="fas fa-check" /> {translated.successMessage}</div>}
+        {this.props.displayNotification && <Alert type="success" message={translated.successMessage} />}
         <div className={(this.props.is_users_own_comment ? 'a4-comments__comment a4-comments__comment-owner' : 'a4-comments__comment')}>
           <a className="a4-comments__anchor" id={'comment_' + this.props.id} href={'./?comment=' + this.props.id}>{'Comment ' + this.props.id}</a>
           {this.renderDeleteModal()}

adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx

@@ -184,7 +184,6 @@ export const EditPollManagement = (props) => {
       .done((data) => {
         setQuestions(data.questions)
         setAlert({
-          alertAttribute: 'polite',
           type: 'success',
           message: django.gettext('The poll has been updated.')
         })
@@ -199,7 +198,6 @@ export const EditPollManagement = (props) => {
         }
 
         setAlert({
-          alertAttribute: 'assertive',
           type: 'danger',
           message: django.gettext(
             'The poll could not be updated. Please check the data you entered again.'

adhocracy4/static/Alert.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react'
 import django from 'django'
 
-const Alert = ({ type, alertAttribute, message, onClick, timeInMs }) => {
+const Alert = ({ type = 'info', message, onClick, timeInMs }) => {
   const timer = useRef()
   const closeTag = django.gettext('Close')
 
@@ -14,28 +14,36 @@ const Alert = ({ type, alertAttribute, message, onClick, timeInMs }) => {
     }
   }, [timeInMs, onClick])
 
-  if (type) {
-    return (
-      <div
-        id="alert"
-        className={'alert alert--' + type}
-        aria-atomic="true"
-        aria-live={alertAttribute}
-      >
-        <div className="container a4-alert__container">
-          <div className="a4-alert__content">
-            {message}
-          </div>
-          <button className="alert__close" title={closeTag} onClick={onClick}>
-            <i className="fa fa-times" aria-label={closeTag} />
-          </button>
-        </div>
-
-      </div>
-    )
+  // Only check for message now since type has a default
+  if (!message) {
+    return null
   }
 
-  return <div aria-live="assertive" aria-atomic="true" id="alert" />
+  // Use alert role for danger/warning, status for others
+  const ariaRole = ['danger', 'warning'].includes(type) ? 'alert' : 'status'
+
+  return (
+    <div
+      id="alert"
+      role={ariaRole}
+      className={'alert alert--' + type}
+      aria-atomic="true"
+    >
+      <div className="alert__content">
+        {message}
+        {onClick && (
+          <button
+            type="button"
+            className="alert__close"
+            aria-label={closeTag}
+            onClick={onClick}
+          >
+            <span className="fa fa-times" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
 }
 
 module.exports = Alert

adhocracy4/static/__tests__/Alert.jest.jsx

@@ -11,7 +11,7 @@ test('Alert is showing', () => {
 test('Alert is not showing', () => {
   render(<Alert type="" message="" />)
   const alert = document.querySelector('#alert')
-  expect(alert).toBeTruthy()
+  expect(alert).toBeFalsy()
 })
 
 test('Invoke callback through click', () => {

changelog/_8471.md

@@ -0,0 +1,2 @@
+### Changed
+- refactored static/Alert.jsx