Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter cells based on user-entered contrast-ratio #15

Open
LiveFreeAndRoam opened this issue Mar 30, 2020 · 0 comments
Open

Filter cells based on user-entered contrast-ratio #15

LiveFreeAndRoam opened this issue Mar 30, 2020 · 0 comments

Comments

@LiveFreeAndRoam
Copy link

LiveFreeAndRoam commented Mar 30, 2020

An enhancement request... I would like to specify a contrast-ratio filter to see only those cells that meet my needs.

E.g. I could specify a minimum contrast-ratio, e.g. 7.0, or WCAG rating, e.g. AA, and only the cells that meet that requirement are visible, while all others become hidden/blank. A checkbox to toggle the filter on/off would be a nice touch too.

I'm working with a large grid, so hiding cells that do not meet minimum requirements would remove a lot of noise.

For extra credit.... Maybe there is some value in specifying a range, e.g. A to AA? But setting a minimum value would meet my needs.


Some JavaScript that can be run from within the Chrome console to illustrate the idea:

// Display faint-grey cell borders
$$("td").forEach(item => item.setAttribute("style", "border: 1px solid #1111")) 

// Hide cells with ratio < 7 (i.e. show only AAA-rating)
// Use 4.5 to display cells that meet AA- and AAA-rating
ratio = 7

hide = () => {$$("span.es-contrast-grid__contrast-ratio").forEach(item => {if (item.innerText < ratio) item.parentNode.parentNode.style.visibility = 'hidden'})}

// Make them visible again
show = () => $$("span.es-contrast-grid__contrast-ratio").forEach(item => {if (item.innerText < ratio) item.parentNode.parentNode.style.visibility = 'visible'})

hide()
show()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant