fp6 accessibility

fp6.user.js

// ==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()