primevue 3.20.0 → 3.22.0

package/picklist/picklist.esm.js

@@ -1,11 +1,11 @@
 import Button from 'primevue/button';
-import { ObjectUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, createCommentVNode, createElementVNode, TransitionGroup, normalizeStyle, withCtx, Fragment, renderList, withDirectives } from 'vue';
+import { ObjectUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, mergeProps, createCommentVNode, createElementVNode, TransitionGroup, withCtx, Fragment, renderList, withDirectives } from 'vue';
 
 var script = {
     name: 'PickList',
-    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source'],
+    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
     props: {
         modelValue: {
             type: Array,
@@ -46,6 +46,50 @@ var script = {
         showTargetControls: {
             type: Boolean,
             default: true
+        },
+        targetListProps: {
+            type: null,
+            default: null
+        },
+        sourceListProps: {
+            type: null,
+            default: null
+        },
+        moveUpButtonProps: {
+            type: null,
+            default: null
+        },
+        moveTopButtonProps: {
+            type: null,
+            default: null
+        },
+        moveDownButtonProps: {
+            type: null,
+            default: null
+        },
+        moveBottomButtonProps: {
+            type: null,
+            default: null
+        },
+        moveToTargetProps: {
+            type: null,
+            default: null
+        },
+        moveAllToTargetProps: {
+            type: null,
+            default: null
+        },
+        moveToSourceProps: {
+            type: null,
+            default: null
+        },
+        moveAllToSourceProps: {
+            type: null,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     itemTouched: false,
@@ -53,7 +97,12 @@ var script = {
     styleElement: null,
     data() {
         return {
-            d_selection: this.selection
+            d_selection: this.selection,
+            focused: {
+                sourceList: false,
+                targetList: false
+            },
+            focusedOptionIndex: -1
         };
     },
     watch: {
@@ -83,6 +132,26 @@ var script = {
         isSelected(item, listIndex) {
             return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
         },
+        onListFocus(event, listType) {
+            const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, 'li.p-picklist-item.p-highlight');
+            const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children);
+
+            this.focused[listType] = true;
+
+            const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+
+            this.changeFocusedOptionIndex(index, listType);
+            this.$emit('focus', event);
+        },
+        onListBlur(event, listType) {
+            this.focused[listType] = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onOptionMouseDown(index, listType) {
+            this.focused[listType] = true;
+            this.focusedOptionIndex = index;
+        },
         moveUp(event, listIndex) {
             if (this.d_selection && this.d_selection[listIndex]) {
                 let valueList = [...this.modelValue[listIndex]];
@@ -335,12 +404,17 @@ var script = {
                 });
             }
         },
-        onItemClick(event, item, listIndex) {
+        onItemClick(event, item, index, listIndex) {
+            const listType = listIndex === 0 ? 'sourceList' : 'targetList';
+
             this.itemTouched = false;
             const selectionList = this.d_selection[listIndex];
-            const selectedIndex = ObjectUtils.findIndexInList(item, selectionList);
+            const selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
             const selected = selectedIndex != -1;
             const metaSelection = this.itemTouched ? false : this.metaKeySelection;
+            const selectedId = DomHandler.find(this.$refs[listType].$el, '.p-picklist-item')[index].getAttribute('id');
+
+            this.focusedOptionIndex = selectedId;
             let _selection;
 
             if (metaSelection) {
@@ -379,50 +453,145 @@ var script = {
         onItemTouchEnd() {
             this.itemTouched = true;
         },
-        onItemKeyDown(event, item, listIndex) {
-            let listItem = event.currentTarget;
+        onItemKeyDown(event, listType) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event, listType);
+                    break;
 
-            switch (event.which) {
-                //down
-                case 40:
-                    var nextItem = this.findNextItem(listItem);
+                case 'ArrowUp':
+                    this.onArrowUpKey(event, listType);
+                    break;
 
-                    if (nextItem) {
-                        nextItem.focus();
-                    }
+                case 'Home':
+                    this.onHomeKey(event, listType);
+                    break;
 
-                    event.preventDefault();
+                case 'End':
+                    this.onEndKey(event, listType);
                     break;
 
-                //up
-                case 38:
-                    var prevItem = this.findPrevItem(listItem);
+                case 'Enter':
+                    this.onEnterKey(event, listType);
+                    break;
+
+                case 'Space':
+                    this.onSpaceKey(event, listType);
+                    break;
 
-                    if (prevItem) {
-                        prevItem.focus();
+                case 'KeyA':
+                    if (event.ctrlKey) {
+                        this.d_selection = [...this.modelValue];
+                        this.$emit('update:selection', this.d_selection);
                     }
+            }
+        },
+        onArrowDownKey(event, listType) {
+            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType);
 
-                    event.preventDefault();
-                    break;
+            this.changeFocusedOptionIndex(optionIndex, listType);
 
-                //enter
-                case 13:
-                    this.onItemClick(event, item, listIndex);
-                    event.preventDefault();
-                    break;
+            if (event.shiftKey) {
+                this.onEnterKey(event, listType);
+            }
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event, listType) {
+            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType);
+
+            this.changeFocusedOptionIndex(optionIndex, listType);
+
+            if (event.shiftKey) {
+                this.onEnterKey(event, listType);
+            }
+
+            event.preventDefault();
+        },
+        onEnterKey(event, listType) {
+            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+            const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
+            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+            const listId = listType === 'sourceList' ? 0 : 1;
+
+            this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId);
+
+            event.preventDefault();
+        },
+        onSpaceKey(event, listType) {
+            event.preventDefault();
+
+            if (event.shiftKey) {
+                const listId = listType === 'sourceList' ? 0 : 1;
+                const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+                const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]);
+                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                this.d_selection[listId] = [...this.modelValue[listId]].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
+                this.$emit('update:selection', this.d_selection);
+            } else {
+                this.onEnterKey(event, listType);
             }
         },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
+        onHomeKey(event, listType) {
+            if (event.ctrlKey && event.shiftKey) {
+                const listId = listType === 'sourceList' ? 0 : 1;
+                const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                this.d_selection[listId] = [...this.modelValue[listId]].slice(0, matchedOptionIndex + 1);
+                this.$emit('update:selection', this.d_selection);
+            } else {
+                this.changeFocusedOptionIndex(0, listType);
+            }
 
-            if (nextItem) return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
-            else return null;
+            event.preventDefault();
         },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
+        onEndKey(event, listType) {
+            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+
+            if (event.ctrlKey && event.shiftKey) {
+                const listId = listType === 'sourceList' ? 0 : 1;
+                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
 
-            if (prevItem) return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
-            else return null;
+                this.d_selection[listId] = [...this.modelValue[listId]].slice(matchedOptionIndex, items.length);
+                this.$emit('update:selection', this.d_selection);
+            } else {
+                this.changeFocusedOptionIndex(items.length - 1, listType);
+            }
+
+            event.preventDefault();
+        },
+        findNextOptionIndex(index, listType) {
+            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        },
+        findPrevOptionIndex(index, listType) {
+            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        },
+        changeFocusedOptionIndex(index, listType) {
+            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
+
+            let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
+
+            this.focusedOptionIndex = items[order].getAttribute('id');
+            this.scrollInView(items[order].getAttribute('id'), listType);
+        },
+        scrollInView(id, listType) {
+            const element = DomHandler.findSingle(this.$refs[listType].$el, `li[id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
         },
         updateListScroll(listElement) {
             const listItems = DomHandler.find(listElement, '.p-picklist-item.p-highlight');
@@ -500,9 +669,32 @@ var script = {
                 document.head.removeChild(this.styleElement);
                 this.styleElement = null;
             }
+        },
+        moveDisabled(index) {
+            if (!this.d_selection[index] || !this.d_selection[index].length) {
+                return true;
+            }
+        },
+        moveAllDisabled(list) {
+            return ObjectUtils.isEmpty(this[list]);
+        },
+        moveSourceDisabled() {
+            return ObjectUtils.isEmpty(this.targetList);
+        },
+        itemClass(item, id, listIndex) {
+            return ['p-picklist-item', { 'p-highlight': this.isSelected(item, listIndex), 'p-focus': id === this.focusedOptionId }];
         }
     },
     computed: {
+        idSource() {
+            return this.$attrs.id || UniqueComponentId();
+        },
+        idTarget() {
+            return this.$attrs.id || UniqueComponentId();
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
+        },
         containerClass() {
             return [
                 'p-picklist p-component',
@@ -519,6 +711,30 @@ var script = {
         },
         attributeSelector() {
             return UniqueComponentId();
+        },
+        moveUpAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
+        },
+        moveTopAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveTop : undefined;
+        },
+        moveDownAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveDown : undefined;
+        },
+        moveBottomAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
+        },
+        moveToTargetAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToTarget : undefined;
+        },
+        moveAllToTargetAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToTarget : undefined;
+        },
+        moveToSourceAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToSource : undefined;
+        },
+        moveAllToSourceAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToSource : undefined;
         }
     },
     components: {
@@ -538,14 +754,14 @@ const _hoisted_3 = {
   key: 0,
   class: "p-picklist-header"
 };
-const _hoisted_4 = ["onClick", "onDblclick", "onKeydown", "aria-selected"];
+const _hoisted_4 = ["id", "onClick", "onDblclick", "onMousedown", "aria-selected"];
 const _hoisted_5 = { class: "p-picklist-buttons p-picklist-transfer-buttons" };
 const _hoisted_6 = { class: "p-picklist-list-wrapper p-picklist-target-wrapper" };
 const _hoisted_7 = {
   key: 0,
   class: "p-picklist-header"
 };
-const _hoisted_8 = ["onClick", "onDblclick", "onKeydown", "aria-selected"];
+const _hoisted_8 = ["id", "onClick", "onDblclick", "onMousedown", "aria-selected"];
 const _hoisted_9 = {
   key: 1,
   class: "p-picklist-buttons p-picklist-target-controls"
@@ -561,26 +777,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ($props.showSourceControls)
       ? (openBlock(), createElementBlock("div", _hoisted_1, [
           renderSlot(_ctx.$slots, "sourcecontrolsstart"),
-          createVNode(_component_PLButton, {
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveUpAriaLabel,
+            disabled: $options.moveDisabled(0)
+          }, $props.moveUpButtonProps, {
             type: "button",
             icon: "pi pi-angle-up",
             onClick: _cache[0] || (_cache[0] = $event => ($options.moveUp($event, 0)))
-          }),
-          createVNode(_component_PLButton, {
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveTopAriaLabel,
+            disabled: $options.moveDisabled(0)
+          }, $props.moveTopButtonProps, {
             type: "button",
             icon: "pi pi-angle-double-up",
             onClick: _cache[1] || (_cache[1] = $event => ($options.moveTop($event, 0)))
-          }),
-          createVNode(_component_PLButton, {
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveDownAriaLabel,
+            disabled: $options.moveDisabled(0)
+          }, $props.moveDownButtonProps, {
             type: "button",
             icon: "pi pi-angle-down",
             onClick: _cache[2] || (_cache[2] = $event => ($options.moveDown($event, 0)))
-          }),
-          createVNode(_component_PLButton, {
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveBottomAriaLabel,
+            disabled: $options.moveDisabled(0)
+          }, $props.moveBottomButtonProps, {
             type: "button",
             icon: "pi pi-angle-double-down",
             onClick: _cache[3] || (_cache[3] = $event => ($options.moveBottom($event, 0)))
-          }),
+          }), null, 16, ["aria-label", "disabled"]),
           renderSlot(_ctx.$slots, "sourcecontrolsend")
         ]))
       : createCommentVNode("", true),
@@ -590,25 +818,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "sourceheader")
           ]))
         : createCommentVNode("", true),
-      createVNode(TransitionGroup, {
+      createVNode(TransitionGroup, mergeProps({
         ref: "sourceList",
+        id: $options.idSource + '_list',
         name: "p-picklist-flip",
         tag: "ul",
         class: "p-picklist-list p-picklist-source",
-        style: normalizeStyle($props.listStyle),
+        style: $props.listStyle,
         role: "listbox",
-        "aria-multiselectable": "multiple"
-      }, {
+        "aria-multiselectable": "true",
+        "aria-activedescendant": $data.focused['sourceList'] ? $options.focusedOptionId : undefined,
+        tabindex: $options.sourceList && $options.sourceList.length > 0 ? $props.tabindex : -1,
+        onFocus: _cache[5] || (_cache[5] = $event => ($options.onListFocus($event, 'sourceList'))),
+        onBlur: _cache[6] || (_cache[6] = $event => ($options.onListBlur($event, 'sourceList'))),
+        onKeydown: _cache[7] || (_cache[7] = $event => ($options.onItemKeyDown($event, 'sourceList')))
+      }, $props.sourceListProps), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.sourceList, (item, i) => {
             return withDirectives((openBlock(), createElementBlock("li", {
               key: $options.getItemKey(item, i),
-              tabindex: "0",
-              class: normalizeClass(['p-picklist-item', { 'p-highlight': $options.isSelected(item, 0) }]),
-              onClick: $event => ($options.onItemClick($event, item, 0)),
+              id: $options.idSource + '_' + i,
+              class: normalizeClass($options.itemClass(item, `${$options.idSource}_${i}`, 0)),
+              onClick: $event => ($options.onItemClick($event, item, i, 0)),
               onDblclick: $event => ($options.onItemDblClick($event, item, 0)),
-              onKeydown: $event => ($options.onItemKeyDown($event, item, 0)),
               onTouchend: _cache[4] || (_cache[4] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
+              onMousedown: $event => ($options.onOptionMouseDown(i, 'sourceList')),
               role: "option",
               "aria-selected": $options.isSelected(item, 0)
             }, [
@@ -622,30 +856,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ]),
         _: 3
-      }, 8, ["style"])
+      }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
     ]),
     createElementVNode("div", _hoisted_5, [
       renderSlot(_ctx.$slots, "movecontrolsstart"),
-      createVNode(_component_PLButton, {
+      createVNode(_component_PLButton, mergeProps({
+        "aria-label": $options.moveToTargetAriaLabel,
         type: "button",
         icon: "pi pi-angle-right",
-        onClick: $options.moveToTarget
-      }, null, 8, ["onClick"]),
-      createVNode(_component_PLButton, {
+        onClick: $options.moveToTarget,
+        disabled: $options.moveDisabled(0)
+      }, $props.moveToTargetProps), null, 16, ["aria-label", "onClick", "disabled"]),
+      createVNode(_component_PLButton, mergeProps({
+        "aria-label": $options.moveAllToTargetAriaLabel,
         type: "button",
         icon: "pi pi-angle-double-right",
-        onClick: $options.moveAllToTarget
-      }, null, 8, ["onClick"]),
-      createVNode(_component_PLButton, {
+        onClick: $options.moveAllToTarget,
+        disabled: $options.moveAllDisabled('sourceList')
+      }, $props.moveAllToTargetProps), null, 16, ["aria-label", "onClick", "disabled"]),
+      createVNode(_component_PLButton, mergeProps({
+        "aria-label": $options.moveToSourceAriaLabel,
         type: "button",
         icon: "pi pi-angle-left",
-        onClick: $options.moveToSource
-      }, null, 8, ["onClick"]),
-      createVNode(_component_PLButton, {
+        onClick: $options.moveToSource,
+        disabled: $options.moveDisabled(1)
+      }, $props.moveToSourceProps), null, 16, ["aria-label", "onClick", "disabled"]),
+      createVNode(_component_PLButton, mergeProps({
+        "aria-label": $options.moveAllToSourceAriaLabel,
         type: "button",
         icon: "pi pi-angle-double-left",
-        onClick: $options.moveAllToSource
-      }, null, 8, ["onClick"]),
+        onClick: $options.moveAllToSource,
+        disabled: $options.moveSourceDisabled('targetList')
+      }, $props.moveAllToSourceProps), null, 16, ["aria-label", "onClick", "disabled"]),
       renderSlot(_ctx.$slots, "movecontrolsend")
     ]),
     createElementVNode("div", _hoisted_6, [
@@ -654,25 +896,32 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "targetheader")
           ]))
         : createCommentVNode("", true),
-      createVNode(TransitionGroup, {
+      createVNode(TransitionGroup, mergeProps({
         ref: "targetList",
+        id: $options.idTarget + '_list',
         name: "p-picklist-flip",
         tag: "ul",
         class: "p-picklist-list p-picklist-target",
-        style: normalizeStyle($props.listStyle),
+        style: $props.listStyle,
         role: "listbox",
-        "aria-multiselectable": "multiple"
-      }, {
+        "aria-multiselectable": "true",
+        "aria-activedescendant": $data.focused['targetList'] ? $options.focusedOptionId : undefined,
+        tabindex: $options.targetList && $options.targetList.length > 0 ? $props.tabindex : -1,
+        onFocus: _cache[10] || (_cache[10] = $event => ($options.onListFocus($event, 'targetList'))),
+        onBlur: _cache[11] || (_cache[11] = $event => ($options.onListBlur($event, 'targetList'))),
+        onKeydown: _cache[12] || (_cache[12] = $event => ($options.onItemKeyDown($event, 'targetList')))
+      }, $props.targetListProps), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.targetList, (item, i) => {
             return withDirectives((openBlock(), createElementBlock("li", {
               key: $options.getItemKey(item, i),
-              tabindex: "0",
-              class: normalizeClass(['p-picklist-item', { 'p-highlight': $options.isSelected(item, 1) }]),
-              onClick: $event => ($options.onItemClick($event, item, 1)),
+              id: $options.idTarget + '_' + i,
+              class: normalizeClass($options.itemClass(item, `${$options.idTarget}_${i}`, 1)),
+              onClick: $event => ($options.onItemClick($event, item, i, 1)),
               onDblclick: $event => ($options.onItemDblClick($event, item, 1)),
-              onKeydown: $event => ($options.onItemKeyDown($event, item, 1)),
-              onTouchend: _cache[5] || (_cache[5] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
+              onKeydown: _cache[8] || (_cache[8] = $event => ($options.onItemKeyDown($event, 'targetList'))),
+              onMousedown: $event => ($options.onOptionMouseDown(i, 'targetList')),
+              onTouchend: _cache[9] || (_cache[9] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
               role: "option",
               "aria-selected": $options.isSelected(item, 1)
             }, [
@@ -686,31 +935,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ]),
         _: 3
-      }, 8, ["style"])
+      }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
     ]),
     ($props.showTargetControls)
       ? (openBlock(), createElementBlock("div", _hoisted_9, [
           renderSlot(_ctx.$slots, "targetcontrolsstart"),
-          createVNode(_component_PLButton, {
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveUpAriaLabel,
+            disabled: $options.moveDisabled(1)
+          }, $props.moveUpButtonProps, {
             type: "button",
             icon: "pi pi-angle-up",
-            onClick: _cache[6] || (_cache[6] = $event => ($options.moveUp($event, 1)))
-          }),
-          createVNode(_component_PLButton, {
+            onClick: _cache[13] || (_cache[13] = $event => ($options.moveUp($event, 1)))
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveTopAriaLabel,
+            disabled: $options.moveDisabled(1)
+          }, $props.moveTopButtonProps, {
             type: "button",
             icon: "pi pi-angle-double-up",
-            onClick: _cache[7] || (_cache[7] = $event => ($options.moveTop($event, 1)))
-          }),
-          createVNode(_component_PLButton, {
+            onClick: _cache[14] || (_cache[14] = $event => ($options.moveTop($event, 1)))
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveDownAriaLabel,
+            disabled: $options.moveDisabled(1)
+          }, $props.moveDownButtonProps, {
             type: "button",
             icon: "pi pi-angle-down",
-            onClick: _cache[8] || (_cache[8] = $event => ($options.moveDown($event, 1)))
-          }),
-          createVNode(_component_PLButton, {
+            onClick: _cache[15] || (_cache[15] = $event => ($options.moveDown($event, 1)))
+          }), null, 16, ["aria-label", "disabled"]),
+          createVNode(_component_PLButton, mergeProps({
+            "aria-label": $options.moveBottomAriaLabel,
+            disabled: $options.moveDisabled(1)
+          }, $props.moveBottomButtonProps, {
             type: "button",
             icon: "pi pi-angle-double-down",
-            onClick: _cache[9] || (_cache[9] = $event => ($options.moveBottom($event, 1)))
-          }),
+            onClick: _cache[16] || (_cache[16] = $event => ($options.moveBottom($event, 1)))
+          }), null, 16, ["aria-label", "disabled"]),
           renderSlot(_ctx.$slots, "targetcontrolsend")
         ]))
       : createCommentVNode("", true)
@@ -744,7 +1005,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-picklist {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-picklist-buttons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-picklist-list-wrapper {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 50%;\n            flex: 1 1 50%;\n}\n.p-picklist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,\n.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {\n    -webkit-transition: none !important;\n    transition: none !important;\n}\n";
+var css_248z = "\n.p-picklist {\n    display: flex;\n}\n.p-picklist-buttons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.p-picklist-list-wrapper {\n    flex: 1 1 50%;\n}\n.p-picklist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,\n.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {\n    transition: none !important;\n}\n";
 styleInject(css_248z);
 
 script.render = render;