feat(BFormTags): added feedbackAriaLive prop (bootstrap-vue-next#2696)

hnben · InfiniteGmng · web-flow · commit b65c1e4496e6 · 2025-05-23T17:05:26.000-07:00
Co-authored-by: Noah Lanctot &lt;135896269+InfiniteGmng@users.noreply.github.com&gt;
diff --git a/apps/docs/src/data/components/formTags.data.ts b/apps/docs/src/data/components/formTags.data.ts
@@ -90,6 +90,11 @@ export default {
             description:
               'The message when duplicate tags are detected. Set to an empty string to disable the message',
           },
+          feedbackAriaLive: {
+            type: 'string',
+            default: "'assertive'",
+            description: 'Value to use for the `aria-live` attribute on the feedback text',
+          },
           inputAttrs: {
             type: 'Readonly<AttrsValue>',
             default: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -97,7 +97,7 @@
           </div>
         </li>
       </ul>
-      <div aria-live="polite" aria-atomic="true">
+      <div :aria-live="props.feedbackAriaLive" aria-atomic="true">
         <div v-if="isInvalid" class="d-block invalid-feedback">
           {{ props.invalidTagText }}: {{ inputValue }}
         </div>
@@ -140,6 +140,7 @@ const _props = withDefaults(defineProps<Omit<BFormTagsProps, 'modelValue'>>(), {
   autofocus: false,
   disabled: false,
   duplicateTagText: 'Duplicate tag(s)',
+  feedbackAriaLive: 'assertive',
   form: undefined,
   inputAttrs: undefined,
   inputClass: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts b/packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts
@@ -25,4 +25,31 @@ describe('form-tags', () => {
       expect($smallElement.text()).toBe('Foo')
     })
   })
+
+  describe('feedbackAriaLive behavior', () => {
+    it('sets aria-live to assertive by default', () => {
+      const wrapper = mount(BFormTags)
+      const feedbackDiv = wrapper.find('.b-form-tags > div[aria-atomic="true"]:last-child')
+      expect(feedbackDiv.exists()).toBe(true)
+      expect(feedbackDiv.attributes('aria-live')).toBe('assertive')
+    })
+
+    it('sets aria-live to polite when feedbackAriaLive is polite', () => {
+      const wrapper = mount(BFormTags, {
+        props: {feedbackAriaLive: 'polite'},
+      })
+      const feedbackDiv = wrapper.find('.b-form-tags > div[aria-atomic="true"]:last-child')
+      expect(feedbackDiv.exists()).toBe(true)
+      expect(feedbackDiv.attributes('aria-live')).toBe('polite')
+    })
+
+    it('sets aria-live to off when feedbackAriaLive is off', () => {
+      const wrapper = mount(BFormTags, {
+        props: {feedbackAriaLive: 'off'},
+      })
+      const feedbackDiv = wrapper.find('.b-form-tags > div[aria-atomic="true"]:last-child')
+      expect(feedbackDiv.exists()).toBe(true)
+      expect(feedbackDiv.attributes('aria-live')).toBe('off')
+    })
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -6,7 +6,7 @@ import type {
   RootBoundary,
   Strategy,
 } from '@floating-ui/vue'
-import type {ComponentPublicInstance, TransitionProps} from 'vue'
+import type {AriaAttributes, ComponentPublicInstance, TransitionProps} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 import type {LinkTarget} from './LinkTarget'
 import type {
@@ -435,6 +435,7 @@ export interface BFormTagsProps {
   autofocus?: boolean
   disabled?: boolean
   duplicateTagText?: string
+  feedbackAriaLive?: AriaAttributes['aria-live']
   form?: string
   inputAttrs?: Readonly<AttrsValue>
   inputClass?: ClassValue
