From 35470ffb97c4604c7c1046c0a0852d80e2abca9c Mon Sep 17 00:00:00 2001
From: philli-m <5871230+philli-m@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:49:31 +0200
Subject: [PATCH 1/3] userdashboard/ModerationNotification//AIFeedback: add AI
 feedback component and add to the ModerationNotification small a11y
 improvments

---
 .../assets/scss/components/_alerts.scss       |  2 +-
 .../assets/scss/components/_button.scss       | 19 +++++++--
 .../assets/scss/components/_header_upper.scss |  4 +-
 .../AiReportExplanation.jsx                   | 41 +++++++++++++++++++
 .../ModerationFeedback.jsx                    |  4 +-
 .../ModerationNotification.jsx                | 24 +++++++----
 .../ModerationNotificationActionsBar.jsx      |  4 +-
 changelog/7540.md                             |  7 ++++
 docs/ai_report.md                             |  4 ++
 9 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
 create mode 100644 changelog/7540.md
 create mode 100644 docs/ai_report.md

diff --git a/adhocracy-plus/assets/scss/components/_alerts.scss b/adhocracy-plus/assets/scss/components/_alerts.scss
index 88eb507d1..657057071 100644
--- a/adhocracy-plus/assets/scss/components/_alerts.scss
+++ b/adhocracy-plus/assets/scss/components/_alerts.scss
@@ -27,7 +27,7 @@ $messages-margin-bottom: 25px;
 
 .alert--error,
 .alert--danger {
-    background-color: lighten($brand-danger, 50);
+    background-color: lighten($brand-danger, 57);
     color: $text-color;
 }
 
diff --git a/adhocracy-plus/assets/scss/components/_button.scss b/adhocracy-plus/assets/scss/components/_button.scss
index 9e5226068..5cccc88d6 100644
--- a/adhocracy-plus/assets/scss/components/_button.scss
+++ b/adhocracy-plus/assets/scss/components/_button.scss
@@ -92,10 +92,15 @@
 
     &:focus,
     &:hover,
-    &:active {
+    &:active,
+    &:focus-within {
         background-color: transparent !important;
         text-decoration: underline;
     }
+
+    &:focus-visible {
+        @include fake-focus-shadow;
+    }
 }
 
 .btn.btn--transparent--inverted {
@@ -115,11 +120,19 @@
 
     &:focus,
     &:hover,
-    &:active,
+    &:active {
+        box-shadow: none;
+        background-color: $bg-light;
+    }
+
+    &:focus-visible {
+        @include fake-focus-shadow;
+    }
+
     &:disabled,
     &.is-disabled {
         box-shadow: none;
-        background-color: $bg-light;
+        color: $text-muted;
     }
 
     // needed for toggle switch
diff --git a/adhocracy-plus/assets/scss/components/_header_upper.scss b/adhocracy-plus/assets/scss/components/_header_upper.scss
index 8c297f809..0b93d5278 100644
--- a/adhocracy-plus/assets/scss/components/_header_upper.scss
+++ b/adhocracy-plus/assets/scss/components/_header_upper.scss
@@ -33,8 +33,8 @@
     }
 }
 
