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

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

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

* refactor(components): [pagination] change camel case

packages/components/pagination/src/components/pager.vue

@@ -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) {

packages/theme-chalk/src/pagination.scss

@@ -94,6 +94,11 @@
       font-weight: bold;
       width: inherit;
     }
+
+    &:focus-visible {
+      outline: 1px solid getCssVar('pagination-hover-color');
+      color: getCssVar('pagination-hover-color');
+    }
   }
 
   .#{$namespace}-pager li.is-disabled {
@@ -323,6 +328,11 @@
       svg {
         pointer-events: none;
       }
+
+      &:focus-visible {
+        outline: 1px solid getCssVar('pagination-hover-color');
+        color: getCssVar('pagination-hover-color');
+      }
     }
 
     &.is-active + li {