From 1aae08d7bfa53d454305d61ba05bd1975e6f3dd1 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Sun, 31 May 2026 19:52:24 +0530 Subject: [PATCH] a11y: resolve Lighthouse accessibility audit violations --- desktop-app/resources/index.html | 10 +++++----- desktop-app/resources/js/script.js | 20 ++++++++++++++++++-- desktop-app/resources/styles.css | 8 ++++---- index.html | 10 +++++----- script.js | 20 ++++++++++++++++++-- styles.css | 8 ++++---- 6 files changed, 54 insertions(+), 22 deletions(-) diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html index 32be8f98..7108af59 100644 --- a/desktop-app/resources/index.html +++ b/desktop-app/resources/index.html @@ -239,8 +239,8 @@
Menu
-
-
+
+
@@ -778,10 +778,10 @@

Open-source credits

-
+
- +
- + diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js index 9fd28eaf..42c35ff9 100644 --- a/desktop-app/resources/js/script.js +++ b/desktop-app/resources/js/script.js @@ -1518,6 +1518,14 @@ document.addEventListener("DOMContentLoaded", function () { enhanceGitHubAlerts(markdownPreview); processEmojis(markdownPreview); + + // Add accessible dynamic labels to task list checkboxes matching their parent text + markdownPreview.querySelectorAll('input[type="checkbox"]').forEach(function(input) { + if (!input.hasAttribute('aria-label')) { + const parentText = input.parentElement ? input.parentElement.textContent.trim() : ''; + input.setAttribute('aria-label', parentText || 'Task item'); + } + }); // PERF-002: Lazy-load mermaid only when diagrams are present try { @@ -1559,7 +1567,11 @@ document.addEventListener("DOMContentLoaded", function () { if (hasMath) { if (window.MathJax) { try { - MathJax.typesetPromise([markdownPreview]).catch((err) => { + MathJax.typesetPromise([markdownPreview]).then(function() { + markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) { + mjx.removeAttribute('tabindex'); + }); + }).catch(function(err) { console.warn('MathJax typesetting failed:', err); }); } catch (e) { @@ -1578,7 +1590,11 @@ document.addEventListener("DOMContentLoaded", function () { }; loadScript(CDN.mathjax).then(function() { try { - MathJax.typesetPromise([markdownPreview]).catch(function(err) { + MathJax.typesetPromise([markdownPreview]).then(function() { + markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) { + mjx.removeAttribute('tabindex'); + }); + }).catch(function(err) { console.warn('MathJax typesetting failed:', err); }); } catch (e) { diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css index 56be2004..984a61f3 100644 --- a/desktop-app/resources/styles.css +++ b/desktop-app/resources/styles.css @@ -758,7 +758,7 @@ a:focus { --color-prettylights-syntax-entity: #6f42c1; --color-prettylights-syntax-storage-modifier-import: #24292e; --color-prettylights-syntax-entity-tag: #22863a; - --color-prettylights-syntax-keyword: #d73a49; + --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #032f62; --color-prettylights-syntax-variable: #e36209; --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28; @@ -1732,7 +1732,7 @@ a:focus { display: flex; align-items: center; gap: 6px; - height: 27px; + height: 32px; padding: 0 8px 0 10px; min-width: 100px; max-width: 180px; @@ -1874,8 +1874,8 @@ a:focus { display: flex; align-items: center; justify-content: center; - width: 18px; - height: 18px; + width: 22px; + height: 22px; border-radius: 3px; background: none; border: none; diff --git a/index.html b/index.html index f6d01b08..8407b3bb 100644 --- a/index.html +++ b/index.html @@ -298,8 +298,8 @@
Menu
-
-
+
+
@@ -837,10 +837,10 @@

Open-source credits

-
+
- +
- + diff --git a/script.js b/script.js index 9fd28eaf..42c35ff9 100644 --- a/script.js +++ b/script.js @@ -1518,6 +1518,14 @@ document.addEventListener("DOMContentLoaded", function () { enhanceGitHubAlerts(markdownPreview); processEmojis(markdownPreview); + + // Add accessible dynamic labels to task list checkboxes matching their parent text + markdownPreview.querySelectorAll('input[type="checkbox"]').forEach(function(input) { + if (!input.hasAttribute('aria-label')) { + const parentText = input.parentElement ? input.parentElement.textContent.trim() : ''; + input.setAttribute('aria-label', parentText || 'Task item'); + } + }); // PERF-002: Lazy-load mermaid only when diagrams are present try { @@ -1559,7 +1567,11 @@ document.addEventListener("DOMContentLoaded", function () { if (hasMath) { if (window.MathJax) { try { - MathJax.typesetPromise([markdownPreview]).catch((err) => { + MathJax.typesetPromise([markdownPreview]).then(function() { + markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) { + mjx.removeAttribute('tabindex'); + }); + }).catch(function(err) { console.warn('MathJax typesetting failed:', err); }); } catch (e) { @@ -1578,7 +1590,11 @@ document.addEventListener("DOMContentLoaded", function () { }; loadScript(CDN.mathjax).then(function() { try { - MathJax.typesetPromise([markdownPreview]).catch(function(err) { + MathJax.typesetPromise([markdownPreview]).then(function() { + markdownPreview.querySelectorAll('mjx-container[tabindex="0"]').forEach(function(mjx) { + mjx.removeAttribute('tabindex'); + }); + }).catch(function(err) { console.warn('MathJax typesetting failed:', err); }); } catch (e) { diff --git a/styles.css b/styles.css index 56be2004..984a61f3 100644 --- a/styles.css +++ b/styles.css @@ -758,7 +758,7 @@ a:focus { --color-prettylights-syntax-entity: #6f42c1; --color-prettylights-syntax-storage-modifier-import: #24292e; --color-prettylights-syntax-entity-tag: #22863a; - --color-prettylights-syntax-keyword: #d73a49; + --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #032f62; --color-prettylights-syntax-variable: #e36209; --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28; @@ -1732,7 +1732,7 @@ a:focus { display: flex; align-items: center; gap: 6px; - height: 27px; + height: 32px; padding: 0 8px 0 10px; min-width: 100px; max-width: 180px; @@ -1874,8 +1874,8 @@ a:focus { display: flex; align-items: center; justify-content: center; - width: 18px; - height: 18px; + width: 22px; + height: 22px; border-radius: 3px; background: none; border: none;