Skip to content

Commit f84b3fd

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #134 from ThisIs-Developer/perf/enterprise-performance-optimization
Performance, UX, and Accessibility Optimizations
2 parents a5571c9 + 1aae08d commit f84b3fd

6 files changed

Lines changed: 54 additions & 22 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -239,8 +239,8 @@ <h5>Menu</h5>
239239
</header>
240240

241241
<!-- Tab Bar -->
242-
<div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
243-
<div class="tab-list" id="tab-list"></div>
242+
<div class="tab-bar" id="tab-bar">
243+
<div class="tab-list" id="tab-list" role="tablist" aria-label="Document tabs"></div>
244244
<button class="tab-reset-btn" id="tab-reset-btn" title="Reset all files" aria-label="Reset all files">
245245
<i class="bi bi-arrow-counterclockwise"></i> Reset
246246
</button>
@@ -778,10 +778,10 @@ <h3 class="modal-section-title">Open-source credits</h3>
778778
</div>
779779
</div>
780780

781-
<div class="content-container">
781+
<main class="content-container">
782782
<div class="editor-pane is-loading">
783783
<div id="line-numbers" class="line-numbers" aria-hidden="true"></div>
784-
<div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true"></div>
784+
<div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true" tabindex="-1"></div>
785785
<div class="editor-skeleton" id="editor-skeleton" aria-hidden="true">
786786
<div class="skeleton-placeholder skeleton-title"></div>
787787
<div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
@@ -818,7 +818,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
818818
</div>
819819
</div>
820820
</div>
821-
</div>
821+
</main>
822822
</div>
823823

824824
<!-- Mermaid Zoom Modal -->

