Skip to content

Instantly share code, notes, and snippets.

@chadlavi
Last active Jun 6, 2020
Embed
What would you like to do?
fp6 accessibility
// ==UserScript==
// @name 6dot accessibility patch
// @version 4.0.6
// @namespace https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d
// @author Chad Lavimoniere
// @grant none
// @include http*://6.*.org/*
// @downloadURL https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d/raw/fp6.user.js
// @updateURL https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d/raw/fp6.user.js
// ==/UserScript==
const setStyle = () => {
// convenience function for inserting one or more HTML snippets at a given position in a given parent element
const ins = (html, position, parent) => {
const el = Array.isArray(html) ? html : [html]
el.forEach(e => parent.insertAdjacentHTML(position, e))
}
// convenience function that iterates through a list of CSS selectors and returns the first element that matches
const findFirst = e => {for (const f of e) {if (document.querySelector(f)) {return document.querySelector(f)}}}
// style tag that inserts CSS for an accessible focus state site-wide
const globalStyle = `<style type="text/css">
:root {
--link-color: #000099;
--grey-color: #757575;
--light-grey-color: #efefef;
--text-color: black;
--background-color: white;
--navy-color: #072284;
--orange-color: #c75300;
--yellow-color: #f2d037;
--base-font-size: 15px;
--line-height: 1.2;
}
@media (prefers-color-scheme: dark) {
:root {
--link-color: rgb(119, 141, 223);
--text-color: white;
--background-color: black;
--light-grey-color: black;
--navy-color: black;
}
}
:focus {
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 6px var(--orange-color);
outline: none;
}
body, .thisis {
color: var(--text-color) !important;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-size: var(--base-font-size);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: var(--line-height);
margin: 0;
padding: 24px;
}
textarea {
color: var(--text-color);
background-color: var(--background-color);
border-radius: 5px;
border: 1px solid var(--grey-color);
margin-bottom: 10px;
padding: 5px;
}
input[type="submit"], input[type="button"] {
color: inherit;
background-color: var(--light-grey-color);
margin-top: 5px;
border: 1px solid var(--grey-color);
border-radius: 5px;
padding: 5px 10px
}
.comment-footer, .posted-by-footer a.favorite-link, .fileline:nth-child(2n), .filelist .fileline:nth-child(2n) a, span.optional, .posted-by-footer, .posted-by-footer .date, #loggedin {
color: var(--grey-color) !important;
}
.fileline:nth-child(odd) {
color: var(--text-color) !important;
}
#sitemenu a, div.pilebanner a {
color: var(--orange-color) !important;
}
a:not(.fname):not(.fcomments):not(.fdate):not(.favorite-link):not(.favd), #loggedin a {
color: var(--link-color) !important;
}
body, .archivepile .filelist, .popular .filelist {
box-sizing: border-box;
}
.commentbody a, .topic-comment-body a, .topic-body a {
display: inline-block;
}
.commentbody, .topic-comment-body, .topic-body {
max-width: 920px;
width: calc(100% - 150px);
}
.fcomments, .fname, .fdate {
width: 25%;
}
.fileline {
display: flex;
justify-content: space-between;
}
.pilebanner h2 {
width: unset;
color: var(--link-color) !important;
}
.pile, #content, #banner, #footer {
width: 100% !important;
}
img#picture_file {
max-width: 100%;
}
.tabnav {
overflow: unset;
}
.tabnav > li {
float: unset;
display: inline-block;
}
.fileline, .nav, .pagination, .pilebanner a, .pilebanner h2, .posted-by-footer, .topic, .topic-comment, .comment, .topic, #discussmotd, #fileinfo ul, #sitemenu li, #uploadedby, div.comment, input, span.posted-by-footer>a.newcomments-link, .fileline a.newcomments-link, .fileline .newcomments, textarea, .fileline {
font-size: inherit !important;
line-height: inherit !important;
}
.fileline:hover, .fileline:hover a, a:hover {
background-color: var(--background-color) !important;
color: var(--text-color) !important;
}
.tabnav a.selected {
background: var(--background-color);
border-bottom: 2px solid var(--link-color);
}
.fileline:nth-child(2n+1) a {
color: var(--text-color);
}
.comment-footer a.favorite-link, .posted-by-footer a.favorite-link {
background-position: 3px center !important;
background-size: 14px !important;
display: inline-block;
margin-top: 3px;
padding: 3px 5px 3px 19px;
}
span.posted-by-footer>a.newcomments-link, .fileline a.newcomments-link, .fileline .newcomments {
display: inline-block;
margin: 0;
vertical-align: top;
}
span.posted-by-footer>a.newcomments-link {
padding: 5px 0 0 0;
}
.fileline a.newcomments-link, .fileline .newcomments, article .topic-comment-body a, article .topic-body>a, article .commentbody a, span.posted-by-footer>a.newcomments-link {
color: var(--orange-color) !important;
}
a.favorite-link.favd {
background-color: var(--navy-color) !important;
border-radius: 5px;
color: var(--yellow-color) !important;
}
#skipnavcontainer, #backtotopcontainer {
display: block;
left: 0;
position: fixed;
width: 100%;
z-index: 1000;
}
#skipnavcontainer {
top: -300px;
}
#skipnavcontainer:focus-within {
top: 0;
}
#backtotopcontainer {
bottom: -300px;
}
#backtotopcontainer:focus-within {
bottom: 0;
}
a#skipnav, a#backtotop {
background: var(--background-color);
display: block;
margin-left: auto;
margin-right: auto;
padding: 15px;
width: -moz-fit-content;
width: fit-content;
}
</style>`
// HTML snippet to insert a skipnav link
const skipLink = `<div id="skipnavcontainer"><a id="skipnav" href="#main">Skip to main content</a></div>`
// HTML snippet to insert an anchor that the skip nav can link to
const mainSpan = `<span id="main"></span>`
// HTML snippet to insert a "back to top" link at the end of the HTML body
const backToTop = `<div id="backtotopcontainer"><a id="backtotop" href="#filepile">Back to top</a></div>`
// prioritized cascading attempts to find an entry point for the #main anchor
const mainInsertionPoint = findFirst(['section.topics>article', 'section.topics', '#content', 'header + div', 'div'])
/* INSERT DOM NODES */
// insert the focus CSS defined above, the skipnav link defined above, the relevant skipnav styles
// defined above, and accessible styling for stars
ins([globalStyle, skipLink], 'afterbegin', document.body)
// insert the anchor defined above, being sure to insert it directly to the start of the content
ins(mainSpan, 'afterbegin', mainInsertionPoint)
// insert the "Back to top" link defined above at the end of the HTML body
ins(backToTop, 'beforeend', document.body)
}
setStyle()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment