Improving keyboard support, part 1™

This commit is contained in:
Freeplay 2023-02-06 15:52:00 -05:00
parent bb0fe93631
commit d3466948d1
7 changed files with 39 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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