diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index a251986..1a5980f 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -97,11 +97,11 @@ export default defineComponent({ methods: { handleKeydown(e: KeyboardEvent) { - if(!e.target || !(e.target as HTMLElement).classList.contains('section__heading')) { + if(!e.target || !(e.target as HTMLElement).matches('.section__heading button')) { return; } - const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading')), + const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button')), position = sectionHeadings.indexOf(e.target as HTMLElement); if(position === -1) { @@ -234,28 +234,32 @@ export default defineComponent({ flex: 0 0 auto; .section__heading { - font-size: 2rem; cursor: pointer; user-select: none; - padding: 1.5rem 1.5rem 1rem; - margin: -1.5rem -1.5rem 0; - background-color: transparent; - color: inherit; text-align: left; - display: flex; align-items: center; - width: calc(100% + 3rem); + margin: 0; + + button { + display: flex; + font-size: 2rem; + padding: 1.5rem 1.5rem 1rem; + margin: -1.5rem -1.5rem 0; + background-color: transparent; + color: inherit; + width: calc(100% + 3rem); + + .svg-icon { + margin-left: auto; + width: 1.5rem; + height: 1.5rem; + } + } &:hover, &:focus-visible, &.focus-visible, &:active { background-color: transparent; color: inherit; } - - .svg-icon { - margin-left: auto; - width: 1.5rem; - height: 1.5rem; - } } .section__content { @@ -276,7 +280,7 @@ export default defineComponent({ } &.section--collapsed { - .section__heading { + .section__heading button { padding-bottom: 1.5rem; margin-bottom: -1.5rem; } diff --git a/src/components/sidebar/CollapsibleSection.vue b/src/components/sidebar/CollapsibleSection.vue index 260697b..32d9a71 100644 --- a/src/components/sidebar/CollapsibleSection.vue +++ b/src/components/sidebar/CollapsibleSection.vue @@ -1,7 +1,7 @@