Skip to content

Commit

Permalink
Theme: Switch anchor line to text-decoration, enable in footer for a11y
Browse files Browse the repository at this point in the history
There is a relatively new Chrome Lighthouse score penalty (Accessiblity
score is now 96 on qunitjs.com instead of 100) for
"Links rely on color to be distinguishable".

I thought this was about color contrast, but it isn't since the same
colors are fine on the left side of the footer. On the right side,
we have both text and links. Elsewhere, we have underlines for this,
so let's enable these here as well.

Switch anchor lines from border-bottom to native text-decoration
while at it. The full range of our styles can now be expresssed
natively.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
  • Loading branch information
Krinkle committed Mar 31, 2024
1 parent de98cdd commit cc86028
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 12 deletions.
21 changes: 12 additions & 9 deletions _sass/amethyst.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,20 +68,22 @@ a {
text-decoration: underline;
}
}
.content a:not(.button) {
border-bottom: 0.1em solid currentColor;
.content a:not(.button),
footer a {
text-decoration: underline;
text-decoration-thickness: 0.1em;
text-decoration-skip-ink: auto;
text-underline-position: under;
text-underline-offset: 0em;

&:active,
&:hover,
&:focus {
text-decoration: none;

box-shadow: 0px 0px 0px 4px $color-bright;
box-shadow: 0px 2px 0px 4px $color-bright;
background-color: $color-bright;
color: $color-accent;
border-bottom-color: $color-vibrant;
border-bottom-width: 0.13em;

text-decoration-color: $color-vibrant;
text-decoration-thickness: 0.12em;
code {
background-color: transparent;
}
Expand Down Expand Up @@ -775,7 +777,8 @@ article > header {

.external-links a {
// Larger click target for mobile
padding: 1rem 0.5rem;
display: inline-block;
padding: 0 0.5em;
}

.cta {
Expand Down
5 changes: 2 additions & 3 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,8 @@ home_secondary_btn:

To contribute:

* [Watch the repository](https://github.com/qunitjs/qunit) to learn about release, new requests, or bug reports.
* The source of this website, is in the [qunitjs.com](https://github.com/qunitjs/qunitjs.com) repository.
* The source of the Documentation site, is in the ["docs/" directory](https://github.com/qunitjs/qunit/tree/master/docs).
* [Watch the repository](https://github.com/qunitjs/jekyll-theme-amethyst) to learn about release, new requests, or bug reports.
* The source of this website, is in the [jekyll-theme-amethyst](https://github.com/qunitjs/jekyll-theme-amethyst) repository.

---

Expand Down

0 comments on commit cc86028

Please sign in to comment.