Skip to content

Commit

Permalink
fixup! Make only anchor element focusable
Browse files Browse the repository at this point in the history 
Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed Feb 2, 2024
1 parent c4549c3 commit 6e45c2e
Showing 1 changed file with 65 additions and 78 deletions.
143 changes: 65 additions & 78 deletions src/components/NcListItem/NcListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
:counter-number="44"
counterType="highlighted">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand Down Expand Up @@ -62,7 +62,7 @@
:counter-number="44"
counterType="outlined">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand All @@ -89,7 +89,7 @@
:active="true"
:counter-number="44">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand Down Expand Up @@ -121,7 +121,7 @@
:counter-number="44"
counterType="highlighted">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand All @@ -146,7 +146,7 @@
:counter-number="44"
counterType="outlined">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand All @@ -170,7 +170,7 @@
:details="'1h'"
:counter-number="44">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand All @@ -191,7 +191,7 @@
:name="'Name of the element'"
:bold="false">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand Down Expand Up @@ -220,7 +220,7 @@
:bold="false"
:details="'1h'">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subname>
In this slot you can put both text and other components such as icons
Expand Down Expand Up @@ -333,28 +333,26 @@
:class="{ 'list-item__wrapper--active' : isActive || active }">
<div ref="list-item"
class="list-item"
tabindex="0"
@mouseover="handleMouseover"
@mouseleave="handleMouseleave"
@focus="handleFocus"
@blur="handleBlur"
@keydown.tab.exact="handleTab"
@click="onClick($event, navigate, routerLinkHref)"
@keydown.esc="hideActions">
<div :class="['list-item-content__wrapper', {
'list-item-content__wrapper--compact': compact
}]">
<!-- @slot This slot is used for the NcAvatar or icon -->
@mouseleave="handleMouseleave">
<a :id="anchorId || undefined"
:aria-label="linkAriaLabel"
:class="['list-item__anchor', {
'list-item__anchor--compact': compact
}]"
:href="routerLinkHref || href"
:target="target || (href === '#' ? undefined : '_blank')"
:rel="href === '#' ? undefined : 'noopener noreferrer'"
@focus="showActions"
@focusout="handleBlur"
@click="onClick($event, navigate, routerLinkHref)"
@keydown.enter="onClick($event, navigate, routerLinkHref)"
@keydown.esc="hideActions">
<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->
<slot name="icon" />

<!-- Main content -->
<a :id="anchorId || undefined"
tabindex="-1"
class="list-item-content"
:aria-label="linkAriaLabel"
:href="routerLinkHref || href"
:target="target || (href === '#' ? undefined : '_blank')"
:rel="href === '#' ? undefined : 'noopener noreferrer'">
<div class="list-item-content">
<div class="list-item-content__main"
:class="{ 'list-item-content__main--oneline': oneLine }">

Expand Down Expand Up @@ -396,20 +394,20 @@
</span>
</div>
</div>
</a>

<!-- Actions -->
<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
class="list-item-content__actions"
@click.prevent.stop="">
<NcActions ref="actions"
:primary="isActive || active"
:aria-label="computedActionsAriaLabel"
@update:open="handleActionsUpdateOpen">
<!-- @slot Provide the actions for the right side quick menu -->
<slot name="actions" />
</NcActions>
</div>
</a>

<!-- Actions -->
<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
class="list-item-content__actions"
@focusout="handleBlur">
<NcActions ref="actions"
:primary="isActive || active"
:aria-label="computedActionsAriaLabel"
@update:open="handleActionsUpdateOpen">
<!-- @slot Provide the actions for the right side quick menu -->
<slot name="actions" />
</NcActions>
</div>

<!-- @slot Extra elements below the item -->
Expand Down Expand Up @@ -568,7 +566,6 @@ export default {
data() {
return {
hovered: false,
focused: false,
hasActions: false,
hasSubname: false,
displayActionsOnHoverFocus: false,
Expand Down Expand Up @@ -619,7 +616,7 @@ export default {
/**
* Handle link click
*
* @param {PointerEvent} event - Native click event
* @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
* @param {Function} [navigate] - VueRouter link's navigate if any
* @param {string} [routerLinkHref] - VueRouter link's href
*/
Expand All @@ -634,14 +631,11 @@ export default {
if (routerLinkHref) {
navigate?.(event)
event.preventDefault()
} else {
window.location = this.href
}
},
handleMouseover() {
this.showActions()
this.hovered = true
},
showActions() {
if (this.hasActions) {
this.displayActionsOnHoverFocus = true
Expand All @@ -654,15 +648,14 @@ export default {
},
/**
* Show actions upon focus
* @param {FocusEvent} event UI event
*/
handleFocus() {
this.focused = true
this.showActions()
},
handleBlur() {
this.focused = false
handleBlur(event) {
// do not hide if focus is kept within
if (this.$refs['list-item'].contains(event.relatedTarget)) {
return
}
this.hideActions()
},
/**
Expand All @@ -675,20 +668,9 @@ export default {
this.hovered = false
},
/**
* This method checks if the root element of the component is focused and
* if that's the case it focuses the actions button if available
*
* @param {Event} e the keydown event
*/
handleTab(e) {
if (this.focused && this.hasActions) {
e.preventDefault()
this.$refs.actions.$refs.menuButton.$el.focus()
this.focused = false
} else {
this.displayActionsOnHoverFocus = false
}
handleMouseover() {
this.showActions()
this.hovered = true
},
handleActionsUpdateOpen(e) {
Expand Down Expand Up @@ -723,14 +705,13 @@ export default {
width: 100%;
&--active,
&:active,
&.active {
.list-item {
background-color: var(--color-primary-element);
&:active,
&:hover,
&:focus,
&:focus-visible {
&:focus-within,
&:has(:focus-visible),
&:has(:active) {
background-color: var(--color-primary-element-hover);
}
}
Expand All @@ -748,7 +729,7 @@ export default {
// NcListItem
.list-item {
box-sizing: border-box;
display: block;
display: flex;
position: relative;
flex: 0 0 auto;
justify-content: flex-start;
Expand All @@ -762,23 +743,29 @@ export default {
cursor: pointer;
transition: background-color var(--animation-quick) ease-in-out;
list-style: none;
&:active,
&:hover,
&:focus,
&:focus-visible {
&:focus-within,
&:has(:active),
&:has(:focus-visible) {
background-color: var(--color-background-hover);
}
&:focus-visible {
&:has(&__anchor:focus-visible) {
outline: 2px solid var(--color-main-text);
box-shadow: 0 0 0 4px var(--color-main-background);
}
&-content__wrapper {
&__anchor {
display: flex;
flex: 1 0 auto;
align-items: center;
height: 48px;
// This is handled by the parent container
&:focus-visible {
outline: none;
}
&--compact {
height: 36px;
Expand Down

0 comments on commit 6e45c2e

Please sign in to comment.