From 790da2bb02bd6e498da9e1298878d1f5df2d747e 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] 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 +++++++-- .../AIReportExplanation.jsx | 41 +++++++++++++++++++ .../ModerationFeedback.jsx | 4 +- .../ModerationNotification.jsx | 23 +++++++---- .../ModerationNotificationActionsBar.jsx | 4 +- 6 files changed, 76 insertions(+), 17 deletions(-) create mode 100644 apps/userdashboard/assets/js/a4_candy_userdashboard/AIReportExplanation.jsx diff --git a/adhocracy-plus/assets/scss/components/_alerts.scss b/adhocracy-plus/assets/scss/components/_alerts.scss index ae9d1aced..7c5b717f1 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 c976324b6..24ecfde5a 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--none { @@ -104,11 +109,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/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..54a7b7a3c --- /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 ( +
+ {translated.intro + ' '} + {isExpanded && AIReport + ' '} + +
+{feedbackText}
@@ -291,17 +294,19 @@ export const ModerationNotification = (props) => {
{getLink(translatedReportText(numReports), commentUrl)}
-{commentText}
+ } +{commentText}
+