Skip to content

Instantly share code, notes, and snippets.

View patrickfox's full-sized avatar
🦊

Patrick Fox patrickfox

🦊
38 followers · 13 following
  • Razorfish
  • Austin, TX
View GitHub Profile
@patrickfox
patrickfox / announce.tsx
Created March 14, 2024 15:16
Utility function that enables the announcement of custom messages in order to improve the accessible experience (AX).
export const ariaAnnounce = (message: string, manners = 'assertive'): HTMLElement => {
let announceTimeout: ReturnType<typeof setTimeout> | null;
announceTimeout = null;
let announcer: HTMLElement | null = document.querySelector('#announce-this');
const clearAnnouncer = (): HTMLElement => {
if (announcer) {
announcer.setAttribute('aria-live', 'off');
@patrickfox
patrickfox / hideFromAT.js
Last active May 11, 2023 15:55
This script creates functions that add aria-hidden="true" to all elements except for the element specified.
// Hide and unhide from assistive technology (AT)
const hideFromAT = function(el){
const { body } = document;
let currentEl = el;
// If there are any nodes with oldAriaHiddenVal set, we should
// bail, since it has already been done.
const hiddenEl = document.querySelector('[data-original-aria-hidden]');
@patrickfox
patrickfox / accessible-modal-structure.html
Created May 11, 2020 18:45
Accessible modal structure
<html>
<head></head>
<body>
<section>
</section>
<div
</body>
</html>
@patrickfox
patrickfox / a11y-snippets.md
Last active April 29, 2020 21:27
Accessibility Testing Snippets

Log All aria-label

javascript:(function(){let l=document.all;for(let t=0,e=l.length;t<e;t++){let e=l[t].getAttribute("aria-label");e&&console.log(e)}})();

Wish List

  • Verify all ID refs for:
    • aria-labelledby
  • aria-describedby
@patrickfox
patrickfox / ShellSetup.md
Created March 19, 2018 17:25

Change Default Shell

To automatically start using a different shell:

which zshthis -> /path/to/the/shell chsh -s /path/to/the/shell

@patrickfox
patrickfox / applescript-example
Created March 13, 2018 18:49
AppleScript Example - open terminal, navigate to dir and fire up http-server; then, tell Chrome to open a new tab
tell application "Terminal"
activate
do script "cd ~/path/to/dir && http-server"
end tell
tell application "Google Chrome"
open location "http://mydomain.com/"
delay 1
end tell
@patrickfox
patrickfox / gist:f1d6b4e0540280e3633d814a0a837fa3
Last active March 2, 2018 19:34
Sublime Configuration
@patrickfox
patrickfox / access.js
Last active January 9, 2021 17:43
var access = function(el, place_focus_before) {
var focus_el, focus_method, ogti, onblur_el, onblur_temp_el, temp_el;
onblur_el = function(e) {
if (el.getAttribute('data-ogti')) {
el.setAttribute('tabindex', ogti);
} else {
el.removeAttribute('tabindex');
}
el.removeAttribute('data-ogti');
el.removeEventListener('focusout', focus_method);
@patrickfox
patrickfox / git-shit-i-forget.md
Last active May 8, 2023 14:49

Remove remote folders already in the repo but since added to my .gitignore

Oops! I committed and pushed some crap that I didn't mean to.

git rm -r --cached some-directory
git commit -m 'Remove the now ignored directory "some-directory"'
git push origin master
@patrickfox
patrickfox / gist:7a34f982f45375dd021b
Created March 10, 2016 08:22
import Ember from 'ember';
import {announce_view_loaded} from './../helpers/utils';
export default Ember.Route.extend({
renderTemplate(args) {
this._super(...args);
//this.render('about');
Ember.run.scheduleOnce('afterRender', this, function() {
console.log('afterRender');
announce_view_loaded();