8000 feat(b-form-tags): add `feedback-aria-live` prop (#6347) · bootstrap-vue/bootstrap-vue@5332970 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5332970

Browse files
jacobmllr95jacobmllr95
authored
feat(b-form-tags): add feedback-aria-live prop (#6347)
1 parent a79d98a commit 5332970

File tree

3 files changed

+24
-3
lines changed

3 files changed

+24
-3
lines changed

‎src/components/form-tags/form-tags.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ const props = makePropsConfigurable(
107107
// Handy if using <select> as the input
108108
addOnChange: makeProp(PROP_TYPE_BOOLEAN, false),
109109
duplicateTagText: makeProp(PROP_TYPE_STRING, 'Duplicate tag(s)'),
110+
feedbackAriaLive: makeProp(PROP_TYPE_STRING, 'assertive'),
110111
// Disable the input focus behavior when clicking
111112
// on element matching the selector (or selectors)
112113
ignoreInputFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING, DEFAULT_INPUT_FOCUS_SELECTOR),
@@ -660,7 +661,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
660661
if (invalidTagText || duplicateTagText || limitTagsText) {
661662
// Add an aria live region for the invalid/duplicate tag
662663
// messages if the user has not disabled the messages
663-
const joiner = this.computedJoiner
664+
const { feedbackAriaLive: ariaLive, computedJoiner: joiner } = this
664665

665666
// Invalid tag feedback if needed (error)
666667
let $invalid = h()
@@ -670,6 +671,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
670671
{
671672
props: {
672673
id: invalidFeedbackId,
674+
ariaLive,
673675
forceShow: true
674676
},
675677
key: 'tags_invalid_feedback'
@@ -684,7 +686,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
684686
$duplicate = h(
685687
BFormText,
686688
{
687-
props: { id: duplicateFeedbackId },
689+
props: {
690+
id: duplicateFeedbackId,
691+
ariaLive
692+
},
688693
10000 key: 'tags_duplicate_feedback'
689694
},
690695
[this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
@@ -697,7 +702,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
697702
$limit = h(
698703
BFormText,
699704
{
700-
props: { id: limitFeedbackId },
705+
props: {
706+
id: limitFeedbackId,
707+
ariaLive
708+
},
701709
key: 'tags_limit_feedback'
702710
},
703711
[limitTagsText]

‎src/components/form-tags/form-tags.spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,8 @@ describe('form-tags', () => {
447447
// Duplicate tags
448448
expect(wrapper.emitted('tag-state')[3][2]).toEqual([])
449449
expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
450+
expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toEqual('assertive')
451+
expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toEqual('true')
450452
expect(wrapper.find('.form-text').exists()).toBe(false)
451453
// Add next character
452454
$input.element.value = 'three '
@@ -478,6 +480,7 @@ describe('form-tags', () => {
478480

479481
$input.element.value = ' three two '
480482
await $input.trigger('input')
483+
await wrapper.setProps({ feedbackAriaLive: 'polite' })
481484
expect(wrapper.vm.tags).toEqual(['one', 'two', 'tag'])
482485
// No tags(s) were accepted so the input is left as is
483486
expect(wrapper.vm.newTag).toEqual(' three two ')
@@ -489,13 +492,18 @@ describe('form-tags', () => {
489492
// Duplicate tags
490493
expect(wrapper.emitted('tag-state')[5][2]).toEqual(['two'])
491494
expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
495+
expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toEqual('polite')
496+
expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toEqual('true')
492497
expect(wrapper.find('.form-text').exists()).toBe(true)
493498
await $input.trigger('input')
499+
await wrapper.setProps({ feedbackAriaLive: null })
494500
expect(wrapper.vm.tags).toEqual(['one', 'two', 'tag'])
495501
// No tags(s) were accepted so the input is left as is
496502
expect(wrapper.vm.newTag).toEqual(' three two ')
497503
expect(wrapper.emitted('tag-state').length).toBe(6)
498504
expect(wrapper.find('.invalid-feedback').exists()).toBe(true)
505+
expect(wrapper.find('.invalid-feedback').attributes('aria-live')).toBeUndefined()
506+
expect(wrapper.find('.invalid-feedback').attributes('aria-atomic')).toBeUndefined()
499507
expect(wrapper.find('.form-text').exists()).toBe(true)
500508

501509
$input.element.value = ' '

‎src/components/form-tags/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
"prop": "duplicateTagText",
3030
"description": "The message when duplicate tags are detected. Set to an empty string to disable the message"
3131
},
32+
{
33+
"prop": "feedbackAriaLive",
34+
"version": "2.22.0",
35+
"description": "Value to use for the `aria-live` attribute on the feedback text"
36+
},
3237
{
3338
"prop": "ignoreInputFocusSelector",
3439
"version": "2.16.0",

0 commit comments

Comments
 (0)
0