‎desktop-app/resources/js/script.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1518,6 +1518,14 @@ document.addEventListener("DOMContentLoaded", function () {
15181518
enhanceGitHubAlerts(markdownPreview);
15191519

15201520
processEmojis(markdownPreview);
1521+
1522+
// Add accessible dynamic labels to task list checkboxes matching their parent text
1523+
markdownPreview.querySelectorAll('input[type="checkbox"]').forEach(function(input) {
1524+
if (!input.hasAttribute('aria-label')) {
1525+
const parentText = input.parentElement ? input.parentElement.textContent.trim() : '';
1526+
input.setAttribute('aria-label', parentText || 'Task item');
1527+
}
1528+
});
15211529

15221530
// PERF-002: Lazy-load mermaid only when diagrams are present
15231531
try {
@@ -1559,7 +1567,11 @@ document.addEventListener("DOMContentLoaded", function () {
15591567
if (hasMath) {
15601568
if (window.MathJax) {
15611569
try {
1562-
MathJax.typesetPromise([markdownPreview]).catch((err) => {
1570+
MathJax.typesetPromise([markdownPreview]).then(function() {
1571+
markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) {
1572+
mjx.removeAttribute('tabindex');
1573+
});
1574+
}).catch(function(err) {
15631575
console.warn('MathJax typesetting failed:', err);
15641576
});
15651577
} catch (e) {
@@ -1578,7 +1590,11 @@ document.addEventListener("DOMContentLoaded", function () {
15781590
};
15791591
loadScript(CDN.mathjax).then(function() {
15801592
try {
1581-
MathJax.typesetPromise([markdownPreview]).catch(function(err) {
1593+
MathJax.typesetPromise([markdownPreview]).then(function() {
1594+
markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) {
1595+
mjx.removeAttribute('tabindex');
1596+
});
1597+
}).catch(function(err) {
15821598
console.warn('MathJax typesetting failed:', err);
15831599
});
15841600
} catch (e) {

‎desktop-app/resources/styles.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -758,7 +758,7 @@ a:focus {
758758
--color-prettylights-syntax-entity: #6f42c1;
759759
--color-prettylights-syntax-storage-modifier-import: #24292e;
760760
--color-prettylights-syntax-entity-tag: #22863a;
761-
--color-prettylights-syntax-keyword: #d73a49;
761+
--color-prettylights-syntax-keyword: #cf222e;
762762
--color-prettylights-syntax-string: #032f62;
763763
--color-prettylights-syntax-variable: #e36209;
764764
--color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
@@ -1732,7 +1732,7 @@ a:focus {
17321732
display: flex;
17331733
align-items: center;
17341734
gap: 6px;
1735-
height: 27px;
1735+
height: 32px;
17361736
padding: 0 8px 0 10px;
17371737
min-width: 100px;
17381738
max-width: 180px;
@@ -1874,8 +1874,8 @@ a:focus {
18741874
display: flex;
18751875
align-items: center;
18761876
justify-content: center;
1877-
width: 18px;
1878-
height: 18px;
1877+
width: 22px;
1878+
height: 22px;
18791879
border-radius: 3px;
18801880
background: none;
18811881
border: none;

‎index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -298,8 +298,8 @@ <h5>Menu</h5>
298298
</header>
299299

300300
<!-- Tab Bar -->
301-
<div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
302-
<div class="tab-list" id="tab-list"></div>
301+
<div class="tab-bar" id="tab-bar">
302+
<div class="tab-list" id="tab-list" role="tablist" aria-label="Document tabs"></div>
303303
<button class="tab-reset-btn" id="tab-reset-btn" title="Reset all files" aria-label="Reset all files">
304304
<i class="bi bi-arrow-counterclockwise"></i> Reset
305305
</button>
@@ -837,10 +837,10 @@ <h3 class="modal-section-title">Open-source credits</h3>
837837
</div>
838838
</div>
839839

840-
<div class="content-container">
840+
<main class="content-container">
841841
<div class="editor-pane is-loading">
842842
<div id="line-numbers" class="line-numbers" aria-hidden="true"></div>
843-
<div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true"></div>
843+
<div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true" tabindex="-1"></div>
844844
<div class="editor-skeleton" id="editor-skeleton" aria-hidden="true">
845845
<div class="skeleton-placeholder skeleton-title"></div>
846846
<div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
@@ -877,7 +877,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
877877
</div>
878878
</div>
879879
</div>
880-
</div>
880+
</main>
881881
</div>
882882

883883
<!-- Mermaid Zoom Modal -->

‎script.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1518,6 +1518,14 @@ document.addEventListener("DOMContentLoaded", function () {
15181518
enhanceGitHubAlerts(markdownPreview);
15191519

15201520
processEmojis(markdownPreview);
1521+
1522+
// Add accessible dynamic labels to task list checkboxes matching their parent text
1523+
markdownPreview.querySelectorAll('input[type="checkbox"]').forEach(function(input) {
1524+
if (!input.hasAttribute('aria-label')) {
1525+
const parentText = input.parentElement ? input.parentElement.textContent.trim() : '';
1526+
input.setAttribute('aria-label', parentText || 'Task item');
1527+
}
1528+
});
15211529

15221530
// PERF-002: Lazy-load mermaid only when diagrams are present
15231531
try {
@@ -1559,7 +1567,11 @@ document.addEventListener("DOMContentLoaded", function () {
15591567
if (hasMath) {
15601568
if (window.MathJax) {
15611569
try {
1562-
MathJax.typesetPromise([markdownPreview]).catch((err) => {
1570+
MathJax.typesetPromise([markdownPreview]).then(function() {
1571+
markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) {
1572+
mjx.removeAttribute('tabindex');
1573+
});
1574+
}).catch(function(err) {
15631575
console.warn('MathJax typesetting failed:', err);
15641576
});
15651577
} catch (e) {
@@ -1578,7 +1590,11 @@ document.addEventListener("DOMContentLoaded", function () {
15781590
};
15791591
loadScript(CDN.mathjax).then(function() {
15801592
try {
1581-
MathJax.typesetPromise([markdownPreview]).catch(function(err) {
1593+
MathJax.typesetPromise([markdownPreview]).then(function() {
1594+
markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) {
1595+
mjx.removeAttribute('tabindex');
1596+
});
1597+
}).catch(function(err) {
15821598
console.warn('MathJax typesetting failed:', err);
15831599
});
15841600
} catch (e) {

‎styles.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -758,7 +758,7 @@ a:focus {
758758
--color-prettylights-syntax-entity: #6f42c1;
759759
--color-prettylights-syntax-storage-modifier-import: #24292e;
760760
--color-prettylights-syntax-entity-tag: #22863a;
761-
--color-prettylights-syntax-keyword: #d73a49;
761+
--color-prettylights-syntax-keyword: #cf222e;
762762
--color-prettylights-syntax-string: #032f62;
763763
--color-prettylights-syntax-variable: #e36209;
764764
--color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
@@ -1732,7 +1732,7 @@ a:focus {
17321732
display: flex;
17331733
align-items: center;
17341734
gap: 6px;
1735-
height: 27px;
1735+
height: 32px;
17361736
padding: 0 8px 0 10px;
17371737
min-width: 100px;
17381738
max-width: 180px;
@@ -1874,8 +1874,8 @@ a:focus {
18741874
display: flex;
18751875
align-items: center;
18761876
justify-content: center;
1877-
width: 18px;
1878-
height: 18px;
1877+
width: 22px;
1878+
height: 22px;
18791879
border-radius: 3px;
18801880
background: none;
18811881
border: none;

0 commit comments

Comments
 (0)