Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 22, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b9574a
feat(b-form-tags): add `feedback-aria-live` prop
jacobmllr95 Jan 22, 2021
59f8e2c
Merge branch 'dev' into feat-form-tags-add-feedback-aria-live-prop
jacobmllr95 Jan 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/components/form-tags/form-tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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()
Expand All @@ -670,6 +671,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
{
props: {
id: invalidFeedbackId,
ariaLive,
forceShow: true
},
key: 'tags_invalid_feedback'
Expand All @@ -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)]
Expand All @@ -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]
Expand Down
8 changes: 8 additions & 0 deletions src/components/form-tags/form-tags.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 '
Expand Down Expand Up @@ -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 ')
Expand All @@ -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 = ' '
Expand Down
5 changes: 5 additions & 0 deletions src/components/form-tags/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down