Merge pull request ucfopen#1062 from mbusch3/text-descriptions-and-integration

Finished text summaries and descriptions, adds ability to link text from other issues when it's repeated.

Author: dmols

assets/js/Components/Forms/FormClarification.js

@@ -16,16 +16,31 @@ export default function FormClarification({
 
     // Compute what additional clarification text to show, if any.
     // First priority: Rule-specific descriptions from the translation file.
-    const clarificationTag = 'rule.desc.' + activeIssue.scanRuleId
+    const clarificationTag = 'rule.info.' + activeIssue.scanRuleId
     let messageArgs = {}
     if(activeIssue?.issueData?.metadata) {
       let metadata = JSON.parse(activeIssue.issueData.metadata)
-      if(activeIssue.scanRuleId === 'text_quoted_correctly') {
-        let quoteList = metadata.messageArgs.join(', ')
-        messageArgs = { 'potentialQuotes': quoteList }
-      }
-      if(activeIssue.scanRuleId === 'aria_role_valid') {
-        messageArgs = { 'tagName': metadata.messageArgs[1], 'ariaRole': metadata.messageArgs[0] }
+      switch(activeIssue.scanRuleId) {
+        case 'aria_child_valid':
+          messageArgs = { 'parentRole': metadata.messageArgs[0], 'childRole': metadata.messageArgs[1] }
+          break
+        case 'aria_parent_required':
+          messageArgs = { 'childRole': metadata.messageArgs[0], 'parentRole': metadata.messageArgs[1] }
+          break
+        case 'aria_role_valid':
+          messageArgs = { 'ariaRole': metadata.messageArgs[0], 'tagName': metadata.messageArgs[1] }
+          break
+        case 'aria_attribute_redundant':
+          messageArgs = { 'ariaAttribute': metadata.messageArgs[0], 'htmlAttribute': metadata.messageArgs[1] }
+          break
+        case 'rule.info.aria_attribute_conflict':
+          messageArgs = { 'ariaAttribute': metadata.messageArgs[0], 'tagName': metadata.messageArgs[1] }
+          break
+        case 'text_quoted_correctly':
+          messageArgs = { 'potentialQuotes': metadata.messageArgs.join(', ') }
+          break
+        default:
+          messageArgs = {}
       }
     }
 
@@ -36,16 +51,6 @@ export default function FormClarification({
       return
     }
 
-    // If there isn't a specific description from us, check for one in the 
-    const formName = formNameFromRule(activeIssue.scanRuleId)
-    if(formName === 'review_only') {
-      // There may be specific (ENGLISH-ONLY) text from the Equal Access scan.
-      const metadata = activeIssue?.issueData?.metadata ? JSON.parse(activeIssue.issueData.metadata) : {}
-      if(metadata.message && metadata.message !== "") {
-        setClarification(metadata.message)
-        return
-      }
-    }
     setClarification('')
 
   }, [activeIssue])
@@ -59,7 +64,7 @@ export default function FormClarification({
               <InfoIcon className="icon-lg udoit-suggestion" alt="" />
             </div>
             <div className="flex-column justify-content-center">
-              <div className="clarification-text">{clarification}</div>
+              <div className="clarification-text" dangerouslySetInnerHTML={{__html: clarification}} />
             </div>
           </div>
         </div>

assets/js/Components/Icons/DisabilityLanguageIcon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function DisabilityLanguageIcon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" {...props}><path d="m603-202-34 97q-4 11-14 18t-22 7q-20 0-32.5-16.5T496-133l152-402q5-11 15-18t22-7h30q12 0 22 7t15 18l152 403q8 19-4 35.5T868-80q-13 0-22.5-7T831-106l-34-96H603ZM362-401 188-228q-11 11-27.5 11.5T132-228q-11-11-11-28t11-28l174-174q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H80q-17 0-28.5-11.5T40-760q0-17 11.5-28.5T80-800h240v-40q0-17 11.5-28.5T360-880q17 0 28.5 11.5T400-840v40h240q17 0 28.5 11.5T680-760q0 17-11.5 28.5T640-720h-76q-21 72-63 148t-83 116l96 98-30 82-122-125Zm266 129h144l-72-204-72 204Z"/></svg>
+  )
+}

assets/js/Components/Widgets/UfixitWidget.css

@@ -27,10 +27,15 @@
   text-transform: uppercase;
 }
 
-.dialog-indicator-container {
+.dialog-indicator-background {
   background-color: var(--gray-darker);
   margin: 0 -1rem;
   padding: .5rem 1rem;
+}
+
+.dialog-indicator-container {
+  max-width: calc(40em / .9);
+  margin: 0 auto;  
   color: var(--white);
   font-size: .9em;
   font-weight: 600;
@@ -212,7 +217,8 @@
 }
 
 .ufixit-learn-container {
-  max-width: 600px;
+  max-width: 40em;
+  margin: 0 auto;
 
   a {
     color: var(--link-color);
@@ -252,8 +258,8 @@
     tbody tr {
       color: var(--text-color);
 
-      &:nth-child(odd) {
-        background-color: var(--white);
+      &:nth-child(even) {
+        background-color: var(--background-color);
       }
 
       td {
@@ -289,7 +295,7 @@
 }
 
 .url-container {
-  background-color: var(--gray-lighter);
+  background-color: var(--gray-light);
   padding: .25em .5em;
   border-radius: 8px;
 }
@@ -321,7 +327,7 @@
 
 dialog {
   width: 90vw;
-  max-width: 70ch;
+  max-width: 50em;
   overflow-y: auto;
   box-sizing: border-box;
   border: none;
@@ -336,6 +342,11 @@ dialog {
   height: 70vh;
   max-height: 650px;
   overflow-y: auto;
+
+  h4 {
+    font-weight: 600;
+    margin-top: .25em;
+  }
 }
 
 .ufixit-widget-dialog-header {
@@ -373,6 +384,11 @@ dialog {
     color: var(--white);
     border-radius: 4px;
     font-size: 0.9em;
+
+    strong {
+      font-weight: 400;
+      text-decoration: underline;
+    }
   }
 
 dialog::backdrop {

assets/js/Components/Widgets/UfixitWidget.js

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react'
 import CloseIcon from '../Icons/CloseIcon'
 import DisabilityCognitiveIcon from '../Icons/DisabilityCognitiveIcon'
 import DisabilityHearingIcon from '../Icons/DisabilityHearingIcon'
+import DisabilityLanguageIcon from '../Icons/DisabilityLanguageIcon'
 import DisabilityMotorIcon from '../Icons/DisabilityMotorIcon'
 import DisabilityVisualIcon from '../Icons/DisabilityVisualIcon'
 import FormClarification from '../Forms/FormClarification'
 import FileForm from '../Forms/FileForm'
-import { disabilityTypes, disabilitiesFromRule, formFromIssue, formNameFromRule } from '../../Services/Ufixit'
+import { disabilityTypes, disabilitiesFromRule, formFromIssue, formNameFromRule, sharedRuleDescriptions, sharedRuleSummaries } from '../../Services/Ufixit'
 import './UfixitWidget.css'
 
 
@@ -31,8 +32,6 @@ export default function UfixitWidget({
   const [UfixitForm, setUfixitForm] = useState(null)
   const [formSummary, setFormSummary] = useState('')
   const [formLearnMore, setFormLearnMore] = useState('')
-  const [showClarification, setShowClarification] = useState(false)
-  const [showLearnMore, setShowLearnMore] = useState(false)
   const [disabilities, setDisabilities] = useState([])
   const [markAsReviewed, setMarkAsReviewed] = useState(false)
 
@@ -73,37 +72,53 @@ export default function UfixitWidget({
       setUfixitForm(() => { return FileForm })
       setFormSummary(t('form.file.summary'))
       setFormLearnMore(t(`form.file.${tempActiveIssue.fileData.fileType}.learn_more`))
-      setShowClarification(false)
-      setShowLearnMore(true)
       setDisabilities([disabilityTypes.COGNITIVE, disabilityTypes.VISUAL])
     }
     else {
       setUfixitForm(() => formFromIssue(tempActiveIssue.issueData))
       setDisabilities(disabilitiesFromRule(tempActiveIssue.scanRuleId))
       let tempFormName = formNameFromRule(tempActiveIssue.scanRuleId)
-      if(tempFormName === 'review_only') {
-        setShowClarification(false)
-        let ruleSummary = t(`rule.summary.${tempActiveIssue.scanRuleId}`)
-        if(ruleSummary === `rule.summary.${tempActiveIssue.scanRuleId}`) {
-          ruleSummary = formatEqualAccessMessage()
-        }
-        setFormSummary(ruleSummary)
+      let tempSummaryKey = ''
+      let tempDescriptionKey = ''
+      
+      // ALL complete forms should have a summary and 'learn more' description.
+      if(tempFormName !== 'review_only') {
+        tempSummaryKey = `form.${tempFormName}.summary`
+        tempDescriptionKey = `form.${tempFormName}.learn_more`
+      }
+      else {
+        tempSummaryKey = `rule.summary.${tempActiveIssue.scanRuleId}`
+        tempDescriptionKey = `rule.desc.${tempActiveIssue.scanRuleId}`
+      }
+
+      let tempSummary = t(tempSummaryKey)
+      let tempDescription = t(tempDescriptionKey)
 
-        let ruleLearnMore = t(`rule.desc.${tempActiveIssue.scanRuleId}`)
-        if(ruleLearnMore === `rule.desc.${tempActiveIssue.scanRuleId}`) {
-          setShowLearnMore(false)
+      // If there isn't a specific summary for this rule, it may be using a shared summary.
+      if(tempSummary === tempSummaryKey) {
+        if(sharedRuleSummaries.hasOwnProperty(tempActiveIssue.scanRuleId)) {
+          tempSummary = t(sharedRuleSummaries[tempActiveIssue.scanRuleId])
         }
+
+        // If there STILL isn't a specific summary for this rule, check to see if there's something in the metadata from Equal Access.
+        // THIS IS NOT TRANSLATED, so it will only work in English.
         else {
-          setShowLearnMore(true)
+          tempSummary = formatEqualAccessMessage()
         }
-        setFormLearnMore(ruleLearnMore)
       }
-      else {
-        setFormSummary(t(`form.${tempFormName}.summary`))
-        setFormLearnMore(t(`form.${tempFormName}.learn_more`))
-        setShowClarification(true)
-        setShowLearnMore(true)
+
+      // If there isn't a specific description for this rule, it may be using a shared description.
+      if(tempDescription === tempDescriptionKey) {
+        if(sharedRuleDescriptions.hasOwnProperty(tempActiveIssue.scanRuleId)) {
+          tempDescription = t(sharedRuleDescriptions[tempActiveIssue.scanRuleId])
+        }
+        else {
+          tempDescription = ''
+        }
       }
+      
+      setFormSummary(tempSummary)
+      setFormLearnMore(tempDescription)
     }
   }, [tempActiveIssue])
 
@@ -159,19 +174,17 @@ export default function UfixitWidget({
                 <div className="ufixit-instructions" 
                   dangerouslySetInnerHTML={{__html: formSummary}}
                 />
-                { showLearnMore && (
+                { formLearnMore !== "" && (
                   <div className="flex-row justify-content-end mt-2">
                     <button className="btn-link btn-small p-0" onClick={() => setShowLongDesc(true)}>
                       <div>{t('fix.button.learn_more')}</div>
                     </button>
                   </div>
                 )}
-                { showClarification && (
-                  <FormClarification
-                    t={t}
-                    activeIssue={tempActiveIssue}
-                  />
-                )}
+                <FormClarification
+                  t={t}
+                  activeIssue={tempActiveIssue}
+                />
               </div>
 
               <div className="ufixit-widget-label primary mb-1">{t('fix.label.barrier_repair')}</div>
@@ -217,37 +230,47 @@ export default function UfixitWidget({
                 </div>
               </div>
               <div className="ufixit-widget-dialog-content flex-column flex-grow-1">
-                { disabilities.length > 0 && (<div className="dialog-indicator-container flex-row gap-2">
-                  <div className="flex-column align-self-center flex-shrink-0">
-                    {t('fix.label.affected')}
-                  </div>
-                  <div className="flex-row flex-wrap gap-1">
-                    {disabilities.includes(disabilityTypes.VISUAL) && (  
-                      <div className='indicator-container active'>
-                        <DisabilityVisualIcon className="icon-md pe-2" alt=""/>
-                        <div className="flex-column align-self-center">{t('fix.label.disability.visual')}</div>
-                      </div>
-                    )}
-                    {disabilities.includes(disabilityTypes.HEARING) && (
-                      <div className='indicator-container active'>
-                        <DisabilityHearingIcon className="icon-md pe-2" alt=""/>
-                        <div className="flex-column align-self-center">{t('fix.label.disability.hearing')}</div>
+                { disabilities.length > 0 && (
+                  <div className="dialog-indicator-background">
+                    <div className="dialog-indicator-container flex-row gap-2">
+                      <div className="flex-column align-self-center flex-shrink-0">
+                        {t('fix.label.affected')}
                       </div>
-                    )}
-                    {disabilities.includes(disabilityTypes.MOTOR) && (
-                      <div className='indicator-container active'>
-                        <DisabilityMotorIcon className="icon-md pe-2" alt=""/>
-                        <div className="flex-column align-self-center">{t('fix.label.disability.motor')}</div>
+                      <div className="flex-row flex-wrap gap-1">
+                        {disabilities.includes(disabilityTypes.VISUAL) && (  
+                          <div className='indicator-container active'>
+                            <DisabilityVisualIcon className="icon-md pe-2" alt=""/>
+                            <div className="flex-column align-self-center">{t('fix.label.disability.visual')}</div>
+                          </div>
+                        )}
+                        {disabilities.includes(disabilityTypes.HEARING) && (
+                          <div className='indicator-container active'>
+                            <DisabilityHearingIcon className="icon-md pe-2" alt=""/>
+                            <div className="flex-column align-self-center">{t('fix.label.disability.hearing')}</div>
+                          </div>
+                        )}
+                        {disabilities.includes(disabilityTypes.LANGUAGE) && (
+                          <div className='indicator-container active'>
+                            <DisabilityLanguageIcon className="icon-md pe-2" alt=""/>
+                            <div className="flex-column align-self-center">{t('fix.label.disability.language')}</div>
+                          </div>
+                        )}
+                        {disabilities.includes(disabilityTypes.MOTOR) && (
+                          <div className='indicator-container active'>
+                            <DisabilityMotorIcon className="icon-md pe-2" alt=""/>
+                            <div className="flex-column align-self-center">{t('fix.label.disability.motor')}</div>
+                          </div>
+                        )}
+                        {disabilities.includes(disabilityTypes.COGNITIVE) && (
+                          <div className='indicator-container active'>
+                            <DisabilityCognitiveIcon className="icon-md pe-2" alt=""/>
+                            <div className="flex-column align-self-center">{t('fix.label.disability.cognitive')}</div>
+                          </div>
+                        )}
                       </div>
-                    )}
-                    {disabilities.includes(disabilityTypes.COGNITIVE) && (
-                      <div className='indicator-container active'>
-                        <DisabilityCognitiveIcon className="icon-md pe-2" alt=""/>
-                        <div className="flex-column align-self-center">{t('fix.label.disability.cognitive')}</div>
-                      </div>
-                    )}
+                    </div>
                   </div>
-                </div>)}
+                )}
                 <div className="flex-grow-1 flex-column ufixit-learn-container pt-3 pb-3"
                   dangerouslySetInnerHTML={{__html: formLearnMore }} />
                 <div className="flex-row justify-content-center mb-3">