@@ -572,7 +572,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
572 572
return h(
573 573
BFormTag,
574 574
{
575 -
key: `li-tag__${tag}`,
576 575
class: tagClass,
577 576
props: {
578 577
// `BFormTag` will auto generate an ID
@@ -584,7 +583,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
584 583
pill: tagPills,
585 584
removeLabel: tagRemoveLabel
586 585
},
587 -
on: { remove: () => removeTag(tag) }
586 +
on: { remove: () => removeTag(tag) },
587 +
key: `tags_${tag}`
588 588
},
589 589
tag
590 590
)
@@ -640,40 +640,52 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
640 640
invisible: disableAddButton
641 641
},
642 642
style: { fontSize: '90%' },
643 -
props: { variant: addButtonVariant, disabled: disableAddButton || isLimitReached },
643 +
props: {
644 +
variant: addButtonVariant,
645 +
disabled: disableAddButton || isLimitReached
646 +
},
644 647
on: { click: () => addTag() }
645 648
},
646 649
[this.normalizeSlot('add-button-text') || addButtonText]
647 650
)
648 651 649 -
// ID of the tags+input `<ul>` list
650 -
// Note we could concatenate inputAttrs.id with `__TAG__LIST__`
651 -
// But note that the inputID may be null until after mount
652 -
// `safeId` returns `null`, if no user provided ID, until after
653 -
// mount when a unique ID is generated
654 -
const tagListId = this.safeId('__TAG__LIST__')
652 +
// ID of the tags + input `<ul>` list
653 +
// Note we could concatenate `inputAttrs.id` with '__tag_list__'
654 +
// but `inputId` may be `null` until after mount
655 +
// `safeId()` returns `null`, if no user provided ID,
656 +
// until after mount when a unique ID is generated
657 +
const tagListId = this.safeId('__tag_list__')
655 658 656 659
const $field = h(
657 660
'li',
658 661
{
659 -
key: '__li-input__',
660 -
staticClass: 'flex-grow-1',
662 +
staticClass: 'b-from-tags-field flex-grow-1',
661 663
attrs: {
662 664
role: 'none',
663 665
'aria-live': 'off',
664 666
'aria-controls': tagListId
665 -
}
667 +
},
668 +
key: 'tags_field'
666 669
},
667 -
[h('div', { staticClass: 'd-flex', attrs: { role: 'group' } }, [$input, $button])]
670 +
[
671 +
h(
672 +
'div',
673 +
{
674 +
staticClass: 'd-flex',
675 +
attrs: { role: 'group' }
676 +
},
677 +
[$input, $button]
678 +
)
679 +
]
668 680
)
669 681 670 682
// Wrap in an unordered list element (we use a list for accessibility)
671 683
const $ul = h(
672 684
'ul',
673 685
{
674 -
key: '_tags_list_',
675 686
staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
676 -
attrs: { id: tagListId }
687 +
attrs: { id: tagListId },
688 +
key: 'tags_list'
677 689
},
678 690
[$tags, $field]
679 691
)
@@ -691,8 +703,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
691 703
$invalid = h(
692 704
BFormInvalidFeedback,
693 705
{
694 -
key: '_tags_invalid_feedback_',
695 -
props: { id: invalidFeedbackId, forceShow: true }
706 +
props: { id: invalidFeedbackId, forceShow: true },
707 +
key: 'tags_invalid_feedback'
696 708
},
697 709
[this.invalidTagText, ': ', this.invalidTags.join(joiner)]
698 710
)
@@ -704,8 +716,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
704 716
$duplicate = h(
705 717
BFormText,
706 718
{
707 -
key: '_tags_duplicate_feedback_',
708 -
props: { id: duplicateFeedbackId }
719 +
props: { id: duplicateFeedbackId },
720 +
key: 'tags_duplicate_feedback'
709 721
},
710 722
[this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
711 723
)
@@ -717,8 +729,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
717 729
$limit = h(
718 730
BFormText,
719 731
{
720 -
key: '_tags_limit_feedback_',
721 -
props: { id: limitFeedbackId }
732 +
props: { id: limitFeedbackId },
733 +
key: 'tags_limit_feedback'
722 734
},
723 735
[limitTagsText]
724 736
)
@@ -727,8 +739,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
727 739
$feedback = h(
728 740
'div',
729 741
{
730 -
key: '_tags_feedback_',
731 -
attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' }
742 +
attrs: {
743 +
'aria-live': 'polite',
744 +
'aria-atomic': 'true'
745 +
},
746 +
key: 'tags_feedback'
732 747
},
733 748
[$invalid, $duplicate, $limit]
734 749
)
@@ -789,7 +804,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
789 804
{
790 805
staticClass: 'sr-only',
791 806
attrs: {
792 -
id: this.safeId('_selected-tags_'),
807 +
id: this.safeId('__selected_tags__'),
793 808
role: 'status',
794 809
for: this.computedInputId,
795 810
'aria-live': this.hasFocus ? 'polite' : 'off',
@@ -806,7 +821,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
806 821
{
807 822
staticClass: 'sr-only',
808 823
attrs: {
809 -
id: this.safeId('_removed-tags_'),
824 +
id: this.safeId('__removed_tags__'),
810 825
role: 'status',
811 826
'aria-live': this.hasFocus ? 'assertive' : 'off',
812 827
'aria-atomic': 'true'
@@ -822,13 +837,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
822 837
// for native submission of forms
823 838
$hidden = this.tags.map(tag => {
824 839
return h('input', {
825 -
key: tag,
826 840
attrs: {
827 841
type: 'hidden',
828 842
value: tag,
829 843
name: this.name,
830 844
form: this.form || null
831 -
}
845 +
},
846 +
key: `tag_input_${tag}`
832 847
})
833 848
})
834 849
}
@@ -849,7 +864,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
849 864
id: this.safeId(),
850 865
role: 'group',
851 866
tabindex: this.disabled || this.noOuterFocus ? null : '-1',
852 -
'aria-describedby': this.safeId('_selected_')
867 +
'aria-describedby': this.safeId('__selected_tags__')
853 868
},
854 869
on: {
855 870
click: this.onClick,
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4