feat(b-form-tags): add feedback-aria-live prop (#6347)

jacobmllr95 · web-flow · commit 533297054ce9 · 2021-01-22T13:21:59.000+01:00
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -107,6 +107,7 @@ const props = makePropsConfigurable(
     // Handy if using <select> as the input
     addOnChange: makeProp(PROP_TYPE_BOOLEAN, false),
     duplicateTagText: makeProp(PROP_TYPE_STRING, 'Duplicate tag(s)'),
+    feedbackAriaLive: makeProp(PROP_TYPE_STRING, 'assertive'),
     // Disable the input focus behavior when clicking
     // on element matching the selector (or selectors)
     ignoreInputFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING, DEFAULT_INPUT_FOCUS_SELECTOR),
@@ -660,7 +661,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       if (invalidTagText || duplicateTagText || limitTagsText) {
         // Add an aria live region for the invalid/duplicate tag
         // messages if the user has not disabled the messages
-        const joiner = this.computedJoiner
+        const { feedbackAriaLive: ariaLive, computedJoiner: joiner } = this
 
         // Invalid tag feedback if needed (error)
         let $invalid = h()
@@ -670,6 +671,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
             {
               props: {
                 id: invalidFeedbackId,
+                ariaLive,
                 forceShow: true
               },
               key: 'tags_invalid_feedback'
@@ -684,7 +686,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           $duplicate = h(
             BFormText,
             {
-              props: { id: duplicateFeedbackId },
+              props: {
+                id: duplicateFeedbackId,
+                ariaLive
+              },
               key: 'tags_duplicate_feedback'
             },
             [this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
@@ -697,7 +702,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           $limit = h(
             BFormText,
             {
-              props: { id: limitFeedbackId },
+              props: {
+                id: limitFeedbackId,
+                ariaLive
+              },
               key: 'tags_limit_feedback'
             },
             [limitTagsText]
diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js
@@ -447,6 +447,8 @@ describe('form-tags', () => {
     // Duplicate tags
     expect(wrapper.emitted('tag-state')[3][2]).toEqual([])
     expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
+    expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toEqual('assertive')
+    expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toEqual('true')
     expect(wrapper.find('.form-text').exists()).toBe(false)
     // Add next character
     $input.element.value = 'three '
@@ -478,6 +480,7 @@ describe('form-tags', () => {
 
     $input.element.value = ' three two '
     await $input.trigger('input')
+    await wrapper.setProps({ feedbackAriaLive: 'polite' })
     expect(wrapper.vm.tags).toEqual(['one', 'two', 'tag'])
     // No tags(s) were accepted so the input is left as is
     expect(wrapper.vm.newTag).toEqual(' three two ')
@@ -489,13 +492,18 @@ describe('form-tags', () => {
     // Duplicate tags
     expect(wrapper.emitted('tag-state')[5][2]).toEqual(['two'])
     expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
+    expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toEqual('polite')
+    expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toEqual('true')
     expect(wrapper.find('.form-text').exists()).toBe(true)
     await $input.trigger('input')
+    await wrapper.setProps({ feedbackAriaLive: null })
     expect(wrapper.vm.tags).toEqual(['one', 'two', 'tag'])
     // No tags(s) were accepted so the input is left as is
     expect(wrapper.vm.newTag).toEqual(' three two ')
     expect(wrapper.emitted('tag-state').length).toBe(6)
     expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
+    expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toBeUndefined()
+    expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toBeUndefined()
     expect(wrapper.find('.form-text').exists()).toBe(true)
 
     $input.element.value = '    '
diff --git a/src/components/form-tags/package.json b/src/components/form-tags/package.json
@@ -29,6 +29,11 @@
             "prop": "duplicateTagText",
             "description": "The message when duplicate tags are detected. Set to an empty string to disable the message"
           },
+          {
+            "prop": "feedbackAriaLive",
+            "version": "2.22.0",
+            "description": "Value to use for the `aria-live` attribute on the feedback text"
+          },
           {
             "prop": "ignoreInputFocusSelector",
             "version": "2.16.0",
