Merge 492e5fb into 0e2d902

liqd · Aug 7, 2023 · dd4de45 · dd4de45
2 parents 0e2d902 + 492e5fb
commit dd4de45
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 22 deletions.
diff --git 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
@@ -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
@@ -337,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/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/contrib/assets/SwitchButton.jsx 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
@@ -0,0 +1,50 @@
+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 ' +
+  '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, notificationPk }) => {
+  const [isExpanded, setIsExpanded] = useState()
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  return (
+    <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
@@ -8,11 +8,13 @@ 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 (
-    <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>
@@ -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"
@@ -68,6 +70,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
@@ -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,10 @@ 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{}'),
+  notificationMenu: django.gettext('Notification menu'),
+  dummyText: django.gettext('Dummy text')
+
 }
 
 export const ModerationNotification = (props) => {
@@ -257,8 +261,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">
@@ -269,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"
@@ -291,17 +295,23 @@ 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}
+          notificationPk={notification.pk}
+        />
         <ModerationNotificationActionsBar
           itemPk={notification.pk}
           isEditing={notification.moderator_feedback}
@@ -320,7 +330,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
@@ -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
@@ -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
@@ -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