diff options
| author | dakkar <dakkar@thenautilus.net> | 2024-08-02 12:25:58 +0100 |
|---|---|---|
| committer | dakkar <dakkar@thenautilus.net> | 2024-08-02 12:25:58 +0100 |
| commit | cfa9b852df9e0293865b3acbd67d59265962e552 (patch) | |
| tree | a408ad670956a45c4e162e4ecc97a3624e2b0f20 /packages/frontend/src/components/MkFolder.vue | |
| parent | merge: rate limit all password checks - fixes #540 (!568) (diff) | |
| parent | Merge pull request #14233 from misskey-dev/develop (diff) | |
| download | sharkey-cfa9b852df9e0293865b3acbd67d59265962e552.tar.gz sharkey-cfa9b852df9e0293865b3acbd67d59265962e552.tar.bz2 sharkey-cfa9b852df9e0293865b3acbd67d59265962e552.zip | |
Merge remote-tracking branch 'misskey/master' into feature/misskey-2024.07
Diffstat (limited to 'packages/frontend/src/components/MkFolder.vue')
| -rw-r--r-- | packages/frontend/src/components/MkFolder.vue | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index dbe3db9eac..229cd59056 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -7,10 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only <div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened"> <MkStickyContainer> <template #header> - <div :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle"> + <button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle"> <div :class="$style.headerIcon"><slot name="icon"></slot></div> <div :class="$style.headerText"> - <div> + <div :class="$style.headerTextMain"> <MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine> </div> <div :class="$style.headerTextSub"> @@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only <i v-if="opened" class="ti ti-chevron-up icon"></i> <i v-else class="ti ti-chevron-down icon"></i> </div> - </div> + </button> </template> <div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : undefined, overflow: maxHeight ? `auto` : undefined }" :aria-hidden="!opened"> @@ -147,6 +147,10 @@ onMounted(() => { background: var(--buttonHoverBg); } + &:focus-within { + outline-offset: 2px; + } + &.active { color: var(--accent); background: var(--buttonHoverBg); @@ -190,6 +194,12 @@ onMounted(() => { padding-right: 12px; } +.headerTextMain, +.headerTextSub { + width: fit-content; + max-width: 100%; +} + .headerTextSub { color: var(--fgTransparentWeak); font-size: .85em; |