Created
February 16, 2023 17:33
-
-
Save PhilippeVay/a268b504574484ab418c68889b2a89de to your computer and use it in GitHub Desktop.
Stylus script: highlight links and display title, aria-label or aria-labelledby indications
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Highlight links and some indications | |
@namespace github.com/openstyles/stylus | |
@version 0.1.0 | |
@description Links are highlighted with their title and aria-label/labelledby attributes | |
@author Philippe Vayssière | |
==/UserStyle== */ | |
/* | |
TODO: counting links (with title, aria-label and aria-labelledby) | |
TODO: empty links in error | |
TODO: should ignore empty aria-label*** | |
*/ | |
:root { | |
--white: white; | |
--link: green; | |
--title: darkslateblue; | |
--c-link: var(--white); | |
--bg-link: var(--link); | |
--bg-title: var(--title); | |
--bd-link: var(--link); | |
} | |
/* Accessible name if due to ARIA */ | |
a:where([aria-label], [aria-labelledby]) { | |
--prefix: "Acc. name: "; | |
} | |
/* TODO: when aria-la*** exists but it's value is empty, aka ="" */ | |
a[aria-label] { | |
--n: var(--prefix) attr(aria-label) !important; | |
} | |
a[aria-labelledby]:not([aria-label]) { | |
--n: var(--prefix) "see aria-labelledby=\"" attr(aria-labelledby) "\""; | |
} | |
a[aria-label]::before { | |
content: var(--n); | |
position: relative; | |
background-color: var(--bg-link); | |
} | |
a[title] { | |
position: relative; | |
} | |
a[title]::after { | |
content: " 💬 " attr(title); | |
position: absolute; | |
top: calc(100% - 5px); | |
left: -5px; | |
width: fit-content; | |
white-space: pre; | |
background-color: var(--bg-title); | |
opacity: 1/*0.7;*/ | |
} | |
/* Styles */ | |
a:where([aria-label], [aria-labelledby])::before, | |
a[title]::after { | |
z-index: 123456; | |
display: block; | |
line-height: 1.5; | |
color: var(--c-link); | |
} | |
/* Highlight all links */ | |
a { | |
border: 5px solid var(--bd-link); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment