Skip to content

Instantly share code, notes, and snippets.

View fstorr's full-sized avatar

Francis Storr fstorr

5 followers · 2 following
View GitHub Profile
@fstorr
fstorr / github-source-code-wrapping
Created May 2, 2022 20:31
Stylus style to get source code to wrap on GitHub. Set the "applies to" to "URLs on the domain" and then use github.com
.blob-code-inner{
white-space:pre-wrap;
}
@fstorr
fstorr / aria-widget-roles
Last active February 11, 2022 18:30
ARIA widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
[role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"],
[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"],
[role="switch"],[role="tab"],[role="tabpanel"],[role="textbox"],[role="treeitem"]{
outline:2px solid #000f8a;
outline-offset: -2px;
outline-style: dashed;
}
:is([role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"],
[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"],
@fstorr
fstorr / text-spacing
Created February 11, 2022 17:11
*{
letter-spacing: 0.12em !important;
line-height: 1.5 !important;
word-spacing: 0.16em !important;
}
p{
margin-bottom: 2em !important;
}
@fstorr
fstorr / aria-composite-widget-roles
Last active February 11, 2022 18:12
ARIA composite widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
[role="combobox"],[role="grid"],[role="listbox"],[role="menu"],[role="menubar"],[role="radiogroup"],[role="tablist"],[role="tree"],[role="treegrid"]{
outline:2px solid #1e2eb8;
}
@fstorr
fstorr / headings-highlight
Last active February 9, 2022 22:51
highlight headings (HTML and ARIA)
:is(h1,h2,h3,h4,h5,h6)::after,
:is(h1,h2,h3,h4,h5,h6):empty::after,
[role="heading"]::after,
[role="heading"]:is([aria-level="1"],[aria-level="2"],[aria-level="3"],[aria-level="4"],[aria-level="5"],[aria-level="6"])::after{
background: #ff8f51;
border:1px solid #e96115;
border-radius:4px;
color:#000;
display: inline-block;
margin:0 0.2em;
@fstorr
fstorr / focus-visible-highlight
Created February 9, 2022 19:45
*:focus-visible{
outline:2px solid hsl(120,100%,50%) !important;
box-shadow: 0 0 0.25em 3px hsla(0,0%,0%,.60) !important;
}
@fstorr
fstorr / highlight-buttons-links-listbox-tabs
Created February 9, 2022 19:20
@fstorr
fstorr / accessibility-forced-focus-highlighting-bookmarklet.js
Created April 2, 2020 01:37
Bookmarklet to force focus highlighting in accessibility testing
/*
tweaked version of a bookmarklet I found online (can't remember where now).
Added a `title` attribute to the `<style>` element to make it easier to find in dev tools.
tweaked the outline color and box shadow
*/
javascript:(function()%7Blet a%3Ddocument.createElement('style');a.setAttribute('title','a11y-testing')%3Bdocument.head.appendChild(a)%3Bb%3Da.sheet%3Bb.insertRule(%27*:focus%7Boutline:2px solid hsl(120,100%,50%) !important%3Bbox-shadow: 0 0 0.25em 3px hsla(0,0%,0%,.60) !important%3B%7D%27,0)%3B%7D)()
@fstorr
fstorr / more-accessible-password-strength-meter.html
Last active March 13, 2020 14:17
More accessible password-strength meter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
<title>More-Accessible Password Strength Meter</title>
@fstorr
fstorr / useful-terminal-commands.md
Last active September 24, 2018 17:16
Various terminal commands for dealing with OS stuff

Version of macOS

$ sw_vers

System logs

  1. cd /Library/Logs/DiagnosticReports
  2. `grep -ir ".panic" *
  3. Note: can also use Console app → System Reports

Last shutdown code

log show --predicate 'eventMessage contains "Previous shutdown cause"' --last 24h