Skip to content

Commit 7b3948e

Browse files
RobOBrienRobOBrien
authored
Merge pull request #1 from Conductor-Codes/accessibility
accessibility
2 parents e3f4a29 + 5c0cb46 commit 7b3948e

File tree

2 files changed

+180
-39
lines changed

2 files changed

+180
-39
lines changed

‎app.js‎

Lines changed: 176 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,36 @@ const businessMetrics = {
6666
},
6767
unit: "ms",
6868
revImpact: "$180,000"
69+
},
70+
{
71+
id: "accessibility_score",
72+
name: "Accessibility Score",
73+
description: "Overall accessibility compliance score based on WCAG guidelines",
74+
values: {
75+
sixMonthsAgo: "78",
76+
threeMonthsAgo: "72",
77+
current: "65"
78+
},
79+
unit: "",
80+
revImpact: "$10,000"
6981
}
7082
]
7183
},
7284
bounce_rate: {
7385
name: "Bounce Rate",
7486
functions: [
87+
{
88+
id: "accessibility_score",
89+
name: "Accessibility Score",
90+
description: "Overall accessibility compliance score based on WCAG guidelines",
91+
values: {
92+
sixMonthsAgo: "82",
93+
threeMonthsAgo: "76",
94+
current: "71"
95+
},
96+
unit: "",
97+
revImpact: "$190,000"
98+
},
7599
{
76100
id: "largest_contentful_paint",
77101
name: "Avg Largest Contentful Paint",
@@ -113,6 +137,18 @@ const businessMetrics = {
113137
page_views: {
114138
name: "Page Views",
115139
functions: [
140+
{
141+
id: "accessibility_score",
142+
name: "Accessibility Score",
143+
description: "Overall accessibility compliance score based on WCAG guidelines",
144+
values: {
145+
sixMonthsAgo: "81",
146+
threeMonthsAgo: "75",
147+
current: "68"
148+
},
149+
unit: "",
150+
revImpact: "$210,000"
151+
},
116152
{
117153
id: "largest_contentful_paint",
118154
name: "Avg Largest Contentful Paint",
@@ -157,16 +193,28 @@ const businessMetrics = {
157193
let selectedBusinessMetric = null;
158194

159195
// Function to get trend class based on values
160-
function getTrendClass(currentValue, previousValue) {
196+
function getTrendClass(currentValue, previousValue, isAccessibilityScore = false) {
161197
const current = parseFloat(currentValue.split(' ')[0]);
162198
const previous = parseFloat(previousValue.split(' ')[0]);
163199

164-
if (current > previous) {
165-
return 'trend-worse';
166-
} else if (current < previous) {
167-
return 'trend-better';
200+
// For accessibility scores, higher is better (opposite of performance metrics)
201+
if (isAccessibilityScore) {
202+
if (current > previous) {
203+
return 'trend-better';
204+
} else if (current < previous) {
205+
return 'trend-worse';
206+
} else {
207+
return 'trend-neutral';
208+
}
168209
} else {
169-
return 'trend-neutral';
210+
// For performance metrics, lower is better
211+
if (current > previous) {
212+
return 'trend-worse';
213+
} else if (current < previous) {
214+
return 'trend-better';
215+
} else {
216+
return 'trend-neutral';
217+
}
170218
}
171219
}
172220

@@ -268,6 +316,11 @@ document.addEventListener('DOMContentLoaded', () => {
268316
}
269317
});
270318

319+
// If no URLs were provided, add a default one
320+
if (userUrls.length === 0) {
321+
userUrls.push('https://example.com/page');
322+
}
323+
271324
// Hide URL config section
272325
urlConfigSection.classList.add('hidden');
273326

@@ -282,17 +335,17 @@ document.addEventListener('DOMContentLoaded', () => {
282335
issue: "Under analysis"
283336
}));
284337

285-
// Generate URL-specific metrics data that averages to the parent metrics
286-
const metrics = businessMetrics[selectedBusinessMetric].functions;
287-
metrics.forEach(metric => {
288-
// Reset URL specific values whenever we regenerate
289-
metric.urlSpecificValues = [];
290-
291-
const sixMonthsAgoBase = parseFloat(metric.values.sixMonthsAgo.split(' ')[0]);
292-
const threeMonthsAgoBase = parseFloat(metric.values.threeMonthsAgo.split(' ')[0]);
293-
const currentBase = parseFloat(metric.values.current.split(' ')[0]);
294-
const unit = metric.values.sixMonthsAgo.includes(' ') ?
295-
metric.values.sixMonthsAgo.split(' ')[1] : metric.unit;
338+
// Generate URL-specific metrics data that averages to the parent metrics
339+
const metrics = businessMetrics[selectedBusinessMetric].functions;
340+
metrics.forEach(metric => {
341+
// Reset URL specific values whenever we regenerate
342+
metric.urlSpecificValues = [];
343+
344+
const sixMonthsAgoBase = parseFloat(metric.values.sixMonthsAgo.split(' ')[0]);
345+
const threeMonthsAgoBase = parseFloat(metric.values.threeMonthsAgo.split(' ')[0]);
346+
const currentBase = parseFloat(metric.values.current.split(' ')[0]);
347+
const unit = metric.values.sixMonthsAgo.includes(' ') ?
348+
metric.values.sixMonthsAgo.split(' ')[1] : '';
296349

297350
// Generate random variations that average out to the parent value
298351
const numUrls = userUrls.length;
@@ -514,9 +567,10 @@ document.addEventListener('DOMContentLoaded', () => {
514567
row.className = 'parent-row';
515568
row.setAttribute('data-function-id', func.id);
516569

517-
// Get trend classes for 3-month and current values
518-
const trendClassThreeMonths = getTrendClass(func.values.threeMonthsAgo, func.values.sixMonthsAgo);
519-
const trendClassCurrent = getTrendClass(func.values.current, func.values.threeMonthsAgo);
570+
// Get trend classes for 3-month and current values - check if it's accessibility score
571+
const isAccessibility = func.id === 'accessibility_score';
572+
const trendClassThreeMonths = getTrendClass(func.values.threeMonthsAgo, func.values.sixMonthsAgo, isAccessibility);
573+
const trendClassCurrent = getTrendClass(func.values.current, func.values.threeMonthsAgo, isAccessibility);
520574

521575
row.innerHTML = `
522576
<td>
@@ -545,14 +599,17 @@ document.addEventListener('DOMContentLoaded', () => {
545599

546600
functionsList.appendChild(row);
547601

548-
// Add click event for parent row to expand/collapse
549-
row.addEventListener('click', (e) => {
550-
// Don't trigger when clicking on specific elements
551-
if (e.target.tagName === 'BUTTON') {
552-
return;
553-
}
554-
555-
const expandIcon = row.querySelector('.expand-icon');
602+
// Add click event for parent row to expand/collapse
603+
row.addEventListener('click', (e) => {
604+
// Don't trigger when clicking on specific elements
605+
if (e.target.tagName === 'BUTTON') {
606+
return;
607+
}
608+
609+
// Remove the immediate diagnostics display when clicking the main accessibility row
610+
// Instead, we'll only show diagnostics when clicking on URL subrows
611+
612+
const expandIcon = row.querySelector('.expand-icon');
556613

557614
// Toggle expanded state
558615
if (row.classList.contains('expanded')) {
@@ -575,6 +632,41 @@ document.addEventListener('DOMContentLoaded', () => {
575632
row.classList.add('expanded');
576633
expandIcon.textContent = '-';
577634

635+
// If this is the accessibility score, always create sample URL rows
636+
if (func.id === 'accessibility_score') {
637+
// Create sample URL entries for accessibility score
638+
func.urlSpecificValues = [
639+
{
640+
url: 'https://example.com/homepage',
641+
values: {
642+
sixMonthsAgo: '76',
643+
threeMonthsAgo: '70',
644+
current: '63'
645+
}
646+
},
647+
{
648+
url: 'https://example.com/product',
649+
values: {
650+
sixMonthsAgo: '80',
651+
threeMonthsAgo: '74',
652+
current: '67'
653+
}
654+
}
655+
];
656+
657+
// If user added URLs, replace our samples
658+
if (userUrls && userUrls.length > 0) {
659+
func.urlSpecificValues = userUrls.map(url => ({
660+
url: url,
661+
values: {
662+
sixMonthsAgo: Math.floor(75 + Math.random() * 10).toString(),
663+
threeMonthsAgo: Math.floor(68 + Math.random() * 10).toString(),
664+
current: Math.floor(60 + Math.random() * 10).toString()
665+
}
666+
}));
667+
}
668+
}
669+
578670
// Add URL-specific rows if available
579671
if (func.urlSpecificValues && func.urlSpecificValues.length > 0) {
580672
func.urlSpecificValues.forEach((urlData, index) => {
@@ -628,6 +720,62 @@ document.addEventListener('DOMContentLoaded', () => {
628720
diagnosticsSection.classList.remove('hidden');
629721
activeRowId = func.id;
630722
activeUrlIndex = index;
723+
724+
// Update diagnostics content based on the function ID
725+
const diagnosticsTableBody = document.getElementById('diagnosticsTableBody');
726+
if (diagnosticsTableBody) {
727+
diagnosticsTableBody.innerHTML = '';
728+
729+
if (func.id === 'accessibility_score') {
730+
// Add accessibility-specific diagnostics
731+
diagnosticsTableBody.innerHTML = `
732+
<tr>
733+
<td>Background and foreground colors do not have a sufficient contrast ratio.</td>
734+
<td>Found on ${Math.floor(Math.random() * 5) + 1} elements</td>
735+
</tr>
736+
<tr>
737+
<td>Heading elements are not in a sequentially-descending order</td>
738+
<td>Found on ${Math.floor(Math.random() * 3) + 1} elements</td>
739+
</tr>
740+
`;
741+
} else if (func.id === 'largest_contentful_paint') {
742+
// Keep existing diagnostics for LCP
743+
diagnosticsTableBody.innerHTML = `
744+
<tr>
745+
<td>Minimize main-thread work</td>
746+
<td>9.8s</td>
747+
</tr>
748+
<tr>
749+
<td>Reduce JavaScript execution time</td>
750+
<td>6.7s</td>
751+
</tr>
752+
`;
753+
} else if (func.id === 'speed_index') {
754+
// Add speed index diagnostics
755+
diagnosticsTableBody.innerHTML = `
756+
<tr>
757+
<td>Eliminate render-blocking resources</td>
758+
<td>Potential savings: 1.2s</td>
759+
</tr>
760+
<tr>
761+
<td>Defer offscreen images</td>
762+
<td>Potential savings: 0.8s</td>
763+
</tr>
764+
`;
765+
} else if (func.id === 'total_blocking_time') {
766+
// Add total blocking time diagnostics
767+
diagnosticsTableBody.innerHTML = `
768+
<tr>
769+
<td>Reduce third-party code impact</td>
770+
<td>Blocking time: 120ms</td>
771+
</tr>
772+
<tr>
773+
<td>Minimize critical request chains</td>
774+
<td>Chains found: 4</td>
775+
</tr>
776+
`;
777+
}
778+
}
631779
});
632780
});
633781
}

‎index.html‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -91,25 +91,18 @@ <h2>Technical Fitness Functions for <span id="businessMetricName">Business Metri
9191
<p class="revenue-note">All potential revenue impact calculations are based on annual revenue of $200M.</p>
9292
</div>
9393

94-
<!-- Diagnostics section that will be shown when clicking on Average Page Load Time -->
94+
<!-- Diagnostics section that will be shown when clicking on a URL row -->
9595
<div class="diagnostics-section hidden" id="diagnosticsSection">
96-
<h3>Diagnostics</h3>
96+
<h3>Detailed Diagnostics</h3>
9797
<table class="diagnostics-table">
9898
<thead>
9999
<tr>
100100
<th>Metric</th>
101101
<th>Value</th>
102102
</tr>
103103
</thead>
104-
<tbody>
105-
<tr>
106-
<td>Minimize main-thread work</td>
107-
<td>9.8s</td>
108-
</tr>
109-
<tr>
110-
<td>Reduce JavaScript execution time</td>
111-
<td>6.7s</td>
112-
</tr>
104+
<tbody id="diagnosticsTableBody">
105+
<!-- Diagnostics will be populated based on the selected metric -->
113106
</tbody>
114107
</table>
115108
</div>

0 commit comments

Comments
 (0)