Skip to content

Commit ac772f6

Browse files
mbusch3mbusch3
committed
Revert "Add English summaries and descriptions, Ufixit connections and placeholders, new icon."
This reverts commit 20b7fc1.
1 parent 7729eff commit ac772f6

File tree

7 files changed

+395
-887
lines changed

7 files changed

+395
-887
lines changed

‎assets/js/Components/Forms/FormClarification.js‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,16 @@ export default function FormClarification({
1616

1717
// Compute what additional clarification text to show, if any.
1818
// First priority: Rule-specific descriptions from the translation file.
19-
const clarificationTag = 'rule.info.' + activeIssue.scanRuleId
19+
const clarificationTag = 'rule.desc.' + activeIssue.scanRuleId
2020
let messageArgs = {}
2121
if(activeIssue?.issueData?.metadata) {
2222
let metadata = JSON.parse(activeIssue.issueData.metadata)
23-
switch(activeIssue.scanRuleId) {
24-
case 'aria_child_valid':
25-
messageArgs = { 'parentRole': metadata.messageArgs[0], 'childRole': metadata.messageArgs[1] }
26-
break
27-
case 'aria_parent_required':
28-
messageArgs = { 'childRole': metadata.messageArgs[0], 'parentRole': metadata.messageArgs[1] }
29-
break
30-
case 'aria_role_valid':
31-
messageArgs = { 'ariaRole': metadata.messageArgs[0], 'tagName': metadata.messageArgs[1] }
32-
break
33-
case 'aria_attribute_redundant':
34-
messageArgs = { 'ariaAttribute': metadata.messageArgs[0], 'htmlAttribute': metadata.messageArgs[1] }
35-
break
36-
case 'rule.info.aria_attribute_conflict':
37-
messageArgs = { 'ariaAttribute': metadata.messageArgs[0], 'tagName': metadata.messageArgs[1] }
38-
break
39-
case 'text_quoted_correctly':
40-
messageArgs = { 'potentialQuotes': metadata.messageArgs.join(', ') }
41-
break
42-
default:
43-
messageArgs = {}
23+
if(activeIssue.scanRuleId === 'text_quoted_correctly') {
24+
let quoteList = metadata.messageArgs.join(', ')
25+
messageArgs = { 'potentialQuotes': quoteList }
26+
}
27+
if(activeIssue.scanRuleId === 'aria_role_valid') {
28+
messageArgs = { 'tagName': metadata.messageArgs[1], 'ariaRole': metadata.messageArgs[0] }
4429
}
4530
}
4631

@@ -51,6 +36,16 @@ export default function FormClarification({
5136
return
5237
}
5338

39+
// If there isn't a specific description from us, check for one in the
40+
const formName = formNameFromRule(activeIssue.scanRuleId)
41+
if(formName === 'review_only') {
42+
// There may be specific (ENGLISH-ONLY) text from the Equal Access scan.
43+
const metadata = activeIssue?.issueData?.metadata ? JSON.parse(activeIssue.issueData.metadata) : {}
44+
if(metadata.message && metadata.message !== "") {
45+
setClarification(metadata.message)
46+
return
47+
}
48+
}
5449
setClarification('')
5550

5651
}, [activeIssue])
@@ -64,7 +59,7 @@ export default function FormClarification({
6459
<InfoIcon className="icon-lg udoit-suggestion" alt="" />
6560
</div>
6661
<div className="flex-column justify-content-center">
67-
<div className="clarification-text" dangerouslySetInnerHTML={{__html: clarification}} />
62+
<div className="clarification-text">{clarification}</div>
6863
</div>
6964
</div>
7065
</div>

‎assets/js/Components/Icons/DisabilityLanguageIcon.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎assets/js/Components/Widgets/UfixitWidget.css‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,10 @@
2727
text-transform: uppercase;
2828
}
2929

30-
.dialog-indicator-background {
30+
.dialog-indicator-container {
3131
background-color: var(--gray-darker);
3232
margin: 0 -1rem;
3333
padding: .5rem 1rem;
34-
}
35-
36-
.dialog-indicator-container {
37-
max-width: calc(40em / .9);
38-
margin: 0 auto;
3934
color: var(--white);
4035
font-size: .9em;
4136
font-weight: 600;
@@ -217,8 +212,7 @@
217212
}
218213

219214
.ufixit-learn-container {
220-
max-width: 40em;
221-
margin: 0 auto;
215+
max-width: 600px;
222216

223217
a {
224218
color: var(--link-color);
@@ -258,8 +252,8 @@
258252
tbody tr {
259253
color: var(--text-color);
260254

261-
&:nth-child(even) {
262-
background-color: var(--background-color);
255+
&:nth-child(odd) {
256+
background-color: var(--white);
263257
}
264258

265259
td {
@@ -295,7 +289,7 @@
295289
}
296290

297291
.url-container {
298-
background-color: var(--gray-light);
292+
background-color: var(--gray-lighter);
299293
padding: .25em .5em;
300294
border-radius: 8px;
301295
}
@@ -327,7 +321,7 @@
327321

328322
dialog {
329323
width: 90vw;
330-
max-width: 50em;
324+
max-width: 70ch;
331325
overflow-y: auto;
332326
box-sizing: border-box;
333327
border: none;
@@ -342,11 +336,6 @@ dialog {
342336
height: 70vh;
343337
max-height: 650px;
344338
overflow-y: auto;
345-
346-
h4 {
347-
font-weight: 600;
348-
margin-top: .25em;
349-
}
350339
}
351340

352341
.ufixit-widget-dialog-header {
@@ -384,11 +373,6 @@ dialog {
384373
color: var(--white);
385374
border-radius: 4px;
386375
font-size: 0.9em;
387-
388-
strong {
389-
font-weight: 400;
390-
text-decoration: underline;
391-
}
392376
}
393377

394378
dialog::backdrop {

‎assets/js/Components/Widgets/UfixitWidget.js‎

Lines changed: 57 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import React, { useState, useEffect } from 'react'
22
import CloseIcon from '../Icons/CloseIcon'
33
import DisabilityCognitiveIcon from '../Icons/DisabilityCognitiveIcon'
44
import DisabilityHearingIcon from '../Icons/DisabilityHearingIcon'
5-
import DisabilityLanguageIcon from '../Icons/DisabilityLanguageIcon'
65
import DisabilityMotorIcon from '../Icons/DisabilityMotorIcon'
76
import DisabilityVisualIcon from '../Icons/DisabilityVisualIcon'
87
import FormClarification from '../Forms/FormClarification'
98
import FileForm from '../Forms/FileForm'
10-
import { disabilityTypes, disabilitiesFromRule, formFromIssue, formNameFromRule, sharedRuleDescriptions, sharedRuleSummaries } from '../../Services/Ufixit'
9+
import { disabilityTypes, disabilitiesFromRule, formFromIssue, formNameFromRule } from '../../Services/Ufixit'
1110
import './UfixitWidget.css'
1211

1312

@@ -32,6 +31,8 @@ export default function UfixitWidget({
3231
const [UfixitForm, setUfixitForm] = useState(null)
3332
const [formSummary, setFormSummary] = useState('')
3433
const [formLearnMore, setFormLearnMore] = useState('')
34+
const [showClarification, setShowClarification] = useState(false)
35+
const [showLearnMore, setShowLearnMore] = useState(false)
3536
const [disabilities, setDisabilities] = useState([])
3637
const [markAsReviewed, setMarkAsReviewed] = useState(false)
3738

@@ -72,53 +73,37 @@ export default function UfixitWidget({
7273
setUfixitForm(() => { return FileForm })
7374
setFormSummary(t('form.file.summary'))
7475
setFormLearnMore(t(`form.file.${tempActiveIssue.fileData.fileType}.learn_more`))
76+
setShowClarification(false)
77+
setShowLearnMore(true)
7578
setDisabilities([disabilityTypes.COGNITIVE, disabilityTypes.VISUAL])
7679
}
7780
else {
7881
setUfixitForm(() => formFromIssue(tempActiveIssue.issueData))
7982
setDisabilities(disabilitiesFromRule(tempActiveIssue.scanRuleId))
8083
let tempFormName = formNameFromRule(tempActiveIssue.scanRuleId)
81-
let tempSummaryKey = ''
82-
let tempDescriptionKey = ''
83-
84-
// ALL complete forms should have a summary and 'learn more' description.
85-
if(tempFormName !== 'review_only') {
86-
tempSummaryKey = `form.${tempFormName}.summary`
87-
tempDescriptionKey = `form.${tempFormName}.learn_more`
88-
}
89-
else {
90-
tempSummaryKey = `rule.summary.${tempActiveIssue.scanRuleId}`
91-
tempDescriptionKey = `rule.desc.${tempActiveIssue.scanRuleId}`
92-
}
93-
94-
let tempSummary = t(tempSummaryKey)
95-
let tempDescription = t(tempDescriptionKey)
96-
97-
// If there isn't a specific summary for this rule, it may be using a shared summary.
98-
if(tempSummary === tempSummaryKey) {
99-
if(sharedRuleSummaries.hasOwnProperty(tempActiveIssue.scanRuleId)) {
100-
tempSummary = t(sharedRuleSummaries[tempActiveIssue.scanRuleId])
84+
if(tempFormName === 'review_only') {
85+
setShowClarification(false)
86+
let ruleSummary = t(`rule.summary.${tempActiveIssue.scanRuleId}`)
87+
if(ruleSummary === `rule.summary.${tempActiveIssue.scanRuleId}`) {
88+
ruleSummary = formatEqualAccessMessage()
10189
}
90+
setFormSummary(ruleSummary)
10291

103-
// If there STILL isn't a specific summary for this rule, check to see if there's something in the metadata from Equal Access.
104-
// THIS IS NOT TRANSLATED, so it will only work in English.
105-
else {
106-
tempSummary = formatEqualAccessMessage()
107-
}
108-
}
109-
110-
// If there isn't a specific description for this rule, it may be using a shared description.
111-
if(tempDescription === tempDescriptionKey) {
112-
if(sharedRuleDescriptions.hasOwnProperty(tempActiveIssue.scanRuleId)) {
113-
tempDescription = t(sharedRuleDescriptions[tempActiveIssue.scanRuleId])
92+
let ruleLearnMore = t(`rule.desc.${tempActiveIssue.scanRuleId}`)
93+
if(ruleLearnMore === `rule.desc.${tempActiveIssue.scanRuleId}`) {
94+
setShowLearnMore(false)
11495
}
11596
else {
116-
tempDescription = ''
97+
setShowLearnMore(true)
11798
}
99+
setFormLearnMore(ruleLearnMore)
100+
}
101+
else {
102+
setFormSummary(t(`form.${tempFormName}.summary`))
103+
setFormLearnMore(t(`form.${tempFormName}.learn_more`))
104+
setShowClarification(true)
105+
setShowLearnMore(true)
118106
}
119-
120-
setFormSummary(tempSummary)
121-
setFormLearnMore(tempDescription)
122107
}
123108
}, [tempActiveIssue])
124109

@@ -174,17 +159,19 @@ export default function UfixitWidget({
174159
<div className="ufixit-instructions"
175160
dangerouslySetInnerHTML={{__html: formSummary}}
176161
/>
177-
{ formLearnMore !== "" && (
162+
{ showLearnMore && (
178163
<div className="flex-row justify-content-end mt-2">
179164
<button className="btn-link btn-small p-0" onClick={() => setShowLongDesc(true)}>
180165
<div>{t('fix.button.learn_more')}</div>
181166
</button>
182167
</div>
183168
)}
184-
<FormClarification
185-
t={t}
186-
activeIssue={tempActiveIssue}
187-
/>
169+
{ showClarification && (
170+
<FormClarification
171+
t={t}
172+
activeIssue={tempActiveIssue}
173+
/>
174+
)}
188175
</div>
189176

190177
<div className="ufixit-widget-label primary mb-1">{t('fix.label.barrier_repair')}</div>
@@ -230,47 +217,37 @@ export default function UfixitWidget({
230217
</div>
231218
</div>
232219
<div className="ufixit-widget-dialog-content flex-column flex-grow-1">
233-
{ disabilities.length > 0 && (
234-
<div className="dialog-indicator-background">
235-
<div className="dialog-indicator-container flex-row gap-2">
236-
<div className="flex-column align-self-center flex-shrink-0">
237-
{t('fix.label.affected')}
220+
{ disabilities.length > 0 && (<div className="dialog-indicator-container flex-row gap-2">
221+
<div className="flex-column align-self-center flex-shrink-0">
222+
{t('fix.label.affected')}
223+
</div>
224+
<div className="flex-row flex-wrap gap-1">
225+
{disabilities.includes(disabilityTypes.VISUAL) && (
226+
<div className='indicator-container active'>
227+
<DisabilityVisualIcon className="icon-md pe-2" alt=""/>
228+
<div className="flex-column align-self-center">{t('fix.label.disability.visual')}</div>
229+
</div>
230+
)}
231+
{disabilities.includes(disabilityTypes.HEARING) && (
232+
<div className='indicator-container active'>
233+
<DisabilityHearingIcon className="icon-md pe-2" alt=""/>
234+
<div className="flex-column align-self-center">{t('fix.label.disability.hearing')}</div>
238235
</div>
239-
<div className="flex-row flex-wrap gap-1">
240-
{disabilities.includes(disabilityTypes.VISUAL) && (
241-
<div className='indicator-container active'>
242-
<DisabilityVisualIcon className="icon-md pe-2" alt=""/>
243-
<div className="flex-column align-self-center">{t('fix.label.disability.visual')}</div>
244-
</div>
245-
)}
246-
{disabilities.includes(disabilityTypes.HEARING) && (
247-
<div className='indicator-container active'>
248-
<DisabilityHearingIcon className="icon-md pe-2" alt=""/>
249-
<div className="flex-column align-self-center">{t('fix.label.disability.hearing')}</div>
250-
</div>
251-
)}
252-
{disabilities.includes(disabilityTypes.LANGUAGE) && (
253-
<div className='indicator-container active'>
254-
<DisabilityLanguageIcon className="icon-md pe-2" alt=""/>
255-
<div className="flex-column align-self-center">{t('fix.label.disability.language')}</div>
256-
</div>
257-
)}
258-
{disabilities.includes(disabilityTypes.MOTOR) && (
259-
<div className='indicator-container active'>
260-
<DisabilityMotorIcon className="icon-md pe-2" alt=""/>
261-
<div className="flex-column align-self-center">{t('fix.label.disability.motor')}</div>
262-
</div>
263-
)}
264-
{disabilities.includes(disabilityTypes.COGNITIVE) && (
265-
<div className='indicator-container active'>
266-
<DisabilityCognitiveIcon className="icon-md pe-2" alt=""/>
267-
<div className="flex-column align-self-center">{t('fix.label.disability.cognitive')}</div>
268-
</div>
269-
)}
236+
)}
237+
{disabilities.includes(disabilityTypes.MOTOR) && (
238+
<div className='indicator-container active'>
239+
<DisabilityMotorIcon className="icon-md pe-2" alt=""/>
240+
<div className="flex-column align-self-center">{t('fix.label.disability.motor')}</div>
270241
</div>
271-
</div>
242+
)}
243+
{disabilities.includes(disabilityTypes.COGNITIVE) && (
244+
<div className='indicator-container active'>
245+
<DisabilityCognitiveIcon className="icon-md pe-2" alt=""/>
246+
<div className="flex-column align-self-center">{t('fix.label.disability.cognitive')}</div>
247+
</div>
248+
)}
272249
</div>
273-
)}
250+
</div>)}
274251
<div className="flex-grow-1 flex-column ufixit-learn-container pt-3 pb-3"
275252
dangerouslySetInnerHTML={{__html: formLearnMore }} />
276253
<div className="flex-row justify-content-center mb-3">

0 commit comments

Comments
 (0)