userdashboard/ModerationNotification//AIFeedback: add AI feedback com…

…ponent and add to the ModerationNotification small a11y improvments

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;
 }
 

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

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 {

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>
+  )
+}

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>
   )
 }

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)}

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>
   )
 }