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:
@@ -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" }],
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user