hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom focus indicator and accessebility fixes

Browse Source
This commit is contained in:
David Lapshin
2024-05-29 03:39:59 +03:00
parent 0b9ea98cba
commit d93bb90561
5 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_comments.scss
View File

@ -12,10 +12,6 @@ section#comments {
} }
} }
#load-comments {
cursor: pointer;
}
#comments-wrapper { #comments-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
sass/_containers.scss
View File

@ -12,7 +12,6 @@
button { button {
-webkit-backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
all: unset;
display: inline-flex; display: inline-flex;
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
@ -22,11 +21,10 @@
transition-property: background-color, transform; transition-property: background-color, transform;
cursor: pointer; cursor: pointer;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none;
border-radius: 50%; border-radius: 50%;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
padding: 0.5rem; padding: 0.5rem;
width: 1rem;
height: 1rem;
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
@ -54,7 +52,6 @@
i { i {
$copy-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); $copy-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $copy-icon; -webkit-mask-image: $copy-icon;
display: inline-block;
mask-image: $copy-icon; mask-image: $copy-icon;
transition: background-color var(--transition); transition: background-color var(--transition);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-4);

21
sass/_general.scss
View File

@ -54,3 +54,24 @@ body {
} }
} }
} }
:focus-visible {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline-offset: 2px;
}
@supports not selector(:focus-visible) {
:focus {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--primary-color);
outline-offset: 2px;
}
}
@keyframes focus-in {
from {
outline: 0.5rem solid transparent;
outline-offset: 0.25rem;
}
}

6
sass/_nav.scss
View File

@ -79,12 +79,16 @@
#main-content { #main-content {
position: absolute; position: absolute;
transform: translateY(-300%); transform: translateY(-100%);
opacity: 0;
z-index: 999; z-index: 999;
transition-duration: var(--transition);
transition-property: transform, opacity;
background: var(--bg-color), var(--primary-color); background: var(--bg-color), var(--primary-color);
&:focus { &:focus {
transform: translateY(0); transform: translateY(0);
opacity: 1;
} }
} }

2
templates/partials/comments.html
View File

@ -25,7 +25,7 @@
</p> </p>
<p> <p>
<a id="load-comments" class="inline-button" onclick="loadComments()">Load Comments</a> <a id="load-comments" class="inline-button" onclick="loadComments()" onkeypress="loadComments()" tabindex="0">Load Comments</a>
</p> </p>
<div id="comments-wrapper"> <div id="comments-wrapper">