From 9541e8f5e584e48131a330cf61df9212406be559 Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Sun, 13 Feb 2022 16:56:56 -0700 Subject: [PATCH 1/2] extract files into scss files --- contentScript.js | 10 +++++----- manifest.json | 2 ++ styles.css | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 styles.css diff --git a/contentScript.js b/contentScript.js index fcd00ea..681f325 100644 --- a/contentScript.js +++ b/contentScript.js @@ -3,17 +3,17 @@ document.querySelectorAll('.markdown-body').forEach(function(commentBody) { commentBody.querySelectorAll('img').forEach(function(image) { const altText = image.getAttribute('alt'); if (!altText) { - image.style = 'border: 10px solid red;' + image.classList.add('github-a11y-img-missing-alt') } else { const closestParagraph = image.closest('p'); if (!closestParagraph) return; // TODO: handle when image is nested in elements like a table cell. - closestParagraph.style = "position: relative; padding: 0; margin: 0;"; + closestParagraph.classList.add('github-a11y-img-container'); const subtitle = document.createElement('span'); subtitle.setAttribute('aria-hidden', 'true'); subtitle.textContent = altText; - subtitle.style = 'display: block; background-color: #121212; padding: 0.5em; color: white; position: absolute; bottom: 0.5em; left: 0; font-weight: 700; z-index: 2; width: 100%; font-size: 1.0rem; opacity: 0.6;'; + subtitle.classList.add('github-a11y-img-caption'); image.insertAdjacentElement('afterend', subtitle); } @@ -21,11 +21,11 @@ document.querySelectorAll('.markdown-body').forEach(function(commentBody) { // Appends heading level to headings. This is hidden from accesibility tree. commentBody.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function(heading) { - heading.style = 'position: relative;'; + heading.classList.add('github-a11y-heading'); const headingPrefix = document.createElement('span'); headingPrefix.setAttribute('aria-hidden', 'true'); - headingPrefix.style = "color: purple; right: 0; position: absolute;"; + headingPrefix.classList.add('github-a11y-heading-prefix'); headingPrefix.textContent = ` ${heading.tagName.toLowerCase()}`; heading.append(headingPrefix); diff --git a/manifest.json b/manifest.json index 25f62ad..4a509aa 100644 --- a/manifest.json +++ b/manifest.json @@ -8,7 +8,9 @@ { "matches": ["https://*.github.com/*"], "run_at": "document_idle", + "css": ["styles.css"], "js": ["contentScript.js"] + } ], "background": { diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b898084 --- /dev/null +++ b/styles.css @@ -0,0 +1,35 @@ +.github-a11y-img-container { + position: relative; + padding: 0; + margin: 0; +} + +.github-a11y-img-missing-alt { + border: 10px solid red; +} + +.github-a11y-img-caption { + display: block; + background-color: #121212; + padding: 0.5em; + color: white; + position: absolute; + bottom: 0.5em; + left: 0; + font-weight: 700; + z-index: 2; + width: 100%; + font-size: 1.0rem; + opacity: 0.6; +} + +.github-a11y-heading { + display: table; + width: 100%; +} + +.github-a11y-heading-prefix { + color: purple; + display: table-cell; + text-align: right; +} \ No newline at end of file From ebadb76995d476b31b6fc71e3373ffe8f277deea Mon Sep 17 00:00:00 2001 From: Kate Higa Date: Sun, 13 Feb 2022 17:26:57 -0700 Subject: [PATCH 2/2] update README, add comments explaining what the css classes are for, and bump version --- README.md | 4 ++-- manifest.json | 2 +- styles.css | 7 ++++++- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a350e41..a0c1e20 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ This extension will only run on GitHub domain and does the folowing on all markd Example screenshots of purple heading levels appended in at end of heading text line inside a GitHub markdown -**Note**: This is currently not customizable and the styling I've set may not be suitable for all users. Feel free to customize this however you like when you download these files. You can do this by modifying `contentScript.js` to your preferred styling. Then press `Update` on `chrome://extensions/` so changes are reflected in extension. +**Note**: This is currently not customizable and the styling I've set may not be suitable for all users. Feel free to customize this however you like when you download these files. You can do this by modifying `styles.css` to your preferred styling. Then press `Update` on `chrome://extensions/` so changes are reflected in extension. ## Resources @@ -42,4 +42,4 @@ This extension will only run on GitHub domain and does the folowing on all markd ## Bug? -If you encounter a bug, please file a ticket. Pull requests welcome. +If you encounter a bug, please file a ticket. Contributions welcome. diff --git a/manifest.json b/manifest.json index 4a509aa..c580cca 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "github-a11y", "description": "This extension helps increase accessibility mindfulness while using GitHub", - "version": "0.2", + "version": "0.3", "content_scripts": [ { "matches": ["https://*.github.com/*"], diff --git a/styles.css b/styles.css index b898084..e8a7574 100644 --- a/styles.css +++ b/styles.css @@ -1,13 +1,16 @@ +/* Necessary for image overlay positioning */ .github-a11y-img-container { position: relative; padding: 0; margin: 0; } +/* For when image is missing alt text */ .github-a11y-img-missing-alt { border: 10px solid red; } +/* For image overlay */ .github-a11y-img-caption { display: block; background-color: #121212; @@ -23,13 +26,15 @@ opacity: 0.6; } +/* Necessary for heading positioning */ .github-a11y-heading { display: table; width: 100%; } +/* For appended heading text */ .github-a11y-heading-prefix { color: purple; display: table-cell; text-align: right; -} \ No newline at end of file +}