1
0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00

feat: improve accessibility and focus management

This commit is contained in:
2025-10-27 01:36:05 +08:00
parent 1eab905c63
commit f87d7efcc9
3 changed files with 20 additions and 3 deletions

View File

@@ -38,6 +38,13 @@ export default defineConfig({
},
lineNumbers: true,
theme: "material-theme",
codeTransformers: [
{
pre(node) {
node.properties.tabindex = "-1";
},
},
],
},
head: [
["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],

View File

@@ -404,16 +404,27 @@ span.lang {
left: -54px;
top: 0px;
height: 54px;
width: 54px;
padding-inline-end: 10px;
color: var(--md-sys-color-on-surface);
text-decoration: none;
border-radius: var(--md-sys-shape-corner-full);
opacity: 0;
transition: var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
&:focus-visible {
@include mixin.focus-ring($size: 2, $z-index: 2);
opacity: 1;
span:nth-of-type(1) {
opacity: 1;
}
}
span:nth-of-type(1) {
@include mixin.material-symbols($size: 24);

View File

@@ -73,7 +73,6 @@
animation: focus-ring var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect) forwards;
outline-offset: #{$size}px;
position: relative;
transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
outline var(--md-sys-motion-spring-fast-spatial-standard-duration) var(--md-sys-motion-spring-fast-spatial-standard);
z-index: $z-index;