fix: improve task hint modal accessibility

src/views/Editor/EnglishSpeaking/preview/TaskHintModal.vue

@@ -1,8 +1,13 @@
 <template>
   <div v-if="visible" class="modal-mask" @click.self="emit('close')">
-    <div class="modal hint-modal scale-in">
+    <div
+      class="modal hint-modal scale-in"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="task-hint-modal-title"
+    >
       <div class="modal-head">
-        <h3 class="modal-title">
+        <h3 id="task-hint-modal-title" class="modal-title">
           <svg
             width="14"
             height="14"
@@ -19,7 +24,9 @@
               d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"
             />
           </svg>
-          {{ aiName ? `${aiName} 的任务提示` : '任务提示' }}
+          <span class="modal-title-text">
+            {{ aiName ? `${aiName} 的任务提示` : '任务提示' }}
+          </span>
         </h3>
         <button class="close-btn" type="button" aria-label="关闭" @click="emit('close')">
           <svg
@@ -158,6 +165,13 @@ const emit = defineEmits<{
   flex: 0 0 auto;
 }
 
+.modal-title-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .close-btn {
   display: flex;
   flex: 0 0 auto;
@@ -340,6 +354,22 @@ const emit = defineEmits<{
   text-align: center;
 }
 
+.scale-in {
+  animation: scale-in 0.18s ease-out;
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @media (max-width: 420px) {
   .hint-modal {
     padding: 16px;