修复图表实例标识并扩展版本兼容性

src/components/annotation/WaveformAnnotationEditor.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, nextTick, ref, useId, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'
 
 import type { WaveformAnnotation } from '../../types'
 import { formatAnnotationTime, formatPlainNumber, type TimeUnit } from '../../utils'
 import { ANNOTATION_MAX_TEXT_LENGTH, resolveAnnotationStyle } from './markup'
 import type { AnnotationSeriesCandidate, AnnotationSeriesInfo } from './types'
+import { useWaveformInstanceId } from '../../utils/waveformId'
 
 const ColorPicker = defineAsyncComponent(async () => {
   await import('vue3-colorpicker/style.css')
@@ -29,7 +30,7 @@ const emit = defineEmits<{
 }>()
 
 const textarea = ref<HTMLTextAreaElement>()
-const dialogTitleId = `waveform-annotation-editor-title-${useId()}`
+const dialogTitleId = useWaveformInstanceId('waveform-annotation-editor-title')
 const text = ref('')
 const borderColor = ref('')
 const textColor = ref('')

src/components/annotation/components.test.ts

@@ -8,6 +8,30 @@ import WaveformAnnotationLayer from './WaveformAnnotationLayer.vue'
 import WaveformAnnotationToolbar from './WaveformAnnotationToolbar.vue'
 
 describe('waveform annotation controls', () => {
+  it('keeps dialog title ids unique across editor instances', () => {
+    const first = mount(WaveformAnnotationEditor, {
+      props: {
+        annotation: { id: 'first', seriesId: 'a', x: 1, y: 2, text: '说明' },
+        mode: 'edit',
+      },
+    })
+    const second = mount(WaveformAnnotationEditor, {
+      props: {
+        annotation: { id: 'second', seriesId: 'a', x: 1, y: 2, text: '说明' },
+        mode: 'edit',
+      },
+    })
+
+    const firstTitleId = first.get('h2').attributes('id')
+    const secondTitleId = second.get('h2').attributes('id')
+
+    expect(firstTitleId).toBeTruthy()
+    expect(secondTitleId).toBeTruthy()
+    expect(firstTitleId).not.toBe(secondTitleId)
+    expect(first.get('[role="dialog"]').attributes('aria-labelledby')).toBe(firstTitleId)
+    expect(second.get('[role="dialog"]').attributes('aria-labelledby')).toBe(secondTitleId)
+  })
+
   it('allows changing the annotation series inside the editor', async () => {
     const wrapper = mount(WaveformAnnotationEditor, {
       props: {