Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fix heading position styles to prevent overlap and extract styles into CSS file #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khiga8 merged 2 commits into from
Feb 14, 2022
Merged

Fix heading position styles to prevent overlap and extract styles into CSS file #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9541e8f
extract files into scss files
khiga8 Feb 13, 2022
ebadb76
update README, add comments explaining what the css classes are for, …
khiga8 Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ This extension will only run on GitHub domain and does the folowing on all markd
<img width="916" alt="Example screenshots of purple heading levels appended in at end of heading text line inside a GitHub markdown" src="https://user-images.githubusercontent.com/16447748/153683612-1b7d5975-ed45-4985-892d-6fd64545d18d.png">


**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

Expand All @@ -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.
10 changes: 5 additions & 5 deletions contentScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@ 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);
}
});

// 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);
Expand Down
4 changes: 3 additions & 1 deletion manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@

"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/*"],
"run_at": "document_idle",
"css": ["styles.css"],
"js": ["contentScript.js"]

}
],
"background": {
Expand Down
40 changes: 40 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* 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;
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;
}

/* 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;
}