javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-08-26 04:27:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [pagination] improved keyboard accessibility (#8107)

Browse Source 
* fix(components): [pagination] improved keyboard accessibility

* refactor(components): [pagination] change arguments type

* refactor(components): [pagination] change camel case
This commit is contained in:
류한경
2022-06-11 20:52:35 +09:00
committed by GitHub
parent 4ef054488a
commit df5ba0fffd
2 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/components/pagination/src/components/pager.vue
View File

@ -20,10 +20,13 @@
nsIcon.b(),
nsPager.is('disabled', disabled),
]"
@mouseenter="onMouseenter('left')"
tabindex="0"
@mouseenter="onMouseEnter(true)"
@mouseleave="quickPrevHover = false"
@focus="onFocus(true)"
@blur="quickPrevFocus = false"
>
<d-arrow-left v-if="quickPrevHover" />
<d-arrow-left v-if="quickPrevHover || quickPrevFocus" />
<more-filled v-else />
</li>
<li
@ -47,10 +50,13 @@
nsIcon.b(),
nsPager.is('disabled', disabled),
]"
@mouseenter="onMouseenter('right')"
tabindex="0"
@mouseenter="onMouseEnter()"
@mouseleave="quickNextHover = false"
@focus="onFocus()"
@blur="quickNextFocus = false"
>
<d-arrow-right v-if="quickNextHover" />
<d-arrow-right v-if="quickNextHover || quickNextFocus" />
<more-filled v-else />
</li>
<li
@ -83,6 +89,8 @@ const showPrevMore = ref(false)
const showNextMore = ref(false)
const quickPrevHover = ref(false)
const quickNextHover = ref(false)
const quickPrevFocus = ref(false)
const quickNextFocus = ref(false)
const pagers = computed(() => {
const pagerCount = props.pagerCount
const halfPagerCount = (pagerCount - 1) / 2
@ -133,14 +141,21 @@ watchEffect(() => {
}
}
})
function onMouseenter(direction: 'left' | 'right') {
function onMouseEnter(forward = false) {
if (props.disabled) return
if (direction === 'left') {
if (forward) {
quickPrevHover.value = true
} else {
quickNextHover.value = true
}
}
function onFocus(forward = false) {
if (forward) {
quickPrevFocus.value = true
} else {
quickNextFocus.value = true
}
}
function onEnter(e: UIEvent) {
const target = e.target as HTMLElement
if (
@ -151,6 +166,11 @@ function onEnter(e: UIEvent) {
if (newPage !== props.currentPage) {
emit('change', newPage)
}
} else if (
target.tagName.toLowerCase() === 'li' &&
Array.from(target.classList).includes('more')
) {
onPagerClick(e)
}
}
function onPagerClick(event: UIEvent) {