From 3c1628f412c47e5f5cedc854caf5dc0a24e04761 Mon Sep 17 00:00:00 2001
From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com>
Date: Tue, 17 Dec 2024 18:52:01 +0100
Subject: [PATCH] static/Alert.jsx: refactor and improve semantic

---
 .../static/comments_async/comment.jsx         |  4 +-
 .../PollDashboard/EditPollManagement.jsx      |  2 -
 adhocracy4/static/Alert.jsx                   | 50 +++++++++++--------
 adhocracy4/static/__tests__/Alert.jest.jsx    |  2 +-
 changelog/_8471.md                            |  2 +
 5 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 changelog/_8471.md

diff --git a/adhocracy4/comments_async/static/comments_async/comment.jsx b/adhocracy4/comments_async/static/comments_async/comment.jsx
index 6f64d992b..3c8f0b5e2 100644
--- a/adhocracy4/comments_async/static/comments_async/comment.jsx
+++ b/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()}
diff --git a/adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx b/adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx
index 0e37b0586..e394d7c5a 100644
--- a/adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx
+++ b/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.'
diff --git a/adhocracy4/static/Alert.jsx b/adhocracy4/static/Alert.jsx
index a625e7f7a..1e0a8b7d8 100644
--- a/adhocracy4/static/Alert.jsx
+++ b/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
diff --git a/adhocracy4/static/__tests__/Alert.jest.jsx b/adhocracy4/static/__tests__/Alert.jest.jsx
index 6e30018ad..455336782 100644
--- a/adhocracy4/static/__tests__/Alert.jest.jsx
+++ b/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', () => {
diff --git a/changelog/_8471.md b/changelog/_8471.md
new file mode 100644
index 000000000..27cb2ceaa
--- /dev/null
+++ b/changelog/_8471.md
@@ -0,0 +1,2 @@
+### Changed
+- refactored static/Alert.jsx
\ No newline at end of file