fix(components): [upload] keep delete icon visible on focus-within (#23561)

* fix(components): [upload] keep delete icon visible on focus-within

* chore: add aria-label

* Update packages/components/upload/src/upload-list.vue

Co-authored-by: rzzf <cszhjh@gmail.com>

* fix: tip style

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/upload/__tests__/upload-list.test.tsx

@@ -67,6 +67,16 @@ describe('<upload-list />', () => {
 
       await wrapper.find('.el-upload-list__item-delete').trigger('click')
       expect(remove).toHaveBeenCalledTimes(3)
+
+      await wrapper.find('.el-icon--close').trigger('keydown', {
+        key: EVENT_CODE.enter,
+      })
+      expect(remove).toHaveBeenCalledTimes(4)
+
+      await wrapper.find('.el-icon--close').trigger('keydown', {
+        key: EVENT_CODE.space,
+      })
+      expect(remove).toHaveBeenCalledTimes(5)
     })
   })
 })

packages/components/upload/src/upload-list.vue

@@ -71,13 +71,14 @@
         <el-icon
           v-if="!disabled"
           :class="nsIcon.m('close')"
+          :aria-label="t('el.upload.delete')"
+          role="button"
+          tabindex="0"
           @click="handleRemove(file)"
+          @keydown.enter.space.prevent="handleRemove(file)"
         >
           <Close />
         </el-icon>
-        <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->
-        <!-- This is a bug which needs to be fixed -->
-        <!-- TODO: Fix the incorrect navigation interaction -->
         <i v-if="!disabled" :class="nsIcon.m('close-tip')">{{
           t('el.upload.deleteTip')
         }}</i>

packages/theme-chalk/src/upload.scss

@@ -235,13 +235,18 @@
       font-style: normal;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-within {
       background-color: getCssVar('fill-color', 'light');
 
       .#{bem('icon', '', 'close')} {
         display: inline-flex;
       }
 
+      .#{bem('icon', '', 'close-tip')} {
+        right: 24px;
+      }
+
       .#{bem('progress', 'text')} {
         display: none;
       }
@@ -284,7 +289,8 @@
       }
 
       &:hover,
-      &:focus {
+      &:focus,
+      &:focus-within {
         .#{bem('upload-list', 'item-status-label')} {
           display: none;
           opacity: 0;