fix(components): [image-viewer] unable to capture focus (#17919)

* fix(components): [image-viewer] unable to capture focus

closed #7180

* fix: error

* fix: style

* fix: add release-requested

packages/components/image-viewer/src/image-viewer.vue

@@ -6,6 +6,14 @@
         :tabindex="-1"
         :class="ns.e('wrapper')"
         :style="{ zIndex }"
+      >
+        <el-focus-trap
+          loop
+          trapped
+          :focus-trap-el="wrapper"
+          focus-start-el="container"
+          @focusout-prevented="onFocusoutPrevented"
+          @release-requested="onCloseRequested"
         >
           <div :class="ns.e('mask')" @click.self="hideOnClickModal && hide()" />
 
@@ -68,6 +76,7 @@
             />
           </div>
           <slot />
+        </el-focus-trap>
       </div>
     </transition>
   </el-teleport>
@@ -89,6 +98,7 @@ import { throttle } from 'lodash-unified'
 import { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/constants'
 import { keysOf } from '@element-plus/utils'
+import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElTeleport from '@element-plus/components/teleport'
 import ElIcon from '@element-plus/components/icon'
 import {
@@ -352,6 +362,18 @@ function handleActions(action: ImageViewerAction, options = {}) {
   transform.value.enableTransition = enableTransition
 }
 
+function onFocusoutPrevented(event: CustomEvent) {
+  if (event.detail?.focusReason === 'pointer') {
+    event.preventDefault()
+  }
+}
+
+function onCloseRequested() {
+  if (props.closeOnPressEscape) {
+    hide()
+  }
+}
+
 watch(currentImg, () => {
   nextTick(() => {
     const $img = imgRefs.value[0]
@@ -368,9 +390,6 @@ watch(activeIndex, (val) => {
 
 onMounted(() => {
   registerEventListener()
-  // add tabindex then wrapper can be focusable via Javascript
-  // focus wrapper so arrow key can't cause inner scroll behavior underneath
-  wrapper.value?.focus?.()
 })
 
 defineExpose({

packages/theme-chalk/src/image-viewer.scss

@@ -17,6 +17,10 @@
     right: 0;
     bottom: 0;
     left: 0;
+
+    &:focus {
+      outline: none !important;
+    }
   }
 
   @include e(btn) {