Skip to content

Instantly share code, notes, and snippets.

@stowball
Last active September 16, 2020 05:20
Show Gist options
  • Save stowball/5e5456af754fdda7ed5208ac1df3d855 to your computer and use it in GitHub Desktop.
Save stowball/5e5456af754fdda7ed5208ac1df3d855 to your computer and use it in GitHub Desktop.
javascript:(function()%7Bconsole.log(%0A%20%20Array.from(document.querySelectorAll('a%2C%20button')).reduce((str%2C%20action%2C%20index%2C%20arr)%20%3D%3E%20%7B%0A%20%20%20%20const%20ariaHiddenEls%20%3D%20Array.from(action.querySelectorAll('%5Baria-hidden%5D'))%3B%0A%20%20%20%20const%20visuallyHiddenEls%20%3D%20Array.from(action.querySelectorAll('.visually-hidden'))%3B%0A%20%20%20%20const%20visuallyHiddenText%20%3D%20%5B%5D%3B%0A%20%20%20%20const%20ariaLabel%20%3D%20action.getAttribute('aria-label')%20%7C%7C%20''%3B%0A%20%20%20%20const%20isHashLink%20%3D%20action.getAttribute('href')%20%26%26%20action.getAttribute('href').startsWith('%23')%3B%0A%20%20%20%20const%20hashLink%20%3D%20isHashLink%20%26%26%20action.getAttribute('href').startsWith('%23%2F')%20%3F%20'%23%2F%20'%20%3A%20'%23%20'%3B%0A%20%20%20%20let%20addendum%20%3D%20''%3B%0A%0A%20%20%20%20let%20textContent%20%3D%20action.textContent%3B%0A%20%20%20%20if%20((action.querySelector('svg')%20%26%26%20!textContent)%20%7C%7C%20action.classList.contains('IconButton'))%20%7B%0A%20%20%20%20%20%20%20%20textContent%20%3D%20%60%E2%8C%98%20%24%7BtextContent%7D%60%3B%0A%20%20%20%20%7D%0A%20%20%20%20ariaHiddenEls.forEach((el)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20textContent%20%3D%20textContent.replace(el.textContent%2C%20'')%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20visuallyHiddenEls.forEach((el)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20textContent%20%3D%20textContent.replace(el.textContent%2C%20'')%3B%0A%20%20%20%20%20%20%20%20visuallyHiddenText.push(el.textContent)%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20if%20(visuallyHiddenText.length%20%3E%200)%20%7B%0A%20%20%20%20%20%20%20%20addendum%20%2B%3D%20%60%20(%24%7B(visuallyHiddenText.join('%20').trim())%7D)%60%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(!!ariaLabel)%20%7B%0A%20%20%20%20%20%20%20%20addendum%20%2B%3D%20%60%20(aria-label%3A%20%24%7BariaLabel%7D)%60%3B%20%20%20%20%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20%60%24%7Bstr%7D%20%24%7Baction.tagName%7D%3A%20%24%7BisHashLink%20%3F%20hashLink%20%3A%20''%7D%24%7BtextContent.replace(%2F%5B%5Cr%5Cn%5D%2Fg%2C%20'%20').replace(%2F%5Cs%2B%2Fg%2C%20'%20').trim()%7D%24%7Baddendum%7D%5Cn%60%3B%0A%20%20%7D%2C%20'')%0A)%3B%7D)()%3B
console.log(
Array.from(document.querySelectorAll('a, button')).reduce((str, action, index, arr) => {
const ariaHiddenEls = Array.from(action.querySelectorAll('[aria-hidden]'));
const visuallyHiddenEls = Array.from(action.querySelectorAll('.visually-hidden'));
const visuallyHiddenText = [];
const ariaLabel = action.getAttribute('aria-label') || '';
const isHashLink = action.getAttribute('href') && action.getAttribute('href').startsWith('#');
const hashLink = isHashLink && action.getAttribute('href').startsWith('#/') ? '#/ ' : '# ';
let addendum = '';
let textContent = action.textContent;
if ((action.querySelector('svg') && !textContent) || action.classList.contains('IconButton')) {
textContent = `⌘ ${textContent}`;
}
ariaHiddenEls.forEach((el) => {
textContent = textContent.replace(el.textContent, '');
});
visuallyHiddenEls.forEach((el) => {
textContent = textContent.replace(el.textContent, '');
visuallyHiddenText.push(el.textContent);
});
if (visuallyHiddenText.length > 0) {
addendum += ` (${(visuallyHiddenText.join(' ').trim())})`;
}
if (!!ariaLabel) {
addendum += ` (aria-label: ${ariaLabel})`;
}
return `${str} ${action.tagName}: ${isHashLink ? hashLink : ''}${textContent.replace(/[\r\n]/g, ' ').replace(/\s+/g, ' ').trim()}${addendum}\n`;
}, '')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment