limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-15 14:37:36 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improving keyboard support, part 1™

Browse source
This commit is contained in:
Freeplay 2023-02-06 15:52:00 -05:00
parent 290c1152fb
commit 4b8b413c51
7 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/client/src/components/MkButton.vue
View file

@ -184,8 +184,7 @@ function onMousedown(evt: MouseEvent): void {
}
&:focus-visible {
outline: solid 2px var(--focus);
outline-offset: 2px;
outline: auto;
}
&.inline {

3
packages/client/src/components/form/radio.vue
View file

@ -68,6 +68,9 @@ function toggle(): void {
&:hover {
border-color: var(--inputBorderHover) !important;
}
&:focus-within {
outline: auto;
}
&.checked {
background-color: var(--accentedBg) !important;

3
packages/client/src/components/form/switch.vue
View file

@ -98,6 +98,9 @@ const toggle = () => {
border-color: var(--inputBorderHover) !important;
}
}
&:focus-within > .button {
outline: auto;
}
> .label {
margin-left: 12px;

33
packages/client/src/directives/tooltip.ts
View file

@ -76,23 +76,32 @@ export default {
ev.preventDefault();
});
function showTooltip() {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
self.showTimer = window.setTimeout(self.show, delay);
}
function hideTooltip() {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
self.hideTimer = window.setTimeout(self.close, delay);
}
el.addEventListener(
start,
() => {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
self.showTimer = window.setTimeout(self.show, delay);
},
start, showTooltip,
{ passive: true },
);
el.addEventListener(
"focusin", showTooltip,
{ passive: true },
);
el.addEventListener(
end,
() => {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
self.hideTimer = window.setTimeout(self.close, delay);
},
end, hideTooltip,
{ passive: true },
);
el.addEventListener(
"focusout", hideTooltip,
{ passive: true },
);

6
packages/client/src/pages/admin/_header_.vue
View file

@ -265,11 +265,7 @@ onUnmounted(() => {
font-weight: normal;
opacity: 0.7;
&:hover {
opacity: 1;
}
&.active {
&:hover, &:focus-visible, &.active {
opacity: 1;
}

4
packages/client/src/style.scss
View file

@ -178,10 +178,6 @@ hr {
pointer-events: none;
}
&:focus-visible {
outline: none;
}
&:disabled {
opacity: 0.5;
cursor: default;

13
packages/client/src/ui/_common_/navbar.vue
View file

@ -341,8 +341,6 @@ function more(ev: MouseEvent) {
padding-left: 30px;
line-height: 2.85rem;
margin-bottom: 0.5rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: left;
@ -368,6 +366,8 @@ function more(ev: MouseEvent) {
> .text {
position: relative;
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
@ -380,7 +380,7 @@ function more(ev: MouseEvent) {
color: var(--navActive);
}
&:hover, &.active {
&:hover, &:focus-within, &.active {
color: var(--accent);
transition: all 0.4s ease;
@ -562,5 +562,12 @@ function more(ev: MouseEvent) {
}
}
}
.item {
outline: none;
&:focus-visible:before {
outline: auto;
}
}
}
</style>