-.header-upper__user a {
-    color: $body-bg !important;
+.header-upper__user .navi__item a {
+    color: $body-bg;
 }
 
 .header-upper__mobile-toggle {
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
new file mode 100644
index 000000000..1dc203fe4
--- /dev/null
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import django from 'django'
+
+const translated = {
+  intro: django.gettext('This comment contains disinformation. Defakts uses an Artificial ' +
+  'Intelligence to scan content for disinformation. Disinformation often shows ' +
+  'certain characteristics that allow for a reliable identification.'),
+  ariaReadMore: django.gettext('Click to view the AI explanation for reporting this comment.'),
+  ariaReadLess: django.gettext('Click to hide the AI explanation for reporting this comment.'),
+  readMore: django.gettext('Read more'),
+  readLess: django.gettext('Read less')
+}
+
+export const AiReportExplanation = ({ AiReport }) => {
+  const [isExpanded, setIsExpanded] = useState()
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  return (
+    <li className="alert alert--danger d-flex text-start mb-3">
+      <i
+        className="fas fa-exclamation-circle text-danger pt-1 pe-2"
+        aria-hidden="True"
+      />
+      <p>
+        {translated.intro + ' '}
+        {isExpanded && AiReport + ' '}
+        <button
+          className="btn--link text-danger"
+          type="button"
+          onClick={toggleExpand}
+          aria-label={isExpanded ? translated.ariaReadLess : translated.ariaReadMore}
+        >
+          {isExpanded ? translated.readLess : translated.readMore}
+        </button>
+      </p>
+    </li>
+  )
+}
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
index 40ac8775a..12fb14d4b 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
@@ -12,7 +12,7 @@ export const ModerationFeedback = (props) => {
   }
 
   return (
-    <div className="userdashboard-mod-feedback">
+    <li className="userdashboard-mod-feedback">
       <div className="row">
         <div className="col-7 col-md-8 userdashboard-mod-feedback__header">
           <div>{translated.feedbackTitle}</div>
@@ -68,6 +68,6 @@ export const ModerationFeedback = (props) => {
           <p>{feedbackText}</p>
         </div>
       </div>
-    </div>
+    </li>
   )
 }
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
index 0c2b9c5a7..c6fab147e 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import django from 'django'
 import api from './api'
+import { AiReportExplanation } from './AiReportExplanation'
 import { ModerationFeedbackForm } from './ModerationFeedbackForm'
 import { ModerationFeedback } from './ModerationFeedback'
 import { ModerationNotificationActionsBar } from './ModerationNotificationActionsBar'
@@ -21,7 +22,9 @@ const translated = {
   notificationRead: django.gettext('Notification successfully marked as read.'),
   notificationUnread: django.gettext('Notification successfully marked as unread.'),
   aiClassified: django.gettext('AI'),
-  postedComment: django.gettext('posted a {}comment{}')
+  postedComment: django.gettext('posted a {}comment{}'),
+  dummyText: django.gettext('Dummy text')
+
 }
 
 export const ModerationNotification = (props) => {
@@ -257,8 +260,8 @@ export const ModerationNotification = (props) => {
 
   return (
     <li>
-      <div className="u-border p-4">
-        <div className="d-flex flex-wrap">
+      <ul className="u-border p-4 u-list-reset">
+        <li className="d-flex flex-wrap">
           {userImageDiv}
           <div>
             <p className="mb-1">
@@ -291,17 +294,20 @@ export const ModerationNotification = (props) => {
               </ul>
             </div>
           </div>
-        </div>
+        </li>
 
         {numReports > 0 &&
-          <div>
+          <li>
             <p>
               <i className="fas fa-exclamation-circle me-1" aria-hidden="true" />
               {getLink(translatedReportText(numReports), commentUrl)}
             </p>
-          </div>}
-
-        <p>{commentText}</p>
+          </li>}
+        <li>
+          <p>{commentText}</p>
+        </li>
+        {/* FIXME add if once report added to serializer */}
+        <AiReportExplanation AiReport={translated.dummyText} />
         <ModerationNotificationActionsBar
           itemPk={notification.pk}
           isEditing={notification.moderator_feedback}
@@ -320,7 +326,7 @@ export const ModerationNotification = (props) => {
               setIsEditing(true)
             }}
           />}
-      </div>
+      </ul>
       {showFeedbackForm &&
         <ModerationFeedbackForm
           onSubmit={(payload) => handleFeedbackSubmit(payload)}
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationActionsBar.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationActionsBar.jsx
index c2b42d716..d12661c8c 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationActionsBar.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationActionsBar.jsx
@@ -28,7 +28,7 @@ export const ModerationNotificationActionsBar = (props) => {
   } = props
 
   return (
-    <div className="d-flex flex-wrap justify-content-between">
+    <li className="d-flex flex-wrap justify-content-between">
       <button
         id={'moderation-notification-actions-bar-button-reply-' + itemPk}
         className="btn px-0 userdashboard-mod-notification__btn"
@@ -62,6 +62,6 @@ export const ModerationNotificationActionsBar = (props) => {
           textMouseOn={isBlocked ? translated.unblockText : translated.blockText}
         />
       </div>
-    </div>
+    </li>
   )
 }
diff --git a/changelog/7540.md b/changelog/7540.md
new file mode 100644
index 000000000..6b4dcb6fd
--- /dev/null
+++ b/changelog/7540.md
@@ -0,0 +1,7 @@
+### Added
+
+- react component to show AI report with dummy data for now
+
+### Changed
+
+- structure of ModerationNotification to be more a11y compliant
diff --git a/docs/ai_report.md b/docs/ai_report.md
new file mode 100644
index 000000000..08706200e
--- /dev/null
+++ b/docs/ai_report.md
@@ -0,0 +1,4 @@
+FIXME add docs for AI report, for now just list coresponding files
+
+### React components
+apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx

From b798911844e97b39d5e72fdaf8f87738013352bb Mon Sep 17 00:00:00 2001
From: philli-m <5871230+philli-m@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:49:31 +0200
Subject: [PATCH 2/3] userdashboard/ModerationNotification//AIFeedback: add AI
 feedback component and add to the ModerationNotification small a11y
 improvments

---
 .../assets/js/a4_candy_userdashboard/AiReportExplanation.jsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
index 1dc203fe4..54a7b7a3c 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
@@ -11,7 +11,7 @@ const translated = {
   readLess: django.gettext('Read less')
 }
 
-export const AiReportExplanation = ({ AiReport }) => {
+export const AIReportExplanation = ({ AIReport }) => {
   const [isExpanded, setIsExpanded] = useState()
 
   const toggleExpand = () => {
@@ -26,7 +26,7 @@ export const AiReportExplanation = ({ AiReport }) => {
       />
       <p>
         {translated.intro + ' '}
-        {isExpanded && AiReport + ' '}
+        {isExpanded && AIReport + ' '}
         <button
           className="btn--link text-danger"
           type="button"

From 492e5fb99990235894edd4e57eed826f5d3ed30a Mon Sep 17 00:00:00 2001
From: philli-m <5871230+philli-m@users.noreply.github.com>
Date: Wed, 2 Aug 2023 10:39:17 +0200
Subject: [PATCH 3/3] userdashboard/AiReportExplanation: add switch component
 to display/hide ai explanation on frontend

---
 .../assets/scss/components/_button.scss       | 32 +++++++++++++
 apps/contrib/assets/SwitchButton.jsx          | 29 ++++++++++++
 .../AiReportExplanation.jsx                   | 45 +++++++++++--------
 .../ModerationFeedback.jsx                    |  6 ++-
 .../ModerationNotification.jsx                |  8 +++-
 5 files changed, 98 insertions(+), 22 deletions(-)
 create mode 100644 apps/contrib/assets/SwitchButton.jsx

diff --git a/adhocracy-plus/assets/scss/components/_button.scss b/adhocracy-plus/assets/scss/components/_button.scss
index 5cccc88d6..b1630dddb 100644
--- a/adhocracy-plus/assets/scss/components/_button.scss
+++ b/adhocracy-plus/assets/scss/components/_button.scss
@@ -350,3 +350,35 @@
         padding-right: 0.5rem;
     }
 }
+
+.btn-switch {
+    display: flex;
+}
+
+.btn-switch__switch {
+    display: inline-block;
+    width: 36px;
+    height: 22px;
+    margin-inline-end: 0.5 * $spacer;
+    border: 2px solid $brand-primary;
+    background-color: $brand-primary;
+    border-radius: 20px;
+
+}
+
+.btn-switch__adjuster {
+    display: inline-block;
+    border: 9px solid $body-bg;
+    border-radius: 50px;
+}
+
+[aria-pressed="false"] .btn-switch__switch,
+[aria-checked="false"] .btn-switch__switch {
+    border-color: $brand-secondary;
+    background-color: $brand-secondary;
+}
+
+[aria-pressed="true"] .btn-switch__adjuster,
+[aria-checked="true"] .btn-switch__adjuster {
+    transform: translate(14px);
+}
diff --git a/apps/contrib/assets/SwitchButton.jsx b/apps/contrib/assets/SwitchButton.jsx
new file mode 100644
index 000000000..f40cd4f1d
--- /dev/null
+++ b/apps/contrib/assets/SwitchButton.jsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+export const SwitchButton = (props) => {
+  const [isChecked, setIsChecked] = useState(false)
+
+  const toggleIsChecked = () => {
+    setIsChecked(!isChecked)
+  }
+
+  return (
+    <button
+      id={props.id}
+      className="btn-switch"
+      aria-labelledby={'switch-id-' + props.id}
+      role="switch"
+      aria-checked={isChecked}
+      onClick={toggleIsChecked}
+    >
+      <span className="btn-switch__switch">
+        <span className="btn-switch__adjuster" />
+      </span>
+      <span
+        id={'switch-id-' + props.id}
+      >
+        {props.switchLabel}
+      </span>
+    </button>
+  )
+}
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
index 54a7b7a3c..a2b15fff4 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import django from 'django'
+import { SwitchButton } from '../../../../../apps/contrib/assets/SwitchButton'
 
 const translated = {
   intro: django.gettext('This comment contains disinformation. Defakts uses an Artificial ' +
@@ -11,7 +12,7 @@ const translated = {
   readLess: django.gettext('Read less')
 }
 
-export const AIReportExplanation = ({ AIReport }) => {
+export const AiReportExplanation = ({ AIReport, notificationPk }) => {
   const [isExpanded, setIsExpanded] = useState()
 
   const toggleExpand = () => {
@@ -19,23 +20,31 @@ export const AIReportExplanation = ({ AIReport }) => {
   }
 
   return (
-    <li className="alert alert--danger d-flex text-start mb-3">
-      <i
-        className="fas fa-exclamation-circle text-danger pt-1 pe-2"
-        aria-hidden="True"
-      />
-      <p>
-        {translated.intro + ' '}
-        {isExpanded && AIReport + ' '}
-        <button
-          className="btn--link text-danger"
-          type="button"
-          onClick={toggleExpand}
-          aria-label={isExpanded ? translated.ariaReadLess : translated.ariaReadMore}
-        >
-          {isExpanded ? translated.readLess : translated.readMore}
-        </button>
-      </p>
+    <li className="alert alert--danger mb-3">
+      <div className="d-flex text-start mb-4">
+        <i
+          className="fas fa-exclamation-circle text-danger pt-1 pe-2"
+          aria-hidden="True"
+        />
+        <p>
+          {translated.intro + ' '}
+          {isExpanded && AIReport + ' '}
+          <button
+            className="btn--link text-danger"
+            type="button"
+            onClick={toggleExpand}
+            aria-label={isExpanded ? translated.ariaReadLess : translated.ariaReadMore}
+          >
+            {isExpanded ? translated.readLess : translated.readMore}
+          </button>
+        </p>
+      </div>
+      <div className="d-flex text-start">
+        <SwitchButton
+          id={notificationPk}
+          switchLabel={translated.readLess}
+        />
+      </div>
     </li>
   )
 }
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
index 12fb14d4b..ffce6ef25 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx
@@ -8,7 +8,9 @@ export const ModerationFeedback = (props) => {
     delete: django.gettext('delete'),
     edit: django.gettext('edit'),
     feedbackTitle: django.gettext('Moderator\'s feedback'),
-    editWasOn: django.gettext('Last edit was on ')
+    editWasOn: django.gettext('Last edit was on '),
+    feedbackMenu: django.gettext('Feedback menu')
+
   }
 
   return (
@@ -21,7 +23,7 @@ export const ModerationFeedback = (props) => {
           <div className="text-end">
             <div className="dropdown">
               <button
-                title="{% trans 'Feedback menu' %}"
+                title={translated.feedbackMenu}
                 type="button"
                 className="dropdown-toggle btn btn--none"
                 aria-haspopup="true"
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
index c6fab147e..bde014b75 100644
--- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
+++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
@@ -23,6 +23,7 @@ const translated = {
   notificationUnread: django.gettext('Notification successfully marked as unread.'),
   aiClassified: django.gettext('AI'),
   postedComment: django.gettext('posted a {}comment{}'),
+  notificationMenu: django.gettext('Notification menu'),
   dummyText: django.gettext('Dummy text')
 
 }
@@ -272,7 +273,7 @@ export const ModerationNotification = (props) => {
           <div className="ms-auto">
             <div className="dropdown">
               <button
-                title="{% trans 'Notification menu' %}"
+                title={translated.notificationMenu}
                 type="button"
                 className="dropdown-toggle btn btn--none"
                 aria-haspopup="true"
@@ -307,7 +308,10 @@ export const ModerationNotification = (props) => {
           <p>{commentText}</p>
         </li>
         {/* FIXME add if once report added to serializer */}
-        <AiReportExplanation AiReport={translated.dummyText} />
+        <AiReportExplanation
+          AiReport={translated.dummyText}
+          notificationPk={notification.pk}
+        />
         <ModerationNotificationActionsBar
           itemPk={notification.pk}
           isEditing={notification.moderator_feedback}